ToB企服应用市场:ToB评测及商务社交产业平台

标题: Spring Boot实现OAuth2.0登录实战 [打印本页]
作者: 大连密封材料    时间: 2024-12-18 09:57
标题: Spring Boot实现OAuth2.0登录实战
一、前言

迩来在研究Springboot + Vue 的前后端分离框架，刚开始做登录功能，做着做着以为平凡账户密码登录太简单了，决定再加上 GitHub授权 和 人脸辨认等多种快捷登录方式。


而GitHub授权登录正好用到了OAuth2.0中最复杂的授权码模式，正好拿我这个案例给各人分享一下OAuth2.0的授权过程。

二、授权流程

在详细做GitHub授权登录之前，咱们再简单回顾一下OAuth2.0授权码模式的授权流程，如果 fire 网站允许 用GitHub 账号登录，流程大致如下图。


以下是用户使用Github账号实现fire网站登录流程的说明：


三、身份注册

要想得到一个网站的OAuth授权，必须要到它的网站进行身份注册，拿到应用的身份辨认码 ClientID 和 ClientSecret。首先，打开Github的传送门 Sign in to GitHub · GitHub，有几个必填项。



提交后会看到就可以看到客户端ClientID 和客户端密匙ClientSecret，到这我们的准备工作就完成了。


四、授权开发

获取授权码

为了更好的看效果，获取授权码我处理的比较粗暴，直接在JS里拼装好了授权链接，但实际工作开发中一定要思量到安全题目。
  1. https://github.com/login/oauth/authorize?
  2. client_id=ad41c05c211421c659db&
  3. redirect_uri=http://47.93.6.5:8080/authorize/redirect
复制代码
前端 Vue 的逻辑实现也非常简单，只需要 window.location.href 重定向一下即可。
  1. <script>export default {  methods: {    loginByGithub: function () {      window.location.href = 'https://github.com/login/oauth/authorize?
  2. client_id=ad41c05c211421c659db&
  3. redirect_uri=http://47.93.6.5:8080/authorize/redirect
  4. '    }  }}</script>
复制代码
请求后会提示让我们授权，同意授权后会重定向到authorize/redirect，并携带授权码code；如果之前已经同意过，会跳过这一步直接回调。

获取令牌

授权后紧接着就要回调 fire 网站接口，拿到授权码以后拼装获取令牌 access_token的请求链接，这时会用到客户端密匙client_secret。
  1. https://github.com/login/oauth/access_token? 
  2.     client_id=${clientID}& 
  3.     client_secret=${clientSecret}& 
  4.     code=${requestToken}
复制代码
access_token 会作为请求相应返回，结果是个串字符，需要我们截取一下。
  1. access_token=4dc43c2f43b773c327f97acf5dd66b147db9259c&scope=&token_type=bearer
复制代码
有了令牌以后开始获取用户信息，在 API 中要带上access_token。
  1. https://api.github.com/user?access_token=4dc43c2f43b773c327f97acf5dd66b147db9259c
复制代码
返回的用户信息是 JSON 数据格式，如果想把数据传递给前端，可以通过 url 重定向到前端页面，将数据以参数的方式传递。
  1. {
  2.     "login": "chengxy-nds",
  3.     "id": 12745094,
  4.     "node_id": "",
  5.     "avatar_url": "https://avatars3.githubusercontent.com/u/12745094?v=4",
  6.     "gravatar_id": "",
  7.     "url": "https://api.github.com/users/chengxy-nds",
  8.     "html_url": "https://github.com/chengxy-nds",
  9.     "followers_url": "https://api.github.com/users/chengxy-nds/followers",
  10.     "following_url": "https://api.github.com/users/chengxy-nds/following{/other_user}",
  11.     "gists_url": "https://api.github.com/users/chengxy-nds/gists{/gist_id}",
  12.     "starred_url": "https://api.github.com/users/chengxy-nds/starred{/owner}{/repo}",
  13.     "subscriptions_url": "https://api.github.com/users/chengxy-nds/subscriptions",
  14.     "organizations_url": "https://api.github.com/users/chengxy-nds/orgs",
  15.     "repos_url": "https://api.github.com/users/chengxy-nds/repos",
  16.     "events_url": "https://api.github.com/users/chengxy-nds/events{/privacy}",
  17.     "received_events_url": "https://api.github.com/users/chengxy-nds/received_events",
  18.     "type": "",
  19.     "site_admin": false,
  20.     "name": "程序员内点事",
  21.     "company": null,
  22.     "blog": "",
  23.     "location": null,
  24.     "email": "",
  25.     "hireable": null,
  26.     "bio": null,
  27.     "twitter_username": null,
  28.     "public_repos": 7,
  29.     "public_gists": 0,
  30.     "followers": 14,
  31.     "following": 0,
  32.     "created_at": "2015-06-04T09:22:44Z",
  33.     "updated_at": "2020-07-13T06:08:57Z"
  34. }
复制代码
下边是 GitHub 回调我们 fire网站后端处理流程的部门代码，示比方下。
  1.    @RequestMapping("/authorize/redirect")
  2.     public ModelAndView authorize(@NotEmpty String code) {
  5.         log.info("授权码code: {}", code);
  8.         /**
  9.          * 重新到前端主页
  10.          */
  11.         String redirectHome = "http://47.93.6.5/home";
  14.         try {
  15.             /**
  16.              * 1、拼装获取accessToken url
  17.              */
  18.             String accessTokenUrl = gitHubProperties.getAccesstokenUrl()
  19.                     .replace("clientId", gitHubProperties.getClientId())
  20.                     .replace("clientSecret", gitHubProperties.getClientSecret())
  21.                     .replace("authorize_code", code);
  24.             /**
  25.              * 返回结果中直接返回token
  26.              */
  27.             String result = OkHttpClientUtil.sendByGetUrl(accessTokenUrl);
  28.             log.info(" 请求 token 结果：{}", result);
  31.             String accessToken = null;
  32.             Pattern p = Pattern.compile("=(\\w+)&");
  33.             Matcher m = p.matcher(result);
  34.             while (m.find()) {
  35.                 accessToken = m.group(1);
  36.                 log.info("令牌token：{}", m.group(1));
  37.                 break;
  38.             }
  41.             /**
  42.              * 成功获取token后，开始请求用户信息
  43.              */
  44.             String userInfoUrl = gitHubProperties.getUserUrl().replace("accessToken", accessToken);
  47.             String userResult = OkHttpClientUtil.sendByGetUrl(userInfoUrl);
  50.             log.info("用户信息：{}", userResult);
  53.             UserInfo userInfo = JSON.parseObject(userResult, UserInfo.class);
  56.             redirectHome += "?name=" + userInfo.getName();
  59.         } catch (Exception e) {
  60.             log.error("授权回调异常={}", e);
  61.         }
  62.         return new ModelAndView(new RedirectView(redirectHome));
  63.     }
复制代码
末了，我们动图看一下团体的授权流程，由于GitHub的访问速率比较慢，偶尔会有请求超时的征象。


项目链接：https://github.com/chengxy-nds/fire.git

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4