在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:Guard开源软件地址:https://gitee.com/Authi_ng/Guard开源软件介绍:GuardAuthing 是一个企业级身份认证提供商,其集成了 OAuth、LDAP、OIDC 等多种身份认证和授权解决方案。 Guard 套件是 Authing 提供的浏览器端单点登录解决方案,开发者可基于此框架在浏览器端实现单点登录的页面及逻辑。 Guard 提供的表单拥有以下基本功能:
安装通过 CDN 安装<script src="https://cdn.jsdelivr.net/npm/@authing/guard/dist/Guard.umd.min.js"></script> 通过 NPM 安装$ npm install @authing/guard --save 接着你可以使用以下方式引入 import Guard from "@authing/guard"; 非 SSO 场景开发者直接从 Authing 的用户池中获取用户数据,不走 OAuth、OIDC 等协议流程。如果用户登录成功,你将在前端直接获取到他的数据。Guard 此场景下用于为开发者快速生成登录表单 UI,快速接入用户系统。 这里以一个简单的 HTML 为例: <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>Guard Example</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <script src="https://cdn.jsdelivr.net/npm/@authing/guard/dist/Guard.umd.min.js"></script> </head> <body> <div id="my-form"></div> <script> const userPoolId = "YOUR_AUTHING_USERPOOL_ID"; const guard = new Guard(userPoolId, { logo: "https://usercontents.authing.cn/client/[email protected]", title: "Authing", // 把表单插入到 id 为 my-form 的标签 mountId: "my-form" }); guard.on("authenticated", userInfo => { // 用户登录成功后,你可以直接在这里获取他的用户信息 console.log(userInfo); }); guard.on("register", userInfo => { // 用户注册成功后,你可以直接在这里获取他的用户信息 console.log(userInfo); }); guard.on("scanned-success", userInfo => { // 用户扫码登录成功后,你可以直接在这里获取他的用户信息 console.log(userInfo); }); </script> </body></html> SSO 场景你想为其他人提供身份服务或使用他人提供的身份服务。此部分供私有部署用户参考,使用 SaaS 的用户直接使用 Authing 云上部署的 Guard,无需操心 Guard 部署问题,只需关注如何发起 SSO 登录请求。 作为 IdP(身份提供商),对外提供身份服务,Guard 此场景下用于 IdP 确认用户身份。支持的协议有 OAuth 2.0,OIDC,SAML,LDAP。 作为与其他 IdP 通信的客户端,Guard 此场景下充当 SP 和其他 IdP 通信,用于完成相应登录协议发起授权的环节,例如向其他 SAML IdP 发送 SAML Request 请求。 部署示例: <!DOCTYPE html><html lang="zh-cn"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width,initial-scale=1.0" /> <link rel="icon" href="https://fe-static.authing.cn/dist/favicon.png" /> <title>Authing SSO</title> </head> <body> <noscript> <strong >We're sorry but sso doesn't work properly without JavaScript enabled. Please enable it to continue.</strong > </noscript> <script src="https://cdn.jsdelivr.net/npm/@authing/guard/dist/Guard.umd.min.js"></script> <script> var appId = "YOUR_AUTHING_SSO_APPID"; var userPoolId = "YOUR_AUTHING_USERPOOL_ID"; var domain = "example.authing.cn"; const guard = new Guard(userPoolId, { appId, domain, hideClose: true, isSSO: true, SSOHost: location.origin, qrcodeScanning: { redirect: false }, host: { user: "私有部署的内部地址", oauth: "私有部署的内部地址" } }); </script> </body></html> API构造函数 new Guard(userPoolId, options)初始化一个新的 非 SSO 场景只需提供用户池 id。
SSO 场景供私有化部署用户参考,SaaS 用户无需操心 Guard SSO 场景部署。 需要提供用户池 id,在 options 对象中,传入你在 Authing 对应应用中的 appId 和域名信息。
authing 对象如果你想获取 authing 对象以调用用户管理接口,请使用如下代码:
guard.on("authing-load", authing => { console.log("Authing 实例初始化成功", authing); // authing.login // authing.register // authing.logout // authing.checkLoginStatus // ... // 更多请参考:https://docs.authing.cn/authing/sdk/sdk-for-javascript}); show(mountId)显示登录表单,同时允许覆盖初始化时的配置。
示例// 没有 mountId,会全屏挂载guard.show();// 将会挂载在 id 为 mountId 的标签上guard.show("mountId"); hide()隐藏表单 示例guard.hide(); on(event, callback)Guard 会在以下生命周期中触发相应事件:
自定义UI 定制以下是完整的参数列表:
以下供私有部署用户查看
浏览器兼容性兼容 Chrome、Safari、Firefox 和 Edge。 问题报告如果你遇到问题,请打开 Issue 提出问题。 Get Help
开发者信息LicenseThis project is licensed under the MIT license. See the LICENSE file for more info. |
2022-08-15
2022-08-17
2022-09-23
2023-10-27
2022-08-18
请发表评论