挑战用五行代码轻松集成登录系统,实现单点登录
随着企业业务的发展,OA 系统、财税系统、CRM 系统等各类系统只增不减,权限管理也日渐力不从心。很多企业都在寻找这样一种服务——员工只需登录个人 OA 系统的账号密码,就可以访问飞书、销售易、客户系统等应用程序。
单点登录(Single Sign On,SSO)就可以解决这一痛点。它是指一种思想或服务,用户只需使用一次登录凭据,其他所有被授权的应用都自动处于登录态。
还记得小时候看的《红楼梦》吗?
黛玉初入贾府时,轿夫抬着她进了西边角门没走两步,转弯处就换了一帮衣帽周全的小厮来抬轿,等过了垂花门,又得由婆子们引入正房大院。
如果王熙凤为贾府购买了单点登录服务,那么黛玉进贾府就不必这么处处小心、步步留意了。只要她进了大门,其他的小门就会自动打开,畅行无阻。
如果企业自研身份模块,时间和人力成本的投入都很大。而使用 Authing 单点登录,用几行代码就可以集成登录系统,支持用户统一登录。
这是因为,Authing 提供完善易用的文档,并且支持主流编程语言的 SDK 。开发者可以通过直接调用 SDK 接口与 Authing 完成集成,为多个业务软件在 web 内实现跨主域的单点登录效果。
创建自建应用
也可以使用现有应用。
在控制台的「自建应用」页面,点击「创建自建应用」,应用类型选择「单页 Web 应用」,并填入以下信息:
应用名称:你的应用名称;
认证地址:选择一个二级域名,必须为合法的域名格式,例如 my-spa-app;
配置单点登录
参考 自建应用 SSO 方案
修改配置
找到刚刚配置好的应用,进入应用配置页面:
认证配置:配置 登录回调 URL
授权配置:授权模式开启 authorization_code、refresh_token
授权配置:返回类型开启 code
点击保存进行保存配置
如下图所示:
至此,配置完成。
安装
Authing Browser SDK 支持通过包管理器安装、script 标签引入的方式的方式集成到你的前端业务软件。
使用 NPM 安装
$ npm install @authing/browser
使用 Yarn 安装
$ yarn add @authing/browser
¶使用 script 标签直接引入
<script src="https://cdn.jsdelivr.net/npm/@authing/browser"></script>
<script>
const sdk = new Authing({// 很重要,请仔细填写!// 如果应用开启 SSO,这儿就要写单点登录的“应用面板地址”;否则填写应用的“认证地址”。domain: '认证域名',appId: '应用 ID',// 登录回调地址,需要在控制台『应用配置 - 登录回调 URL』中指定redirectUri: '登录回调地址'
});
</script>
初始化
应用 ID
如图所示:
认证域名
如图所示:
回调地址
根据你自己的业务填写回调地址,如图所示:
为了使用 Authing Browser SDK,你需要填写应用 ID、认证域名、回调地址等参数,如下示例:
import { Authing } from '@authing/browser';const sdk = new Authing({// 很重要,请仔细填写!// 如果应用开启 SSO,这儿就要写单点登录的“应用面板地址”;否则填写应用的“认证地址”。domain: '认证域名',appId: '应用 ID',// 登录回调地址,需要在控制台『应用配置 - 登录回调 URL』中指定redirectUri: '登录回调地址'
});
登录
Authing Browser SDK 可以向 Authing 发起认证授权请求,目前支持三种形式:
在当前窗口转到 Authing 托管的登录页;
弹出一个窗口,在弹出的窗口中加载 Authing 托管的登录页;
静默登录。
跳转登录
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { Authing } from '@authing/browser';
import type { LoginState } from '@authing/browser/dist/types/global';function App() {const sdk = useMemo(() => {return new Authing({// 很重要,请仔细填写!// 如果应用开启 SSO,这儿就要写单点登录的“应用面板地址”;否则填写应用的“认证地址”。domain: '单点登录的“应用面板地址”',// 应用 IDappId: '应用 ID',// 登录回调地址,需要在控制台『应用配置 - 登录回调 URL』中指定redirectUri: '登录回调 URL',});}, []);const [loginState, setLoginState] = useState<LoginState | null>();/*** 以跳转方式打开 Authing 托管的登录页*/const login = () => {sdk.loginWithRedirect();};/*** 获取用户的登录状态*/const getLoginState = useCallback(async () => {const state = await sdk.getLoginState();setLoginState(state);}, [sdk]);useEffect(() => {// 判断当前 URL 是否为 Authing 登录回调 URLif (sdk.isRedirectCallback()) {/*** 以跳转方式打开 Authing 托管的登录页,认证成功后需要配合 handleRedirectCallback 方法,* 在回调端点处理 Authing 发送的授权码或 token,获取用户登录态*/sdk.handleRedirectCallback().then((res) => setLoginState(res));} else {getLoginState();}}, [getLoginState, sdk]);return (<div className="App"><p><button onClick={login}>loginWithRedirect</button></p><p><code>{JSON.stringify(loginState)}</code></p></div>);
}export default App;
如果你想自定义参数,也可以对以下参数进行自定义传参,如不传参将使用默认参数。
const login = () => {const params: {// 回调地址,默认为初始化参数中的 redirectUriredirectUri?: string;// 发起登录的 URL,若设置了 redirectToOriginalUri 会在登录结束后重定向回到此页面,默认为当前 URLoriginalUri?: string;// 即使在用户已登录时也提示用户再次登录forced?: boolean;// 自定义的中间状态,会被传递到回调端点customState?: any;} = {redirectUri: '回调地址',originalUri: '发起登录的 URL',forced: false,customState: {},}sdk.loginWithRedirect(params);
};
弹出窗口登录
你也可以在你的业务软件页面使用下面的方法,通过弹出一个新窗口的方式让用户在新窗口登录:
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { Authing } from '@authing/browser';
import type { LoginState } from '@authing/browser/dist/types/global';function App() {const sdk = useMemo(() => {return new Authing({// 很重要,请仔细填写!// 如果应用开启 SSO,这儿就要写单点登录的“应用面板地址”;否则填写应用的“认证地址”。domain: '单点登录的“应用面板地址”',// 应用 IDappId: '应用 ID',// 登录回调地址,需要在控制台『应用配置 - 登录回调 URL』中指定redirectUri: '登录回调 URL',});}, []);const [loginState, setLoginState] = useState<LoginState | null>();/*** 以弹窗方式打开 Authing 托管的登录页*/const login = async () => {const res = await sdk.loginWithPopup();setLoginState(res);};/*** 获取用户的登录状态*/const getLoginState = useCallback(async () => {const state = await sdk.getLoginState();setLoginState(state);}, [sdk]);useEffect(() => {getLoginState();}, [getLoginState]);return (<div className="App"><p><button onClick={login}>login</button></p><p><code>{JSON.stringify(loginState)}</code></p></div>);
}export default App;
如果你想自定义参数,也可以对以下参数进行自定义传参,如不传参将使用默认参数。
const login = async () => {const params: {// 回调地址,默认为初始化参数中的 redirectUriredirectUri?: string;// 即使在用户已登录时也提示用户再次登录forced?: boolean;} = {redirectUri: '回调地址',forced: false,};const res = await sdk.loginWithPopup(params);setLoginState(res);
};
静默登录
在 自建应用 SSO 方案 一文中有提到,可以将多个自建应用添加到「单点登录 SSO」面板,如果用户已经登录过其中的一个应用,那么在同一浏览器另一个标签页访问其他应用的时候,就可以实现静默登录,直接获取到用户信息,实现单点登录效果。
import React, { useEffect, useMemo, useState } from 'react';
import { Authing } from '@authing/browser';
import type { LoginState } from '@authing/browser/dist/types/global';function App() {const sdk = useMemo(() => {return new Authing({// 很重要,请仔细填写!// 如果应用开启 SSO,这儿就要写单点登录的“应用面板地址”;否则填写应用的“认证地址”。domain: '单点登录的“应用面板地址”',// 应用 IDappId: '应用 ID',// 登录回调地址,需要在控制台『应用配置 - 登录回调 URL』中指定redirectUri: '登录回调 URL',});}, []);const [loginState, setLoginState] = useState<LoginState | null>();useEffect(() => {// 判断当前 URL 是否为 Authing 登录回调 URLif (sdk.isRedirectCallback()) {console.log('redirect');/*** 以跳转方式打开 Authing 托管的登录页,认证成功后需要配合 handleRedirectCallback 方法,* 在回调端点处理 Authing 发送的授权码或 token,获取用户登录态*/sdk.handleRedirectCallback().then((res) => setLoginState(res));} else {console.log('normal');// 获取用户的登录状态sdk.getLoginState().then((res) => {if (res) {setLoginState(res);} else {// 如果用户没有登录,跳转认证中心sdk.loginWithRedirect();}});}}, [sdk]);return (<div><p>Access Token: <code>{loginState?.accessToken}</code></p><p>User Info: <code>{JSON.stringify(loginState?.parsedIdToken)}</code></p><p>Access Token Info:<code>{JSON.stringify(loginState?.parsedAccessToken)}</code></p><p>Expire At: <code>{loginState?.expireAt}</code></p></div>);
}export default App;
高级使用
每次发起登录本质是访问一个 URL 地址,可以携带许多参数。Authing Browser SDK 默认会使用缺省参数。如果你需要精细控制登录请求参数,可以参考本示例。
import { Authing } from '@authing/browser';const sdk = new Authing({// 很重要,请仔细填写!// 如果应用开启 SSO,这儿就要写单点登录的“应用面板地址”;否则填写应用的“认证地址”。domain: '认证域名',appId: '应用 ID',// 登录回调地址,需要在控制台『应用配置 - 登录回调 URL』中指定redirectUri: '登录回调地址',// 应用侧向 Authing 请求的权限,以空格分隔,默认为 'openid profile'scope: 'openid email phone profile',// 回调时在何处携带身份凭据,默认为 fragment// fragment: 在 URL hash 中携带// query: 在查询参数中携带responseMode: 'fragment',// 是否使用 OIDC implicit 模式替代默认的 PKCE 模式// 由于 implicit 模式安全性较低,不推荐使用,只用于兼容不支持 crypto 的浏览器useImplicitMode: false,// implicit 模式返回的凭据种类,默认为 'token id_token'// token: 返回 Access Token// id_token: 返回 ID TokenimplicitResponseType: 'token id_token',// 是否在每次获取登录态时请求 Authing 检查 Access Token 有效性,可用于单点登出场景,默认为 false// 如果设为 true,需要在控制台中将『应用配置』-『其他配置』-『检验 token 身份验证方式』设为 noneintrospectAccessToken: false,// 弹出窗口的宽度popupWidth: 500,// 弹出窗口的高度popupHeight: 600,
});
检查登录态并获取 Token
如果你想检查用户的登录态,并获取用户的 Access Token
、ID Token
,可以调用 getLoginState
方法,如果用户没有在 Authing 登录,该方法会抛出错误:
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { Authing } from '@authing/browser';
import type { LoginState } from '@authing/browser/dist/types/global';function App() {const sdk = useMemo(() => {return new Authing({// 很重要,请仔细填写!// 如果应用开启 SSO,这儿就要写单点登录的“应用面板地址”;否则填写应用的“认证地址”。domain: '单点登录的“应用面板地址”',// 应用 IDappId: '应用 ID',// 登录回调地址,需要在控制台『应用配置 - 登录回调 URL』中指定redirectUri: '登录回调 URL',});}, []);const [loginState, setLoginState] = useState<LoginState | null>();/*** 以跳转方式打开 Authing 托管的登录页*/const login = () => {sdk.loginWithRedirect();};/*** 获取用户的登录状态*/const getLoginState = useCallback(async () => {const state = await sdk.getLoginState();setLoginState(state);}, [sdk]);useEffect(() => {// 判断当前 URL 是否为 Authing 登录回调 URLif (sdk.isRedirectCallback()) {/*** 以跳转方式打开 Authing 托管的登录页,认证成功后需要配合 handleRedirectCallback 方法,* 在回调端点处理 Authing 发送的授权码或 token,获取用户登录态*/sdk.handleRedirectCallback().then((res) => setLoginState(res));} else {getLoginState();}}, [getLoginState, sdk]);return (<div className="App"><p><button onClick={login}>login</button></p><p><code>{JSON.stringify(loginState)}</code></p></div>);
}export default App;
获取用户信息
你需要使用 Access Token 获取用户的个人信息:
用户初次登录成功时可以在回调函数中拿到用户的 Access Token,然后使用 Access Token 获取用户信息;
如果用户已经登录,你可以先获取用户的 Access Token ,然后使用 Access Token 获取用户信息。
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { Authing } from '@authing/browser';
import type { LoginState, UserInfo } from '@authing/browser/dist/types/global';function App() {const sdk = useMemo(() => {return new Authing({// 很重要,请仔细填写!// 如果应用开启 SSO,这儿就要写单点登录的“应用面板地址”;否则填写应用的“认证地址”。domain: '单点登录的“应用面板地址”',// 应用 IDappId: '应用 ID',// 登录回调地址,需要在控制台『应用配置 - 登录回调 URL』中指定redirectUri: '登录回调 URL',});}, []);const [loginState, setLoginState] = useState<LoginState | null>();const [userInfo, setUserInfo] = useState<UserInfo | null>();/*** 以跳转方式打开 Authing 托管的登录页*/const login = () => {sdk.loginWithRedirect();};/*** 获取用户的登录状态*/const getLoginState = useCallback(async () => {const state = await sdk.getLoginState();setLoginState(state);}, [sdk]);/*** 用 Access Token 获取用户身份信息*/const getUserInfo = async () => {if (!loginState) {alert("用户未登录");return;}const userInfo = await sdk.getUserInfo({accessToken: loginState?.accessToken,});setUserInfo(userInfo);};useEffect(() => {// 判断当前 URL 是否为 Authing 登录回调 URLif (sdk.isRedirectCallback()) {/*** 以跳转方式打开 Authing 托管的登录页,认证成功后需要配合 handleRedirectCallback 方法,* 在回调端点处理 Authing 发送的授权码或 token,获取用户登录态*/sdk.handleRedirectCallback().then((res) => setLoginState(res));} else {getLoginState();}}, [getLoginState, sdk]);return (<div className="App"><p><button onClick={login}>login</button> <button onClick={getUserInfo}>getUserInfo</button> </p><p>loginState:<code>{JSON.stringify(loginState)}</code></p><p>userInfo:<code>{JSON.stringify(userInfo)}</code></p></div>);
}export default App;
退出登录
可以调用 SDK 的 logoutWithRedirect
方法退出登录。
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { Authing } from '@authing/browser';
import type { LoginState } from '@authing/browser/dist/types/global';function App() {const sdk = useMemo(() => {return new Authing({// 很重要,请仔细填写!// 如果应用开启 SSO,这儿就要写单点登录的“应用面板地址”;否则填写应用的“认证地址”。domain: '单点登录的“应用面板地址”',// 应用 IDappId: '应用 ID',// 登录回调地址,需要在控制台『应用配置 - 登录回调 URL』中指定redirectUri: '登录回调 URL',});}, []);const [loginState, setLoginState] = useState<LoginState | null>();/*** 以跳转方式打开 Authing 托管的登录页*/const login = () => {sdk.loginWithRedirect();};/*** 获取用户的登录状态*/const getLoginState = useCallback(async () => {const state = await sdk.getLoginState();setLoginState(state);}, [sdk]);/*** 登出*/const logout = async () => {await sdk.logoutWithRedirect();};useEffect(() => {// 判断当前 URL 是否为 Authing 登录回调 URLif (sdk.isRedirectCallback()) {/*** 以跳转方式打开 Authing 托管的登录页,认证成功后需要配合 handleRedirectCallback 方法,* 在回调端点处理 Authing 发送的授权码或 token,获取用户登录态*/sdk.handleRedirectCallback().then((res) => setLoginState(res));} else {getLoginState();}}, [getLoginState, sdk]);return (<div className="App"><p><button onClick={login}>login</button> <button onClick={logout}>logout</button> </p><p>loginState:<code>{JSON.stringify(loginState)}</code></p></div>);
}export default App;
代码参考
https://github.com/Authing/authing-sso-demo/tree/feat-sso-v3-demo
https://github.com/Authing/authing-sso-demo/tree/feat-sso-v3-demo-vue2
https://github.com/Authing/authing-sso-demo/tree/feat-sso-v3-demo-vue3
https://github.com/Authing/authing-sso-demo/tree/feat-sso-v3-demo-angular
获取帮助
Join us on Gitter: http://forum.authing.cn
文中代码为 React,Vue2、Vue3、Angular 可以查看单点登录文档。
点击此处了解更多行业身份管理
「解决方案」以及「最佳实践案例」
挑战用五行代码轻松集成登录系统,实现单点登录相关推荐
- 通用权限管理系统组件 中集成多个子系统的单点登录(网站入口方式)附源码
通用权限管理系统组件 (GPM - General Permissions Manager) 中集成多个子系统的单点登录(网站入口方式)附源码 上文中实现了直接连接数据库的方式,通过配置文件,自定义的 ...
- Shiro集成kisso,搭建单点登录系统
kisso 是一个中间件,提供 cookie 搭建 java web sso 的组件式解决方案. shiro是目前比较常用的轻量权限控制框架. SpringBoot集成Shiro的文章比较多,我不多赘 ...
- 业务系统接入单点登录服务
转载请注明原文地址:https://www.cnblogs.com/ygj0930/p/11377620.html 一:单点登录业务接入场景 对于大型企业,内部有各种各样的办公OA.业务系统,员工使用 ...
- php tipask yii 单点登录_php实现单点登录实例
这是一个简单版的php单点登录概述,如果需要实现复杂的需自己,编写复杂的ticket加解密算法. 先看张图. sso系统,http://sso.yxh.com <?phpecho "s ...
- 什么是单点登录(SSO)?单点登录(SSO)到底什么意思?【附逻辑Demo实例】
在程序开发中,特别是网站类开发,会接触到单点登录(SSO),什么是单点登录?,单点登录(SSO)有什么用?下面软币网小编来来介绍一下: 一.什么是单点登录? 单点登录的英文名叫做:Single Sig ...
- CAS单点登录-微信企业号单点登录(二十)
CAS单点登录-微信企业号登录(二十) 背景 在企业号得开发中,无法避免登录的问题,多个系统前端交互可能会设计到单点登录,若多系统已单点登录,那sso如何支持呢? 概述 查看企业号开发者接口文档 我们 ...
- open edx 实现第三方登录-shibboleth单点登录
open edx 实现第三方登录-shibboleth单点登录 在open edx端的配置参考官方文档:http://edx.readthedocs.io/projects/edx-installin ...
- 通用权限管理系统组件 (GPM - General Permissions Manager) 中集成多系统的统一登录(数据库源码级)附源码...
眼前有20万行以上的代码时很多人都会眼花缭乱,不知道从哪里开始下手了,甚至不会去研究几下就直接放弃了.其实大多时候没有想象的那么复杂,代码里一大部分都是有重复的,有本质上差别的部分还是很少的. 春节期 ...
- 如何实现系统的单点登录?
目录 1. 单点登录的流程是什么样的? 2. 从代码层面剖析单点登录流程 3. 跨域问题怎么解决? 4. 如何实现会话超时? 1. 单点登录的流程是什么样的? 总体来说,一次单点登录过程包括了 3 次 ...
最新文章
- ADAS系统长篇综述(下)
- 大数据时代如何赢得财务人才
- 经常使用的MySQL语句整理
- Java学习记录(补充三:String类)
- 第一阶段_第三部分_光照与GI
- 如何查找UI5应用对应在ABAP Netweaver服务器上的BSP应用名称
- 看网络电子围栏如何做好周界安防
- jQuery----选择器
- (01)C++之设计模式演变
- html5+前端脸部识别采集,前端人脸识别框架Tracking.js
- 旅行青蛙南の旅旅行券_旅行时查找WiFi
- EndnoteX9简介及基本教程使用说明
- Android在Manifest里的权限配置
- [iOS]仿微博视频边下边播之滑动 TableView 自动播放
- Threats to Validity_追逐梦想的顾咏丰_新浪博客
- php中seq是什么意思,seq-answer
- 马斯克为房地产代言“献身”,洗泡泡浴还被五花大绑,看完广告我瞎了
- outlook邮箱邮件大小限制_Outlook 中的邮件规则容量限制
- jiny的博客开通啦~~
- opengl绘制钟表