簡介
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的博客
歡迎關注我的公衆號:「程序那些事」最通俗的解讀,最深刻的乾貨,最簡潔的教程,衆多你不知道的小技巧等你來發現!