Spring Boot实现OAuth2.0登录实战

一、前言

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

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

二、授权流程

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

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

• fire 网站先让用户跳转到 GitHub 进行授权，会弹出一个授权框。
  
• 用户同意后，GitHub 会根据redirect_uri 重定向回 fire 网站，同时返回一个授权码code。
  
• fire 网站使用授权码和客户端密匙client_secret，向 GitHub 请求令牌token，检验通过返回令牌。
  
• 末了fire 网站向GitHub 请求数据，每次调用 GitHub 的 API 都要带上令牌。
  

三、身份注册

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

• Application name：我们的应用名；
  
• Homepage URL：应用主页链接；
  
• Authorization callback URL：这个是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企服之家，中国第一个企服评测及商务社交产业平台。