怎么用三方Github做授權(quán)登錄

一、授權(quán)流程二、身份注冊(cè)三、授權(quán)開(kāi)發(fā)1、獲取授權(quán)碼

為了更好的看效果，獲取授權(quán)碼我處理的比較粗暴，直接在JS里拼裝好了授權(quán)鏈接，但實(shí)際工作開(kāi)發(fā)中一定要考慮到安全問(wèn)題。

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

前端 vue 的邏輯也非常簡(jiǎn)單，只需要 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>

請(qǐng)求后會(huì)提示讓我們授權(quán)，同意授權(quán)后會(huì)重定向到authorize/redirect，并攜帶授權(quán)碼code；如果之前已經(jīng)同意過(guò)，會(huì)跳過(guò)這一步直接回調(diào)。

2、獲取令牌

授權(quán)后緊接著就要回調(diào) fire 網(wǎng)站接口，拿到授權(quán)碼以后拼裝獲取令牌 access_token的請(qǐng)求鏈接，這時(shí)會(huì)用到客戶(hù)端密匙client_secret。

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

access_token 會(huì)作為請(qǐng)求響應(yīng)返回，結(jié)果是個(gè)串字符，需要我們截取一下。

access_token=4dc43c2f43b773c327f97acf5dd66b147db9259c&scope=&token_type=bearer

有了令牌以后開(kāi)始獲取用戶(hù)信息，在 API 中要帶上access_token。

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

返回的用戶(hù)信息是 JSON 數(shù)據(jù)格式，如果想把數(shù)據(jù)傳遞給前端，可以通過(guò) url 重定向到前端頁(yè)面，將數(shù)據(jù)以參數(shù)的方式傳遞。

{
    "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": "程序員內(nèi)點(diǎn)事",
    "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 回調(diào)我們 fire網(wǎng)站后端處理流程的部分代碼，寫(xiě)的比較糙，后續(xù)繼續(xù)優(yōu)化吧！

/**
     * @param code
     * @author xiaofu
     * @description 授權(quán)回調(diào)
     * @date 2020/7/10 15:42
     */
   @RequestMapping("/authorize/redirect")
    public ModelAndView authorize(@NotEmpty String code) {

        log.info("授權(quán)碼code: {}", code);

        /**
         * 重新到前端主頁(yè)
         */
        String redirectHome = "http://47.93.6.5/home";

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

            /**
             * 返回結(jié)果中直接返回token
             */
            String result = OkHttpClientUtil.sendByGetUrl(accessTokenUrl);
            log.info(" 請(qǐng)求 token 結(jié)果：{}", 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后，開(kāi)始請(qǐng)求用戶(hù)信息
             */
            String userInfoUrl = gitHubProperties.getUserUrl().replace("accessToken", accessToken);

            String userResult = OkHttpClientUtil.sendByGetUrl(userInfoUrl);

            log.info("用戶(hù)信息：{}", userResult);

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

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

        } catch (Exception e) {
            log.error("授權(quán)回調(diào)異常={}", e);
        }
        return new ModelAndView(new RedirectView(redirectHome));
    }

最后我們動(dòng)圖看一下整體的授權(quán)流程，由于GitHub的訪問(wèn)速度比較慢，偶爾會(huì)有請(qǐng)求超時(shí)的現(xiàn)象。