摘要：?jiǎn)吸c(diǎn)登錄，簡(jiǎn)稱為，是目前比較流行的企業(yè)業(yè)務(wù)整合的解決方案之一。添加三個(gè)按鈕增加三個(gè)按鈕控件到中，目的是為了演示如何使用管理單點(diǎn)登錄狀態(tài)。運(yùn)行方法在終端中運(yùn)行以下命令之后在瀏覽器訪問(wèn)。在應(yīng)用交互中的位置官網(wǎng)小登錄倉(cāng)庫(kù)歡迎，歡迎文檔

單點(diǎn)登錄（Single Sign On），簡(jiǎn)稱為SSO，是目前比較流行的企業(yè)業(yè)務(wù)整合的解決方案之一。
SSO的定義是在多個(gè)應(yīng)用系統(tǒng)中，用戶只需要登錄一次就可以訪問(wèn)所有相互信任的應(yīng)用系統(tǒng)。

如果你不了解用戶池、單點(diǎn)登錄和認(rèn)證授權(quán)，建議先閱讀基礎(chǔ)概念。

基本的 HTML 和 CSS 知識(shí)

中級(jí) JavaScript 技能

你喜歡的文本編輯器

可以在本地運(yùn)行的 Web 服務(wù)器（比如：npm install http-server -g）

如果你還沒(méi)有賬號(hào)，請(qǐng)點(diǎn)擊這里注冊(cè) Authing 賬號(hào)，注冊(cè)完成后請(qǐng)進(jìn)入控制臺(tái)并創(chuàng)建一個(gè)用戶池。

第三方登錄 -> OIDC 應(yīng)用選項(xiàng)卡，點(diǎn)擊藍(lán)色的「創(chuàng)建 OIDC 應(yīng)用」按鈕。

填上你的應(yīng)用名，指定此 OIDC 應(yīng)用的二級(jí)域名（認(rèn)證地址），回調(diào)地址，其他參數(shù)保留默認(rèn)即可。點(diǎn)擊「確定」。

參數(shù)解釋

認(rèn)證地址，一個(gè) authing.cn 的二級(jí)域名，用戶將在此網(wǎng)址進(jìn)行登錄。

回調(diào) URL，OIDC 登錄成功后，回調(diào)到開(kāi)發(fā)者自己業(yè)務(wù)的地址。本教程為演示，填寫(xiě)的地址是 http://localhost:8080，實(shí)際場(chǎng)景下要填寫(xiě)自己的業(yè)務(wù)地址。

在應(yīng)用列表中點(diǎn)擊剛創(chuàng)建好的應(yīng)用，記錄下 AppID，二級(jí)域名，供以后使用。

本教程只是為了演示，因此我們沒(méi)選擇高級(jí)框架，這可以讓我們專注于 Authing 本身。

增加三個(gè)按鈕控件到 body 中，目的是為了演示如何使用 SDK 管理單點(diǎn)登錄狀態(tài)。

login
trackSession
logout

從 CDN 加載 AuthingSSO 的 SDK。填入你的 OIDC 應(yīng)用 ID 和 域名，進(jìn)行初始化。

達(dá)到的效果是：

點(diǎn)擊 login 按鈕，瀏覽器會(huì)跳轉(zhuǎn)到 OIDC 登錄頁(yè)面，與用戶完成身份確認(rèn)。

點(diǎn)擊 trackSession 按鈕，會(huì)顯示當(dāng)前登錄狀態(tài)。

點(diǎn)擊 logout 按鈕，進(jìn)行單點(diǎn)登出。

let login = document.getElementById("btn-login");
let trackSession = document.getElementById("btn-track-session");
let logout = document.getElementById("btn-logout");
login.onclick = function() {
  auth.login();
};
trackSession.onclick = async function() {
  let res = await auth.trackSession();
  alert(JSON.stringify(res));
};
logout.onclick = async function() {
  let res = await auth.logout();
  alert(JSON.stringify(res));
};

  
    
    
    
    
  
  
    login
    trackSession
    logout
    
    
  

示例代碼可從 Github 上找到，建議將 Github 上的代碼下載運(yùn)行。

在終端中運(yùn)行以下命令

$ git clone https://github.com/Authing/authing-sso-demo
$ cd authing-sso-demo
$ npm install -g http-server
$ http-server

之后在瀏覽器訪問(wèn) http://localhost:8080。

{% hint style="warning" %}
如果本地 8080 端口已被占用，應(yīng)用可能會(huì)運(yùn)行在 8081、8082 等后續(xù)端口。
{% endhint %}

最初，我們沒(méi)有登錄，因此，點(diǎn)擊 trackSession 按鈕獲取到的登錄狀態(tài)為空。

