Vue項目怎麼接入OAuth2.0

Vue實現

1. 對接環境配置

項目的配置文件放置於路徑：src/config/config.js

具體配置：

 

var config={ //請求受權地址 userAuthorizationUri:"https://github.com/login/oauth/authorize", //accessToken請求地址 accessTokenUri : "https://github.com/login/oauth/access_token", //用戶信息請求地址 userInfoUri:"https://api.github.com/user", //登出請求地址 logoutUri:"https://github.com/logout", //項目地址 localuri :"http://localhost:9999", //回調地址 redirect_uri : "http://localhost:9999/login", //案例資源服務器地址 resUri:"http://localhost:8080", //客戶端相關標識，請從認證服務器申請 clientId: "", client_secret:"", //申請的權限範圍 scope:"user", //可選參數，客戶端的當前狀態，能夠指定任意值，用於校驗，這次案例不作相關認證 state:"", //一些固定的請求參數 response_type:"token", grant_type : "authorization_code", code:"", } export default config;

2. 用戶登陸並獲取Access_Token

1. 登陸，配置客戶端信息並重定向到認證地址，等待用戶受權。

文件地址：src/util/loginUtils.js  
login:function (vue) { vue.$config.code = RndNum(4); var authorUrl = vue.$config.userAuthorizationUri; authorUrl = authorUrl + ('?' + vue.$querystring.stringify({ client_id:vue.$config.clientId, response_type:vue.$config.response_type, scope:vue.$config.scope, state:vue.$config.state, redirect_uri:vue.$config.redirect_uri, })) window.location.href = authorUrl; } 其中幾個參數的含義： response_type：表示受權類型，必選項，此處的值固定爲"code" client_id：表示客戶端的ID，必選項 redirect_uri：表示重定向URI，可選項 scope：表示申請的權限範圍，可選項 state：表示客戶端的當前狀態，能夠指定任意值，認證服務器會原封不動地返回這個值。

這一步的目的是取得用戶的受權並獲得受權碼，受權碼將用於取得Access_Token。
若是配置了參數中的redirect_uri，取得受權碼以後認證服務器將會重定向到該地址。

2.用戶完成受權，取得受權碼，咱們將攜帶受權碼和配置相關信息向認證服務器申請Access_Token

文件地址：src/components/ssologin.vue  
mounted:function () { this.code = this.$route.query.code; this.state = this.$route.query.state; this.getToken(); } 回調取得兩個參數的做用： code：表示受權碼，必選項。該碼的有效期應該很短，一般設爲10分鐘，客戶端只能使用該碼一次，不然會被受權服務器拒絕。該碼與客戶端ID和重定向URI，是一一對應關係。 state：若是客戶端的請求中包含這個參數，認證服務器的迴應也必須如出一轍包含這個參數。 getToken:function(){ this.$token.getTokenFromService(this,this.code,(response)=>{ this.$token.savetoken(response.data); this.$router.push('/user'); },function (error) { alert(error); }); }

這裏獲取了Access_Token做爲身份憑證，須要咱們保存起來，能夠保存在cookie中，也能夠選擇其餘方式，在後續訪問資源服務器調用資源的時候須要攜帶Access_Token訪問。



文件地址：src/util/token.js

getTokenFromService:function (vue,code,callback,error) { vue.$ajax.post(vue.$config.accessTokenUri,{ client_id:vue.$config.clientId, client_secret:vue.$config.client_secret, code:code, redirect_uri:vue.$config.redirect_uri, grant_type:vue.$config.grant_type },{ headers:{"Accept":"application/json"} }) .then(callback) .catch(error); } 相關幾個參數的含義： grant_type：表示使用的受權模式，必選項，此處的值固定爲"authorization_code"。 code：表示上一步得到的受權碼，必選項。 redirect_uri：表示重定向URI，必選項，且必須與A步驟中的該參數值保持一致。 client_id：表示客戶端ID，必選項。

3. 獲取身份信息

獲取用戶的身份信息是將認證服務器做爲資源服務器看待，攜帶身份憑證Access_Token請求資源，資源服務器將經過認證服務器檢測身份憑證的有效性做出相應回覆。對於前段咱們的作法以下：

 

原文地址：https://www.jianshu.com/p/5cf2b7a45b75getUserInfo:function () { var tokenInfo = this.$token.loadToken(); this.$ajax({ url:this.$config.userInfoUri+"?"+"access_token="+tokenInfo.access_token, headers:{"Accept":"application/json"} }) .then((response) =>{ this.user = response.data; console.log(this.user); }) .catch((error) =>{ this.$root.push("/logout") }); }