如何在onelogin中使用OpenId Connect Implicit Flow

本篇內(nèi)容介紹了“如何在onelogin中使用OpenId Connect Implicit Flow”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

OpenId Implicit Flow

Implicit Flow也叫做隱式授權(quán)

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

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

在隱式授權(quán)模式，一般用在app或者websites沒有后臺邏輯的情況。也就是說所有的授權(quán)都是在前端完成的。

尤其對于那種單頁面應(yīng)用來說，隱式授權(quán)模式特別有用。

我們再看一下在onelogin中的隱式授權(quán)流程：

1. 用戶嘗試建立和你的client app的連接，這個請求將會重定向到onelogin，并且?guī)吓渲玫奈ㄒ籧lient_id。

2. onelogin將會對用戶信息進行認證和授權(quán)。

3. 授權(quán)過后的用戶信息將會以id_token (JWT)的形式，傳遞給onelogin中配置的回調(diào)地址。

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

我們考慮下隱式授權(quán)模式的安全性。

在隱式授權(quán)模式下，client app需要從onelogin獲取到公鑰，然后使用這個公鑰去解析onelogin返回的id_token。

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

創(chuàng)建onelogin的配置

雖然我們在前面的文章中在onelogin中創(chuàng)建了一個app，因為callback的不同，我們這里新創(chuàng)建一個app。

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

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

我們看下最新的SSO配置：

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

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

頁面的運行和請求流程

我們從onelogin的官網(wǎng)例子中下載隱式授權(quán)的單頁面應(yīng)用。

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來啟動這個單頁面的應(yīng)用程序。

點擊login按鈕,將會跳轉(zhuǎn)到onelogin的登錄界面：

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

這里我們會調(diào)用 https://flydean-dev.onelogin.com/oidc/2/certs 去拿到onelogin的公鑰。

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

關(guān)鍵代碼

因為是單頁面應(yīng)用，所有的請求其實都是通過JS來執(zhí)行的。我們看下系統(tǒng)的關(guān)鍵代碼。

為了使用openid協(xié)議，這里的例子使用了oidc-client.min.js，通過這個客戶端來進行openid協(xié)議的連接工作。

下面是頁面的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
};

有了這些配置信息，我們就可以創(chuàng)建oidc的manager：

var mgr = new Oidc.UserManager(settings);

關(guān)鍵代碼很簡單，點擊login的時候，需要進行頁面跳轉(zhuǎn)到onelogin進行授權(quán)登錄：

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

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

授權(quán)完成之后，跳轉(zhuǎn)回本機頁面之后，需要校驗回調(diào)信息，并從該信息中解析出用戶的信息，并展示在頁面上：

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

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

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

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

“如何在onelogin中使用OpenId Connect Implicit Flow”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！