現(xiàn)在我們點(diǎn)擊 login 按鈕，會(huì)跳轉(zhuǎn)到 OIDC 應(yīng)用的用戶認(rèn)證頁(yè)面，輸入用戶名密碼進(jìn)行登錄。

瀏覽器被重定向到我們之前設(shè)置的回調(diào)鏈接，記下 code 參數(shù)，用于后面換取用戶信息。

點(diǎn)擊 trackSession 按鈕，此時(shí)能夠獲取到該用戶的登錄狀態(tài)，包括用戶 ID，應(yīng)用 ID，應(yīng)用類型。

點(diǎn)擊 logout 按鈕，輸出單點(diǎn)登出成功。

此時(shí)我們?cè)冱c(diǎn)擊 trackSession 按鈕，可見(jiàn)登錄狀態(tài)為空，說(shuō)明用戶已經(jīng)單點(diǎn)登出了。

向以下地址發(fā)送 POST 請(qǐng)求：

POST https://OIDC_APP_DOMAIN.authing.cn/oauth/oidc/token

body 參數(shù)

返回示例

{
  "access_token": "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6InIxTGtiQm8zOTI1UmIyWkZGckt5VTNNVmV4OVQyODE3S3gwdmJpNmlfS2MifQ.eyJqdGkiOiJ4R01uczd5cmNFckxiakNRVW9US1MiLCJzdWIiOiI1YzlmNzVjN2NjZjg3YjA1YTkyMWU5YjAiLCJpc3MiOiJodHRwczovL2F1dGhpbmcuY24iLCJpYXQiOjE1NTQ1Mzc4NjksImV4cCI6MTU1NDU0MTQ2OSwic2NvcGUiOiJvcGVuaWQgcHJvZmlsZSBvZmZsaW5lX2FjY2VzcyBwaG9uZSBlbWFpbCIsImF1ZCI6IjVjYTc2NWUzOTMxOTRkNTg5MWRiMTkyNyJ9.wX05OAgYuXeYM7zCxhrkvTO_taqxrCTG_L2ImDmQjMml6E3GXjYA9EFK0NfWquUI2mdSMAqohX-ndffN0fa5cChdcMJEm3XS9tt6-_zzhoOojK-q9MHF7huZg4O1587xhSofxs-KS7BeYxEHKn_10tAkjEIo9QtYUE7zD7JXwGUsvfMMjOqEVW6KuY3ZOmIq_ncKlB4jvbdrduxy1pbky_kvzHWlE9El_N5qveQXyuvNZVMSIEpw8_y5iSxPxKfrVwGY7hBaF40Oph-d2PO7AzKvxEVMamzLvMGBMaRAP_WttBPAUSqTU5uMXwMafryhGdIcQVsDPcGNgMX6E1jzLA",
  "expires_in": 3600,
  "id_token": "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6InIxTGtiQm8zOTI1UmIyWkZGckt5VTNNVmV4OVQyODE3S3gwdmJpNmlfS2MifQ.eyJzdWIiOiI1YzlmNzVjN2NjZjg3YjA1YTkyMWU5YjAiLCJub25jZSI6IjIyMTIxIiwiYXRfaGFzaCI6Ik5kbW9iZVBZOEFFaWQ2T216MzIyOXciLCJzaWQiOiI1ODM2NzllNC1lYWM5LTRjNDEtOGQxMS1jZWFkMmE5OWQzZWIiLCJhdWQiOiI1Y2E3NjVlMzkzMTk0ZDU4OTFkYjE5MjciLCJleHAiOjE1NTQ1NDE0NjksImlhdCI6MTU1NDUzNzg2OSwiaXNzIjoiaHR0cHM6Ly9hdXRoaW5nLmNuIn0.IQi5FRHO756e_eAmdAs3OnFMU7QuP-XtrbwCZC1gJntevYJTltEg1CLkG7eVhdi_g5MJV1c0pNZ_xHmwS0R-E4lAXcc1QveYKptnMroKpBWs5mXwoOiqbrjKEmLMaPgRzCOdLiSdoZuQNw_z-gVhFiMNxI055TyFJdXTNtExt1O3KmwqanPNUi6XyW43bUl29v_kAvKgiOB28f3I0fB4EsiZjxp1uxHQBaDeBMSPaRVWQJcIjAJ9JLgkaDt1j7HZ2a1daWZ4HPzifDuDfi6_Ob1ZL40tWEC7xdxHlCEWJ4pUIsDjvScdQsez9aV_xMwumw3X4tgUIxFOCNVEvr73Fg",
  "refresh_token": "WPsGJbvpBjqXz6IJIr1UHKyrdVF",
  "scope": "openid profile offline_access phone email",
  "token_type": "Bearer"
}

