沒錯，用三方 Github 做授權登入就是這麼簡單！（OAuth2.0實戰）

程式設計師內點事發表於2020-07-14
GithubOAuth

本文收錄在個人部落格：www.chengxy-nds.top，技術資源共享。

上一篇《OAuth2.0 的四種授權方式》文末說過，後續要來一波OAuth2.0實戰，耽誤了幾天今兒終於補上了。

最近在做自己的開源專案（fire），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。

註冊 傳送門 https://github.com/settings/applications/1334665，有幾個必填項。

  • Application name：我們的應用名；
  • Homepage URL：應用主頁連結；
  • Authorization callback URL：這個是github 回撥我們專案的地址，用來獲取授權碼和令牌。
    在這裡插入圖片描述

提交後會看到就可以看到客戶端ClientID 和客戶端密匙ClientSecret，到這我們的準備工作就完事了。

在這裡插入圖片描述

三、授權開發

1、獲取授權碼

為了更好的看效果，獲取授權碼我處理的比較粗暴，直接在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；如果之前已經同意過，會跳過這一步直接回撥。

在這裡插入圖片描述

2、獲取令牌

授權後緊接著就要回撥 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 {
            /**
             * 1、拼裝獲取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的登入，像微信、圍脖其他三方登入也就都會了，完全是大同小異的東西，感興趣的同學可以試一試。

原創不易，燃燒秀髮輸出內容，如果有一丟丟收穫，點個贊鼓勵一下吧！

整理了幾百本各類技術電子書，送給小夥伴們。關注公號回覆【666】自行領取。和一些小夥伴們建了一個技術交流群，一起探討技術、分享技術資料，旨在共同學習進步，如果感興趣就掃碼加入我們吧！

相關文章