基於Identity Server4的OAuth 2.0授權總結(2)- Client
阿新 • • 發佈:2020-07-28
上一篇文章總結了Authorization Server, 這一篇總結一下Client端的實現。先看一下之前那幅圖。
授權請求是由客戶端觸發的,客戶端可以有很多種形式:MVC後端系統,前後端分離的SPA,移動端的Native App。這裡以SPA和授權碼模式作為例子。主要使用oidc-client庫來實現與Authorization Server的對接。在SPA中新增依賴後,我們就可以來編寫認證模組了。主要是兩個過程:發起OAuth授權和token交換(根據code獲取id_token,access_token)。
發起OAuth授權
import Oidc from 'oidc-client';var config = { authority: "https://localhost:5001/",//Authorization server地址 client_id: "js", //Client Id,需要在Authorization Server配置好
redirect_uri: "http://localhost:3000/callback.html", //redirect url, 用於接受授權碼,然後通過token交換獲取id_token和access_token
response_type: "code", //授權方式,一般SPA應用首選授權碼模式//login函式,供外部呼叫 function login(){ mgr.signinRedirect();//觸發OAuth授權請求 }
scope:"openid api email profile", //請求授權的scope,包含需要獲取的使用者資訊以及想訪問的資源的許可權。
};
var mgr = new Oidc.UserManager(config);// UserManager類是oidc-client庫的主要介面,幾乎所有介面都通過該物件進行呼叫。(詳見api文件)
token交換
token交換的過程主要是實現一個callback的頁面,Authorization Server通過該頁面以Query string的形式傳遞授權碼到客戶端。在該頁面中通過呼叫oidc-client的signinRedirectCallback函式進行token交換。
<script src="oidc-client.js"></script> <script> new Oidc.UserManager({response_mode:"query"}).signinRedirectCallback().then(function() { window.location = "index.html"; }).catch(function(e) { console.error(e); });
</script>
這兩個Api呼叫的背後是OpenID協議的實現,具體流程如下:
這兩個過程結束之後,access_token和id_token會被儲存在瀏覽器的session storage中。
到這裡,OAuth授權的token獲取就成功了。接下來我麼可以通過apigetUser()來獲取儲存在session storage中的token資訊來呼叫後臺rest api了。
function getUser(){ new UserManager().getUser() .then(function (user) { if (user) { var url = `https://localhost:44342/api/user; let options = { headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${user.access_token}`,//設定Athorization頭供rest api認證。 }, }; return fetch(url, options); }).then(resp=>{ if(resp.ok){ return resp.json(); } }.then(user=>{
console.log(user);
})
.catch(error=>{
console.log(error);
}); }
總結:
對於SPA應用,整合OAuth協議主要是對oidc-client庫的使用。該庫對OAuth,OpenID協議的整合進行了高度的封裝。很容易使用。