OIDC 默認(rèn)使用 OIDC 應(yīng)用的 secret 對(duì) token 進(jìn)行驗(yàn)證（也就是在創(chuàng)建應(yīng)用時(shí)默認(rèn)選擇 HS256 算法）。 如果你使用 javascript 那么可以使用 jsonwebtoken 進(jìn)行驗(yàn)證：

const jwt = require("jsonwebtoken");
let decoded = jwt.verify(token, );

如果是其他語(yǔ)言，那么你在服務(wù)端需要用 app_secret 作為 HS256 簽名參數(shù)來(lái)計(jì)算簽名和 JWT 中的簽名進(jìn)行對(duì)比，偽代碼如下：

HMACSHA256(
  base64UrlEncode(header) + "." +
  base64UrlEncode(payload),
  "1133fd20c14e4cc29b6ecb71fb8eb952"http:// app_secret
)

如果是 RS256 等非對(duì)稱加密算法，需要使用公鑰驗(yàn)證簽名。Authing 將使用私鑰進(jìn)行簽名，請(qǐng)使用 Authing 的公鑰來(lái)驗(yàn)證簽名：

-----BEGIN PUBLIC KEY-----
MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAxRijj2seoesv5K0Z+ymR
K7DSDPxdsM2sGQD2ZVhLjLsxZWJtXUXh7ERdUU6OT3BqYZZf7CLIhN6yyNtTOgfg
pLG9HVJd7ZSKzuy2dS7mo8jD8YRtptAJmNFqw6z8tQp5MNG1ZHqp9isKqJmx/CFY
kRdXBmjjj8PMVSP757pkC3jCq7fsi0drSSg4lIxrSsGzL0++Ra9Du71Qe/ODQKU0
brxaI1OKILtfcVPTHTaheV+0dw4eYkSDtyaLBG3jqsQbdncNg8PCEWchNzdO6aaj
Uq4wbOzy/Ctp399mz0SGKfuC5S8gqAFABFT3DH3UD21ZztQZwFEV2AlvF+bcGEst
cwIDAQAB
-----END PUBLIC KEY-----

開(kāi)發(fā)者在自己的服務(wù)中可以使用 access_token 換取用戶信息。根據(jù) scope 的不同，這里的返回信息也會(huì)有所不同，字段符合 OIDC 規(guī)范，字段解釋請(qǐng)參考用戶信息字段含義。 請(qǐng)求鏈接：

GET https://users.authing.cn/oauth/oidc/user/userinfo?access_token=

返回示例：

{
  "sub": "<用戶在 Authing 的唯一標(biāo)識(shí)>",
  "nickname": "Authing",
  "name": "張三",
  "locale": "en-US"
}

更多字段解釋請(qǐng)參考用戶信息字段含義。

了解 OIDC 協(xié)議：

理解OIDC流程

控制臺(tái)是你管理所有 Authing 資源的地方，了解 Authing 控制臺(tái)各模塊包含的內(nèi)容和你可以在控制臺(tái)中做的事情：

控制臺(tái)概覽

了解 Authing 提供的多種部署模型，以幫助你選擇該以怎樣的形式部署 Authing：

部署模型

Authing 提供專業(yè)的身份認(rèn)證和授權(quán)服務(wù)。
我們?yōu)殚_(kāi)發(fā)者和企業(yè)提供用以保證應(yīng)用程序安全所需的認(rèn)證模塊，這讓開(kāi)發(fā)人員無(wú)需成為安全專家。
你可以將任意平臺(tái)的應(yīng)用接入到 Authing（無(wú)論是新開(kāi)發(fā)的應(yīng)用還是老應(yīng)用都可以），同時(shí)你還可以自定義應(yīng)用程序的登錄方式（如：郵箱/密碼、短信/驗(yàn)證碼、掃碼登錄等）。
你可以根據(jù)你使用的技術(shù)，來(lái)選擇我們的 SDK 或調(diào)用相關(guān) API 來(lái)接入你的應(yīng)用。當(dāng)用戶發(fā)起授權(quán)請(qǐng)求時(shí)，Authing 會(huì)幫助你認(rèn)證他們的身份和返回必要的用戶信息到你的應(yīng)用中。

官網(wǎng)：http://authing.cn

小登錄：https://wxapp.authing.cn/#/

倉(cāng)庫(kù)：歡迎star，歡迎pr

https://gitee.com/Authi_ng

https://github.com/authing

Demo：

https://sample.authing.cn

https://github.com/Authing/qr...

文檔：https://docs.authing.cn/authing/