>本文收錄在個人部落格：[www.chengxy-nds.top](http://www.chengxy-nds.top)，技術資源共享。 上一篇[《OAuth2.0 的四種授權方式》](https://mp.weixin.qq.com/s/in_E1pKqQc8wkPXT61g8gQ)文末說過，後續要來一波`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) `https://github.com/settings/applications/1334665`，有幾個必填項。 - `Application name`：我們的應用名； - `Homepage URL`：應用主頁連結； - `Authorization callback URL`：這個是`github` 回撥我們專案的地址，用來獲取授權碼和令牌。  提交後會看到就可以看到客戶端`ClientID` 和客戶端密匙`ClientSecret`，到這我們的準備工作就完事了。  ## 三、授權開發 ### 1、獲取授權碼 為了更好的看效果，獲取授權碼我處理的比較粗暴，直接在`JS`裡拼裝好了授權連結，但實際工作開發中一定要考慮到安全問題。 ```javascript https://github.com/login/oauth/authorize? client_id=ad41c05c211421c659db& redirect_uri=http://47.93.6.5:8080/authorize/redirect ``` 前端 `vue` 的邏輯也非常簡單，只需要 `window.location.href` 重定向一下。 ```javascript ``` 請求後會提示讓我們授權，同意授權後會重定向到`authorize/redirect`，並攜帶授權碼`code`；如果之前已經同意過，會跳過這一步直接回調。  ### 2、獲取令牌 授權後緊接著就要回調 `fire` 網站介面，拿到授權碼以後拼裝獲取令牌 `access_token`的請求連結，這時會用到客戶端密匙`client_secret`。 ```javascript https://github.com/login/oauth/access_token? client_id=${clientID}& client_secret=${clientSecret}& code=${requestToken} ``` `access_token` 會作為請求響應返回，結果是個串字元，需要我們擷取一下。 ```javascript access_token=4dc43c2f43b773c327f97acf5dd66b147db9259c&scope=&token_type=bearer ``` 有了令牌以後開始獲取使用者資訊，在 `API` 中要帶上`access_token`。 ```javascript https://api.github.com/user?access_token=4dc43c2f43b773c327f97acf5dd66b147db9259c ``` 返回的使用者資訊是 `JSON` 資料格式，如果想把資料傳遞給前端，可以通過 `url` 重定向到前端頁面，將資料以引數的方式傳遞。 ```javascript { "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`網站後端處理流程的部分程式碼，寫的比較糙，後續繼續優化吧！ ```javascript /** * @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】自行領取。和一些小夥伴們建了一個技術交流群，一起探討技術、分享技術資料，旨在共同學習進步，如果感興趣就掃碼加入我們吧！ ![](https://imgkr.cn-bj.ufileos.com/3a60d1e8-2218-4b92-b310-7cf071ff2c