1. 程式人生 > 實用技巧 >基於Identity Server4的OAuth 2.0授權總結(2)- Client

基於Identity Server4的OAuth 2.0授權總結(2)- Client

上一篇文章總結了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應用首選授權碼模式
scope:"openid api email profile", //請求授權的scope,包含需要獲取的使用者資訊以及想訪問的資源的許可權。

};
var mgr = new Oidc.UserManager(config);// UserManager類是oidc-client庫的主要介面,幾乎所有介面都通過該物件進行呼叫。(詳見api文件
//login函式,供外部呼叫 function login(){   mgr.signinRedirect();//觸發OAuth授權請求 }

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協議的整合進行了高度的封裝。很容易使用。