簡介
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中的隱式授權流程：
-
用戶嘗試建立和你的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的配置
雖然我們在前面的文章中在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的博客
歡迎關注我的公眾號:「程序那些事」最通俗的解讀，最深刻的乾貨，最簡潔的教程，眾多你不知道的小技巧等你來發現！