這篇文章主要講解了“怎么用三方Github做授權(quán)登錄”,文中的講解內(nèi)容簡(jiǎn)單清晰,易于學(xué)習(xí)與理解,下面請(qǐng)大家跟著小編的思路慢慢深入,一起來(lái)研究和學(xué)習(xí)“怎么用三方Github做授權(quán)登錄”吧!
創(chuàng)新互聯(lián)建站是專業(yè)的烏蘭網(wǎng)站建設(shè)公司,烏蘭接單;提供成都網(wǎng)站制作、成都網(wǎng)站建設(shè),網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行烏蘭網(wǎng)站開(kāi)發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛(ài)的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!
為了更好的看效果,獲取授權(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
重定向一下。
請(qǐng)求后會(huì)提示讓我們授權(quán),同意授權(quán)后會(huì)重定向到authorize/redirect
,并攜帶授權(quán)碼code
;如果之前已經(jīng)同意過(guò),會(huì)跳過(guò)這一步直接回調(diào)。
授權(quán)后緊接著就要回調(diào)
fire
網(wǎng)站接口,拿到授權(quán)碼以后拼裝獲取令牌
access_token
的請(qǐng)求鏈接,這時(shí)會(huì)用到客戶端密匙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)始獲取用戶信息,在
API
中要帶上access_token
。
https://api.github.com/user?access_token=4dc43c2f43b773c327f97acf5dd66b147db9259c
返回的用戶信息是
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)求用戶信息
*/
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("授權(quán)回調(diào)異常={}", e);
}
return new ModelAndView(new RedirectView(redirectHome));
}
最后我們動(dòng)圖看一下整體的授權(quán)流程,由于GitHub
的訪問(wèn)速度比較慢,偶爾會(huì)有請(qǐng)求超時(shí)的現(xiàn)象。
感謝各位的閱讀,以上就是“怎么用三方Github做授權(quán)登錄”的內(nèi)容了,經(jīng)過(guò)本文的學(xué)習(xí)后,相信大家對(duì)怎么用三方Github做授權(quán)登錄這一問(wèn)題有了更深刻的體會(huì),具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián),小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章,歡迎關(guān)注!