在onelogin中使用OpenId Connect Implicit Flow 簡介 OpenId Implicit Flow 創建onelogin的配置 頁面的運行和請求流程 關鍵代碼 總結

簡介

onelogin支持多種OpenId Connect的連接模式,上一篇文章我們講到了使用openId的Authentication Flow,今天我們將會講解一下如何使用Implicit Flow。

OpenId Implicit Flow

Implicit Flow也叫做隱式授權

上圖就是一個隱式授權的例子,和Authorization Code模式不同的是,認證服務器返回的是一個access token片段,只有這個片段,我們是無法得到access token的。

這裏我們需要額外請求一次client resource服務器,服務器將會返回一個script腳本,通過這個腳本,我們對access token片段進行解析,得到最終的access token。

在隱式授權模式,一般用在app或者websites沒有後臺邏輯的情況。也就是說所有的授權都是在前端完成的。

尤其對於那種單頁面應用來說,隱式授權模式特別有用。

我們再看一下在onelogin中的隱式授權流程:

  1. 用戶嘗試建立和你的client app的連接,這個請求將會重定向到onelogin,並且帶上配置的唯一client_id。

  2. onelogin將會對用戶信息進行認證和授權。

  3. 授權過後的用戶信息將會以id_token (JWT)的形式,傳遞給onelogin中配置的回調地址。

  4. client app使用onelogin的public key對id_token進行校驗,如果一切ok,那麼將會建立好連接。

我們考慮下隱式授權模式的安全性。

在隱式授權模式下,client app需要從onelogin獲取到公鑰,然後使用這個公鑰去解析onelogin返回的id_token。

雖然惡意用戶可能獲取到client_id和onelogin的公鑰,但是返回的id_token只會發給配置好的callback地址,所以仍然是安全的。

創建onelogin的配置

雖然我們在前面的文章中在onelogin中創建了一個app,因爲callback的不同,我們這裏新創建一個app。

填上我們的callback地址: http://localhost:3000

其他的和之前的配置保持一致。

我們看下最新的SSO配置:

這裏我們需要保存最新的client_ID,因爲不是Authentication Flow模式,我們不需要用到client_secret。

注意這裏的兩個Issuer URLs,這裏存儲的是onelogin的配置信息。

頁面的運行和請求流程

我們從onelogin的官網例子中下載隱式授權的單頁面應用。

https://github.com/onelogin/onelogin-oidc-node/tree/master/2.%20Implicit%20Flow

在javascript/main.js中修改OIDC的配置:

const ONELOGIN_CLIENT_ID = '90a0e970-f2b6-0138-6171-0a5535c40b31178911';
const ONELOGIN_SUBDOMAIN = 'flydean-dev';

然後運行npm install;npm start來啓動這個單頁面的應用程序。

點擊login按鈕,將會跳轉到onelogin的登錄界面:

輸入用戶名密碼,我們會跳回localhost頁面。

這裏我們會調用 https://flydean-dev.onelogin.com/oidc/2/certs 去拿到onelogin的公鑰。

通過個這個公鑰和返回的id_token,就可以拿到用戶的信息。

關鍵代碼

因爲是單頁面應用,所有的請求其實都是通過JS來執行的。我們看下系統的關鍵代碼。

爲了使用openid協議,這裏的例子使用了oidc-client.min.js,通過這個客戶端來進行openid協議的連接工作。

下面是頁面的openid connect配置信息:

var settings = {    
    authority: 'https://' + ONELOGIN_SUBDOMAIN + '.onelogin.com/oidc/2',
    client_id: ONELOGIN_CLIENT_ID,
    redirect_uri: window.location.origin,
    response_type: 'id_token token',
    scope: 'openid profile',

    filterProtocolClaims: true,
    loadUserInfo: true
};

有了這些配置信息,我們就可以創建oidc的manager:

var mgr = new Oidc.UserManager(settings);

關鍵代碼很簡單,點擊login的時候,需要進行頁面跳轉到onelogin進行授權登錄:

function redirectToLogin(e) {
  e.preventDefault();

  mgr.signinRedirect({state:'some data'}).then(function() {
      console.log("signinRedirect done");
  }).catch(function(err) {
      console.log(err);
  });
}

授權完成之後,跳轉回本機頁面之後,需要校驗回調信息,並從該信息中解析出用戶的信息,並展示在頁面上:

function processLoginResponse() {
  mgr.signinRedirectCallback().then(function(user) {
      console.log("signed in", user);

      document.getElementById("loginResult").innerHTML = '<h3>Success</h3><pre><code>' + JSON.stringify(user, null, 2) + '</code></pre>'

  }).catch(function(err) {
      console.log(err);
  });
}

所有的邏輯都封裝在oidc-client.min.js,對程序員非常友好。

總結

以上就是在onelogin中使用OpenId Connect Implicit Flow的基本思路和流程。希望大家能夠喜歡。

本文作者:flydean程序那些事

本文鏈接:http://www.flydean.com/openid-implicit-onelogin/

本文來源:flydean的博客

歡迎關注我的公衆號:「程序那些事」最通俗的解讀,最深刻的乾貨,最簡潔的教程,衆多你不知道的小技巧等你來發現!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章