用 Authing 10分钟实现单点登陆（SSO）
单点登陆（Single Sign On），简称为SSO，是目前比较流行的企业业务整合的解决方案之一。
SSO的定义是在多个应用系统中，用户只须要登陆一次就能够访问全部相互信任的应用系统。javascript
实现单点登陆
开始以前
若是你不了解用户池、单点登陆和认证受权，建议先阅读基础概念。html
预备知识
- 基本的 HTML 和 CSS 知识
- 中级 JavaScript 技能
所需工具
- 你喜欢的文本编辑器
- 能够在本地运行的 Web 服务器（好比：
npm install http-server -g）
注册一个 Authing 帐号
若是你尚未帐号，请点击这里注册 Authing 帐号，注册完成后请进入控制台并建立一个用户池。java
建立一个 OIDC 应用
第三方登陆 -> OIDC 应用选项卡，点击蓝色的「建立 OIDC 应用」按钮。git
填上你的应用名，指定此 OIDC 应用的二级域名（认证地址），回调地址，其余参数保留默认便可。点击「肯定」。 github
参数解释web
认证地址，一个 authing.cn 的二级域名，用户将在此网址进行登陆。算法
回调 URL，OIDC 登陆成功后，回调到开发者本身业务的地址。本教程为演示，填写的地址是 http://localhost:8080，实际场景下要填写本身的业务地址。npm
在应用列表中点击刚建立好的应用，记录下 AppID，二级域名，供之后使用。json
使用 AuthingSSO SDK 集成单点登陆
建立一个空白的 HTML 文档用来编写 Authing 程序
本教程只是为了演示，所以咱们没选择高级框架，这可让咱们专一于 Authing 自己。浏览器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Authing SSO Example</title>
</head>
<body></body>
</html>
添加三个按钮
增长三个按钮控件到 body 中，目的是为了演示如何使用 SDK 管理单点登陆状态。
<button id="btn-login">login</button> <button id="btn-track-session">trackSession</button> <button id="btn-logout">logout</button>
引入 AuthingSSO 并初始化
从 CDN 加载 AuthingSSO 的 SDK。填入你的 OIDC 应用 ID 和 域名，进行初始化。
<script src="https://cdn.jsdelivr.net/npm/@authing/sso/dist/AuthingSSO.umd.min.js"></script>
<script>
let auth = new AuthingSSO({
appId: "YOUR_OIDC_APP_ID",
appType: "oidc",
appDomain: "OIDC_APP_DOMAIN.authing.cn"
});
</script>
为按钮注册点击事件
达到的效果是：
- 点击 login 按钮，浏览器会跳转到 OIDC 登陆页面，与用户完成身份确认。
- 点击 trackSession 按钮，会显示当前登陆状态。
- 点击 logout 按钮，进行单点登出。
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));
};
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Authing SSO Example</title>
</head>
<body>
<button id="btn-login">login</button>
<button id="btn-track-session">trackSession</button>
<button id="btn-logout">logout</button>
<script src="https://cdn.jsdelivr.net/npm/@authing/sso/dist/AuthingSSO.umd.min.js"></script>
<script>
let auth = new AuthingSSO({
appId: "YOUR_OIDC_APP_ID",
appType: "oidc",
appDomain: "OIDC_APP_DOMAIN.authing.cn"
});
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));
};
</script>
</body>
</html>
示例代码可从 Github 上找到，建议将 Github 上的代码下载运行。
运行方法
在终端中运行如下命令
$ git clone https://github.com/Authing/authing-sso-demo $ cd authing-sso-demo $ npm install -g http-server $ http-server
以后在浏览器访问 http://localhost:8080。
{% hint style="warning" %}
若是本地 8080 端口已被占用，应用可能会运行在 808一、8082 等后续端口。
{% endhint %}
运行效果
最初，咱们没有登陆，所以，点击 trackSession 按钮获取到的登陆状态为空。
如今咱们点击 login 按钮，会跳转到 OIDC 应用的用户认证页面，输入用户名密码进行登陆。
浏览器被重定向到咱们以前设置的回调连接，记下 code 参数，用于后面换取用户信息。
点击 trackSession 按钮，此时可以获取到该用户的登陆状态，包括用户 ID，应用 ID，应用类型。
点击 logout 按钮，输出单点登出成功。
此时咱们再点击 trackSession 按钮，可见登陆状态为空，说明用户已经单点登出了。
获取用户信息
使用 OIDC 流程中返回的 code 换取 access_token
向如下地址发送 POST 请求：
POST https://OIDC_APP_DOMAIN.authing.cn/oauth/oidc/token
body 参数
| 参数名 | 意义 |
|---|---|
| client_id | OIDC 应用的 app_id |
| redirect_uri | 在控制台配置的 OIDC 回调 url 其中的一个值 |
| scope | 须要请求的权限，若是须要获取 email 和手机号须要有 phone email，若是须要 refresh_token 须要包含 offline_access 参考 scope 表格 |
| response_type | OIDC 模式，能够为 code, id_token, id_token token, code id_token, code token, code id_token token 参考 OIDC 规范 |
| prompt | 能够为 none，login，consent 或 select_account，指定 AP 与 End-User 的交互方式，如需 refresh_token，必须为 consent 参考 OIDC 规范 |
| state | 一个随机字符串，用于防范 CSRF 攻击，若是 response 中的 state 值和发送请求以前设置的 state 值不一样，说明受到攻击 |
| nonce | 一个随机字符串，用于防范 Replay 攻击 |
返回示例
{
"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"
}
验证 access_token 和 id_token 的合法性
OIDC 默认使用 OIDC 应用的 secret 对 token 进行验证（也就是在建立应用时默认选择 HS256 算法）。 若是你使用 javascript 那么可使用 jsonwebtoken 进行验证：
const jwt = require('jsonwebtoken');
let decoded = jwt.verify(token, <appSecret>);
若是是其余语言，那么你在服务端须要用 app_secret 做为 HS256 签名参数来计算签名和 JWT 中的签名进行对比，伪代码以下：
HMACSHA256( base64UrlEncode(header) + "." + base64UrlEncode(payload), "1133fd20c14e4cc29b6ecb71fb8eb952"// app_secret )
若是是 RS256 等非对称加密算法，须要使用公钥验证签名。Authing 将使用私钥进行签名，请使用 Authing 的公钥来验证签名：
-----BEGIN PUBLIC KEY----- MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAxRijj2seoesv5K0Z+ymR K7DSDPxdsM2sGQD2ZVhLjLsxZWJtXUXh7ERdUU6OT3BqYZZf7CLIhN6yyNtTOgfg pLG9HVJd7ZSKzuy2dS7mo8jD8YRtptAJmNFqw6z8tQp5MNG1ZHqp9isKqJmx/CFY kRdXBmjjj8PMVSP757pkC3jCq7fsi0drSSg4lIxrSsGzL0++Ra9Du71Qe/ODQKU0 brxaI1OKILtfcVPTHTaheV+0dw4eYkSDtyaLBG3jqsQbdncNg8PCEWchNzdO6aaj Uq4wbOzy/Ctp399mz0SGKfuC5S8gqAFABFT3DH3UD21ZztQZwFEV2AlvF+bcGEst cwIDAQAB -----END PUBLIC KEY-----
使用 access_token 换取用户信息
开发者在本身的服务中可使用 access_token 换取用户信息。根据 scope 的不一样，这里的返回信息也会有所不一样，字段符合 OIDC 规范，字段解释请参考用户信息字段含义。 请求连接：
GET https://users.authing.cn/oauth/oidc/user/userinfo?access_token=<access_token>
返回示例：
{
"sub": "<用户在 Authing 的惟一标识>",
"nickname": "Authing",
"name": "张三",
"locale": "en-US"
}
更多字段解释请参考用户信息字段含义。
接下来你可能还须要
了解 OIDC 协议：
控制台是你管理全部 Authing 资源的地方，了解 Authing 控制台各模块包含的内容和你能够在控制台中作的事情：
了解 Authing 提供的多种部署模型，以帮助你选择该以怎样的形式部署 Authing：
什么是 Authing？
Authing 提供专业的身份认证和受权服务。
咱们为开发者和企业提供用以保证应用程序安全所需的认证模块，这让开发人员无需成为安全专家。
你能够将任意平台的应用接入到 Authing（不管是新开发的应用仍是老应用均可以），同时你还能够自定义应用程序的登陆方式（如：邮箱/密码、短信/验证码、扫码登陆等）。
你能够根据你使用的技术，来选择咱们的 SDK 或调用相关 API 来接入你的应用。当用户发起受权请求时，Authing 会帮助你认证他们的身份和返回必要的用户信息到你的应用中。
<div align=center>Authing 在应用交互中的位置</div>
- 1. 十分钟实现单点登陆
- 2. 先后端分离 单点登陆SSO 纯前端实现单点登陆SSO
- 3. 多系统实现单点登陆方案：SSO 单点登陆
- 4. 实现 OAuth2 单点登陆SSO—单点登陆和OAuth2概述
- 5. SSO单点登陆实例
- 6. 单点登陆SSO
- 7. SSO单点登陆
- 8. 单点登陆（SSO）
- 9. SSO 单点登陆
- 10. 单点登陆 SSO
- 更多相关文章...
- • Hibernate实现增删改查 - Hibernate教程
- • 现实生活中的 XML - XML 教程
- • Git五分钟教程
- • TiDB 在摩拜单车在线数据业务的应用和实践
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 十分钟实现单点登陆
- 2. 先后端分离 单点登陆SSO 纯前端实现单点登陆SSO
- 3. 多系统实现单点登陆方案：SSO 单点登陆
- 4. 实现 OAuth2 单点登陆SSO—单点登陆和OAuth2概述
- 5. SSO单点登陆实例
- 6. 单点登陆SSO
- 7. SSO单点登陆
- 8. 单点登陆（SSO）
- 9. SSO 单点登陆
- 10. 单点登陆 SSO