沒錯,用三方 Github 做授權登入就是這麼簡單!(OAuth2.0實戰)
阿新 • • 發佈:2020-07-14
>本文收錄在個人部落格:[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`授權 和 `人臉識別`等多種登入方式。
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20200712161915650.png)
而`GitHub`授權登入正好用到了`OAuth2.0`中最複雜的授權碼模式,正好拿我這個案例給大家分享一下`OAuth2.0`的授權過程,後續專案功能會持續更新。
## 一、授權流程
在具體做`GitHub`授權登入之前,咱們再簡單回顧一下`OAuth2.0`授權碼模式的授權流程,如果 `fire` 網站允許 用`GitHub` 賬號登入,流程大致如下圖。
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20200712170731461.png?#pic_center)
使用者想用`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` 回撥我們專案的地址,用來獲取授權碼和令牌。
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20200713100704326.png)
提交後會看到就可以看到客戶端`ClientID` 和客戶端密匙`ClientSecret`,到這我們的準備工作就完事了。
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/2020071310163434.png)
## 三、授權開發
### 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`;如果之前已經同意過,會跳過這一步直接回調。
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20200713142404893.png)
### 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`的訪問速度比較慢,偶爾會有請求超時的現象。
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20200713172813697.gif#pic_center)
線上預覽地址:`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