教你使用gitee做第三方登錄
教你使用gitee做第三方登錄(qq登錄微信登錄同樣適用)
當(dāng)你登錄微博時看到這樣的
又或者是當(dāng)你登錄碼云時看到的是
那么,這樣的第三方登錄到底如何做的呢?下面就來探討一下
目前主流的認(rèn)證系統(tǒng)比如:微博,qq,微信,碼云,github都是遵循Oauth2協(xié)議的!
因此我們先來介紹下Oauth2.0:
OAuth 2.0是用于授權(quán)的行業(yè)標(biāo)準(zhǔn)協(xié)議。OAuth 2.0為簡化客戶端開發(fā)提供了特定的授權(quán)流，包括Web應(yīng)用、桌面應(yīng)用、移動端應(yīng)用等。
OAuth2 相關(guān)名詞解釋
Resource owner（資源擁有者）：擁有該資源的最終用戶，他有訪問資源的賬號密碼；
Resource server（資源服務(wù)器）：擁有受保護(hù)資源的服務(wù)器，如果請求包含正確的訪問令牌，可以訪問資源；
Client（客戶端）：訪問資源的客戶端，會使用訪問令牌去獲取資源服務(wù)器的資源，可以是瀏覽器、移動設(shè)備或者服務(wù)器；
Authorization server（認(rèn)證服務(wù)器）：用于認(rèn)證用戶的服務(wù)器，如果客戶端認(rèn)證通過，發(fā)放訪問資源服務(wù)器的令牌。
四種授權(quán)模式
Authorization Code（授權(quán)碼模式）：正宗的OAuth2的授權(quán)模式，客戶端先將用戶導(dǎo)向認(rèn)證服務(wù)器，登錄后獲取授權(quán)碼，然后進(jìn)行授權(quán)，最后根據(jù)授權(quán)碼獲取訪問令牌；
Implicit（簡化模式）：和授權(quán)碼模式相比，取消了獲取授權(quán)碼的過程，直接獲取訪問令牌；
Resource Owner Password Credentials（密碼模式）：客戶端直接向用戶獲取用戶名和密碼，之后向認(rèn)證服務(wù)器獲取訪問令牌；
Client Credentials（客戶端模式）：客戶端直接通過客戶端認(rèn)證（比如client_id和client_secret）從認(rèn)證服務(wù)器獲取訪問令牌。
兩種常用的授權(quán)模式
其他的兩種模式本文不做贅述!詳情自行度娘
了解了Oauth2.0的認(rèn)證相關(guān)流程后,下面就是介紹如何使用碼云作為第三方認(rèn)證中心實現(xiàn)認(rèn)證(授權(quán)碼模式)!1.?打開碼云官方文檔
https://gitee.com/api/v5/oauth_doc#/
OAuth2 獲取 AccessToken 認(rèn)證步驟
1. 授權(quán)碼模式
應(yīng)用通過 瀏覽器 或 Webview 將用戶引導(dǎo)到碼云三方認(rèn)證頁面上（?GET請求?）
https://gitee.com/oauth/authorize?client_id={client_id}&redirect_uri={redirect_uri}&response_type=code用戶對應(yīng)用進(jìn)行授權(quán)
注意: 如果之前已經(jīng)授權(quán)過的需要跳過授權(quán)頁面，需要在上面第一步的 URL 加上 scope 參數(shù)，且 scope 的值需要和用戶上次授權(quán)的勾選的一致。如用戶在上次授權(quán)了user_info、projects以及pull_requests。則步驟A 中 GET 請求應(yīng)為：https://gitee.com/oauth/authorize?client_id={client_id}&redirect_uri={redirect_uri}&response_type=code&scope=user_info%20projects%20pull_requests碼云認(rèn)證服務(wù)器通過回調(diào)地址{redirect_uri}將 用戶授權(quán)碼 傳遞給 應(yīng)用服務(wù)器 或者直接在 Webview 中跳轉(zhuǎn)到攜帶 用戶授權(quán)碼的回調(diào)地址上，Webview 直接獲取code即可（{redirect_uri}?code=abc&state=xyz)
應(yīng)用服務(wù)器 或 Webview 使用 access_token API 向 碼云認(rèn)證服務(wù)器發(fā)送post請求傳入 用戶授權(quán)碼 以及 回調(diào)地址（?POST請求?）注：請求過程建議將 client_secret 放在 Body 中傳值，以保證數(shù)據(jù)安全。
https://gitee.com/oauth/token?grant_type=authorization_code&code={code}&client_id={client_id}&redirect_uri={redirect_uri}&client_secret={client_secret}碼云認(rèn)證服務(wù)器返回 access_token
應(yīng)用通過 access_token 訪問 Open API 使用用戶數(shù)據(jù)。當(dāng) access_token 過期后（有效期為一天），你可以通過以下 refresh_token 方式重新獲取 access_token（?POST請求?）
https://gitee.com/oauth/token?grant_type=refresh_token&refresh_token={refresh_token}注意：如果獲取 access_token 返回 403，可能是沒有設(shè)置User-Agent的原因。
詳見：獲取Token時服務(wù)端響應(yīng)狀態(tài)403是什么情況
2. 密碼模式
用戶向客戶端提供郵箱地址和密碼?？蛻舳藢⑧]箱地址和密碼發(fā)給碼云認(rèn)證服務(wù)器，并向碼云認(rèn)證服務(wù)器請求令牌。（?POST請求。Content-Type: application/x-www-form-urlencoded?）
curl -X POST --data-urlencode "grant_type=password" --data-urlencode "username={email}" --data-urlencode "password={password}" --data-urlencode "client_id={client_id}" --data-urlencode "client_secret={client_secret}" --data-urlencode "scope=projects user_info issues notes" https://gitee.com/oauth/token
scope表示權(quán)限范圍，有以下選項，請求時使用空格隔開user_info projects pull_requests issues notes keys hook groups gists enterprises碼云認(rèn)證服務(wù)器返回 access_token
應(yīng)用通過 access_token 訪問 Open API 使用用戶數(shù)據(jù)。
創(chuàng)建應(yīng)用流程
在?修改資料?->?第三方應(yīng)用，創(chuàng)建要接入碼云的應(yīng)用。
點擊創(chuàng)建應(yīng)用
創(chuàng)建應(yīng)用后,系統(tǒng)會給你生產(chǎn)密鑰,好了,準(zhǔn)備工作做完后,下面開始上代碼了!
?首先在你應(yīng)用的登錄頁植入碼云的登錄連接:
注意此登錄鏈接是碼云為我們提供的授權(quán)地址
2.?當(dāng)我們點擊碼云登錄圖片鏈接時,會進(jìn)入碼云的授權(quán)頁
3.在碼云授權(quán)頁點擊登錄時,如果賬號密碼正確,則碼云對攜帶著授權(quán)碼請求回調(diào)地址:
4.編寫回調(diào)接口用來接收授權(quán)碼
@Controller
@CrossOrigin
@Slf4j
public class MayunLoginController {
@Autowired
IUserService userService;
@RequestMapping("callback")
public void callback(String code, HttpServletResponse resp) throws IOException {
//1.拿著授權(quán)碼請求token
Map<String, Object> map = new HashMap<>();
map.put("client_id","1b9ec117aae");
map.put("client_secret","8fdae53cbc560f9966ec");
map.put("grant_type","authorization_code");
map.put("code",code);
map.put("redirect_uri","http://127.0.0.1:9001/callback");
//HttpUtil.buildBasicAuth("503244e5c6cb286fe8f48d822bcb306404d22208380b1775121c71b9ec117aae","9bd329f1b51bbc70b2fac74c77f65db08bb3defb88588fdae53cbc560f9966ec", Charset.forName("UTF-8"));
//2.如果token過期,使用refesh_token 重新獲取一個access_token 這步省略
//當(dāng) access_token 過期后（有效期為一天），你可以通過以下 refresh_token 方式重新獲取 access_token（ POST請求 ）
//https://gitee.com/oauth/token?grant_type=refresh_token&refresh_token={refresh_token}
//3.獲取token,失效時間,刷新token等
String tokenResult = HttpUtil.post("https://gitee.com/oauth/token", map);
Map parse = (Map) JSON.parse(tokenResult);
String access_token = (String) parse.get("access_token");
log.info("請求的token是:{}",tokenResult);
//4.根據(jù)token獲取用戶的信息
Map<String, Object> map1 = new HashMap<>();
map1.put("access_token",access_token);
String userInfo = HttpUtil.get("https://gitee.com/api/v5/user", map1);
Map<String,Object> user = (Map<String, Object>) JSON.parse(userInfo);
//獲取碼云上的giteeId
String giteeId = user.get("id")+"";
QueryWrapper<User> wrapper = new QueryWrapper<>();
wrapper.eq("giteeid",giteeId);
//根據(jù)giteeId查詢本地用戶id和姓名
User one = userService.getOne(wrapper);
//4.登錄成功
resp.sendRedirect("http://localhost:8080/toLogin?uid="+one.getId()+"&name="+one.getName());
登錄成功,重定向到前端工程(此處是前后端分離).
前端工程獲取url中的用戶參數(shù)即可實現(xiàn)用戶登錄
methods: {
//解析url中的token參數(shù)
getToken(){
debugger
var url = window.document.location.href.toString();//獲得當(dāng)前url地址并轉(zhuǎn)換成字符串
console.log(url)
var u = url.split("?");
//以？來分割字符串，將？前后的值存到一個數(shù)組中
if(typeof(u[1]) == "string"){//獲得？后面具體的請求參數(shù)值
u = u[1].split("&");
var get = {};
for(var i in u){
var j = u[i].split("=");
get[j[0]] = j[1];
}
return get;
}
}
},
created() {
//獲取到token 并封裝到store中用于全程攜帶
let token11=this.getToken();
console.log(token11.uid+"===============")
let uid = token11.uid
let name = token11.name
if (uid != undefined && uid != {}){
localStorage.setItem('uid',uid)
localStorage.setItem('name',name)
// var aaa = localStorage.getItem('token');
//vuex
this.$store.state.user.id=uid
this.$store.state.user.name=name
//跳轉(zhuǎn)到首頁
this.$router.push('/home')
}
}
}
具體效果:
