目錄
- 簡介
- OpenId Implicit Flow
- 建立onelogin的配置
- 頁面的運作和請求流程
- 關鍵代碼
- 總結
onelogin支援多種OpenId Connect的連接配接模式，上一篇文章我們講到了使用openId的Authentication Flow，今天我們将會講解一下如何使用Implicit Flow。
Implicit Flow也叫做隐式授權
上圖就是一個隐式授權的例子，和Authorization Code模式不同的是，認證伺服器傳回的是一個access token片段，隻有這個片段，我們是無法得到access token的。
這裡我們需要額外請求一次client resource伺服器，伺服器将會傳回一個script腳本，通過這個腳本，我們對access token片段進行解析，得到最終的access token。
在隐式授權模式，一般用在app或者websites沒有背景邏輯的情況。也就是說所有的授權都是在前端完成的。
尤其對于那種單頁面應用來說，隐式授權模式特别有用。
我們再看一下在onelogin中的隐式授權流程：
- 使用者嘗試建立和你的client app的連接配接，這個請求将會重定向到onelogin，并且帶上配置的唯一client_id。
- onelogin将會對使用者資訊進行認證和授權。
- 授權過後的使用者資訊将會以id_token (JWT)的形式，傳遞給onelogin中配置的回調位址。
- client app使用onelogin的public key對id_token進行校驗，如果一切ok，那麼将會建立好連接配接。
我們考慮下隐式授權模式的安全性。
在隐式授權模式下，client app需要從onelogin擷取到公鑰，然後使用這個公鑰去解析onelogin傳回的id_token。
雖然惡意使用者可能擷取到client_id和onelogin的公鑰，但是傳回的id_token隻會發給配置好的callback位址，是以仍然是安全的。
雖然我們在前面的文章中在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. Implicit Flow
在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的部落格
歡迎關注我的公衆号:「程式那些事」最通俗的解讀，最深刻的幹貨，最簡潔的教程，衆多你不知道的小技巧等你來發現！