没错，用三方 Github 作受权登陆就是这么简单！（OAuth2.0实战）

本文收录在我的博客： www.chengxy-nds.top，技术资源共享。

上一篇《OAuth2.0 的四种受权方式》文末说过，后续要来一波OAuth2.0实战，耽误了几天今儿终于补上了。

最近在作本身的开源项目（fire），Springboot + vue 的先后端分离框架才搭建完，刚开始作登陆功能，作着作着以为普通帐户密码登陆太简单了没啥意思，思来想去为显得逼格高一点，决定再加上 GitHub受权 和 人脸识别等多种登陆方式。

而GitHub受权登陆正好用到了OAuth2.0中最复杂的受权码模式，正好拿我这个案例给你们分享一下OAuth2.0的受权过程，后续项目功能会持续更新。

1、受权流程

在具体作GitHub受权登陆以前，我们再简单回顾一下OAuth2.0受权码模式的受权流程，若是 fire 网站容许 用GitHub 帐号登陆，流程大体以下图。

用户想用GitHub 帐号去登陆 fire 网站：

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

2、身份注册

梳理完受权逻辑，接下来咱们还有一些准备工做。

要想获得一个网站的OAuth受权，必需要到它的网站进行身份注册，拿到应用的身份识别码 ClientID 和 ClientSecret。

注册 传送门 https://github.com/settings/applications/1334665，有几个必填项。

• Application name：咱们的应用名；
• Homepage URL：应用主页连接；
• Authorization callback URL：这个是github 回调咱们项目的地址，用来获取受权码和令牌。

提交后会看到就能够看到客户端ClientID 和客户端密匙ClientSecret，到这咱们的准备工做就完事了。

3、受权开发

一、获取受权码

为了更好的看效果，获取受权码我处理的比较粗暴，直接在JS里拼装好了受权连接，但实际工做开发中必定要考虑到安全问题。

https://github.com/login/oauth/authorize?
client_id=ad41c05c211421c659db&
redirect_uri=http://47.93.6.5:8080/authorize/redirect

前端 vue 的逻辑也很是简单，只须要 window.location.href 重定向一下。

<script>
export default {
  methods: {
    loginByGithub: function () {
      window.location.href = 'https://github.com/login/oauth/authorize?client_id=ad41c05c211421c659db&redirect_uri=http://47.93.6.5:8080/authorize/redirect'
    }
  }
}
</script>

请求后会提示让咱们受权，赞成受权后会重定向到authorize/redirect，并携带受权码code；若是以前已经赞成过，会跳过这一步直接回调。

二、获取令牌

受权后紧接着就要回调 fire 网站接口，拿到受权码之后拼装获取令牌 access_token的请求连接，这时会用到客户端密匙client_secret。

https://github.com/login/oauth/access_token? 
    client_id=${clientID}& 
    client_secret=${clientSecret}& 
    code=${requestToken}

access_token 会做为请求响应返回，结果是个串字符，须要咱们截取一下。

access_token=4dc43c2f43b773c327f97acf5dd66b147db9259c&scope=&token_type=bearer

有了令牌之后开始获取用户信息，在 API 中要带上access_token。

https://api.github.com/user?access_token=4dc43c2f43b773c327f97acf5dd66b147db9259c

返回的用户信息是 JSON 数据格式，若是想把数据传递给前端，能够经过 url 重定向到前端页面，将数据以参数的方式传递。

{
    "login": "chengxy-nds",
    "id": 12745094,
    "node_id": "",
    "avatar_url": "https://avatars3.githubusercontent.com/u/12745094?v=4",
    "gravatar_id": "",
    "url": "https://api.github.com/users/chengxy-nds",
    "html_url": "https://github.com/chengxy-nds",
    "followers_url": "https://api.github.com/users/chengxy-nds/followers",
    "following_url": "https://api.github.com/users/chengxy-nds/following{/other_user}",
    "gists_url": "https://api.github.com/users/chengxy-nds/gists{/gist_id}",
    "starred_url": "https://api.github.com/users/chengxy-nds/starred{/owner}{/repo}",
    "subscriptions_url": "https://api.github.com/users/chengxy-nds/subscriptions",
    "organizations_url": "https://api.github.com/users/chengxy-nds/orgs",
    "repos_url": "https://api.github.com/users/chengxy-nds/repos",
    "events_url": "https://api.github.com/users/chengxy-nds/events{/privacy}",
    "received_events_url": "https://api.github.com/users/chengxy-nds/received_events",
    "type": "",
    "site_admin": false,
    "name": "程序员内点事",
    "company": null,
    "blog": "",
    "location": null,
    "email": "",
    "hireable": null,
    "bio": null,
    "twitter_username": null,
    "public_repos": 7,
    "public_gists": 0,
    "followers": 14,
    "following": 0,
    "created_at": "2015-06-04T09:22:44Z",
    "updated_at": "2020-07-13T06:08:57Z"
}

下边是 GitHub 回调咱们 fire网站后端处理流程的部分代码，写的比较糙，后续继续优化吧！

/**
     * @param code
     * @author xiaofu
     * @description 受权回调
     * @date 2020/7/10 15:42
     */
   @RequestMapping("/authorize/redirect")
    public ModelAndView authorize(@NotEmpty String code) {

        log.info("受权码code: {}", code);

        /**
         * 从新到前端主页
         */
        String redirectHome = "http://47.93.6.5/home";

        try {
            /**
             * 一、拼装获取accessToken url
             */
            String accessTokenUrl = gitHubProperties.getAccesstokenUrl()
                    .replace("clientId", gitHubProperties.getClientId())
                    .replace("clientSecret", gitHubProperties.getClientSecret())
                    .replace("authorize_code", code);

            /**
             * 返回结果中直接返回token
             */
            String result = OkHttpClientUtil.sendByGetUrl(accessTokenUrl);
            log.info(" 请求 token 结果：{}", result);

            String accessToken = null;
            Pattern p = Pattern.compile("=(\\w+)&");
            Matcher m = p.matcher(result);
            while (m.find()) {
                accessToken = m.group(1);
                log.info("令牌token：{}", m.group(1));
                break;
            }

            /**
             * 成功获取token后，开始请求用户信息
             */
            String userInfoUrl = gitHubProperties.getUserUrl().replace("accessToken", accessToken);

            String userResult = OkHttpClientUtil.sendByGetUrl(userInfoUrl);

            log.info("用户信息：{}", userResult);

            UserInfo userInfo = JSON.parseObject(userResult, UserInfo.class);

            redirectHome += "?name=" + userInfo.getName();

        } catch (Exception e) {
            log.error("受权回调异常={}", e);
        }
        return new ModelAndView(new RedirectView(redirectHome));
    }

最后咱们动图看一下总体的受权流程，因为GitHub的访问速度比较慢，偶尔会有请求超时的现象。

线上预览地址：http://47.93.6.5/login ，欢迎体验~

项目 GitHub 地址：https://github.com/chengxy-nds/fire.git

总结

从整个GitHub受权登陆的过程来看，OAuth2.0的受权码模式仍是比较简单的，搞懂了一个GitHub的登陆，像微信、围脖其余三方登陆也就都会了，彻底是大同小异的东西，感兴趣的同窗能够试一试。

原创不易，燃烧秀发输出内容，若是有一丢丢收获，点个赞鼓励一下吧！

习惯在VX看技术文章，想要获取更多Java资源的同窗，能够关注个人公众号： 程序员内点事，暗号：[ 666]