• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

    Guard: Guard 套件是 Authing 提供的浏览器端单点登录解决方案,开发者可基于此框架在 ...

    原作者: [db:作者] 来自: 网络 收藏 邀请

    开源软件名称:

    Guard

    开源软件地址:

    https://gitee.com/Authi_ng/Guard

    开源软件介绍:

    Guard

    Authing 是一个企业级身份认证提供商,其集成了 OAuth、LDAP、OIDC 等多种身份认证和授权解决方案。

    Guard 套件是 Authing 提供的浏览器端单点登录解决方案,开发者可基于此框架在浏览器端实现单点登录的页面及逻辑。

    Guard 提供的表单拥有以下基本功能:

    • 邮箱密码登录注册
    • 手机验证码登录
    • 用户名密码登录
    • 忘记密码以及重置密码
    • 记住账号功能(加密信息存储到浏览器本地)
    • 社会化登录(微信、Github)
    • 小程序扫码登录
    • 响应式特性
    • SSO(支持 SAML、LDAP、OIDC)

    login-form

    点击体验在 jsfiddle 上尝试

    安装

    通过 CDN 安装

    <script src="https://cdn.jsdelivr.net/npm/@authing/guard/dist/Guard.umd.min.js"></script>

    通过 NPM 安装

    $ npm install @authing/guard --save

    接着你可以使用以下方式引入 Guard

    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)

    初始化一个新的 Guard 实例。SSO 场景和非 SSO 场景下传参方式有所不同。

    非 SSO 场景

    只需提供用户池 id。

    • userPoolId: 用户池 id
    • options {Object}: 允许你自定义表单的 UI,相关参数请参考 自定义

    SSO 场景

    供私有化部署用户参考,SaaS 用户无需操心 Guard SSO 场景部署。

    需要提供用户池 id,在 options 对象中,传入你在 Authing 对应应用中的 appId 和域名信息。

    • userPoolId: 用户池 id
    • options {Object}: 允许你自定义表单的 UI,相关参数请参考 自定义
    • options.appId {String}: Authing SSO 类应用的 appId
    • options.domain {String}: Authing 中配置的 域名. 通常是 <appDomain>.authing.cn;

    authing 对象

    如果你想获取 authing 对象以调用用户管理接口,请使用如下代码:

    authing-load 事件是 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 {String}: 指定 Guard 将在何处显示,接受一个 html 元素 id,不含 # 号,不指定则直接生成在网页中间。

    示例

    // 没有 mountId,会全屏挂载guard.show();// 将会挂载在 id 为 mountId 的标签上guard.show("mountId");

    hide()

    隐藏表单

    示例

    guard.hide();

    on(event, callback)

    Guard 会在以下生命周期中触发相应事件:

    事件名称事件说明事件参数事件参数说明
    authing-loadAuthing Client ID 验证通过,加载完成authingauthing 对象,可直接操作 login,register 等方法
    authing-unloadAuthing Client ID 验证失败error错误信息
    social-load社会化登录列表加载完成oauthList完整的 OAuth 列表,若用户未在后台配置过则为空
    social-unload社会化登录列表加载失败error错误信息
    login/authenticated用户登录成功user用户数据
    login-error/authenticated-error用户登录失败error错误信息,包含字段缺失/非法或服务器错误等信息
    register用户注册成功user用户数据
    register-error用户注册失败error错误信息,包含字段缺失/非法或服务器错误等信息
    email-sent忘记密码邮件发送成功data发送的结果
    email-sent-error忘记密码邮件发送失败error错误信息
    reset-password重置密码成功data重置密码结果
    reset-password-error重置密码失败error错误信息
    scanned-success扫码登录成功user用户数据
    scanned-error扫码登录失败error错误信息
    scanning-interval-starting开始监听扫码事件interval用户可使用 clearInterval 停止监听
    form-closedGuard 关闭事件null用户按下 ESC 或点击右上方的关闭按钮后会触发此事件

    自定义

    UI 定制

    以下是完整的参数列表:

    参数名称是否必填默认值类型参数说明
    nonce[Random]Number随机数,用于防范网络攻击
    timpstamp当前时间戳Number初始化时的时间戳,用于防范网络攻击
    mountIdString指定 Guard 表单将在何处显示,接受一个 html 元素 id,不含 # 号。不指定则默认全屏弹出 Modal 登录框
    titleAuthingString产品名称
    cssString自定义 CSS 样式,如果指定了,会在 DOM 的 head 中插入一个 <style type="text/css"></style> 节点。如 body {background:#6699 !important;}
    logo[Authing LOGO]String产品 logo,默认为 Authing 的官方 Logo
    defaultLoginMethod枚举值: PHONE,PASSWORD,QRCODEString默认显示登录方式。PHONE 为手机号登录,PASSWORD 为邮箱/用户名 密码登录,QRCODE 为扫码登录。
    forceLoginfalseBoolean是否将注册和登录合并,合并后如果用户不存在将自动注册
    hideQRCodefalseBoolean是否隐藏小程序扫码登录,在开发者在 Authing 控制台开启小程序扫码登录后,若此项为 true 将不显示小程序扫码登录
    hideUPfalseBoolean是否隐藏用户名-密码登录,隐藏后将不显示用户名-密码登录框
    hideUsernamefalseBoolean是否隐藏注册时的用户名填写,隐藏后将不显示用户名输入框
    hideRegisterfalseBoolean是否隐藏注册框,隐藏后将不显示注册框
    hidePhonefalseBoolean是否隐藏使用手机登录,隐藏后将不显示使用手机登录
    hidePhonePasswordfalseBoolean是否隐藏使用手机密码登录,隐藏后将不显示使用手机+密码登录
    hideSocialfalseBoolean是否隐藏社会化登录,在开发者在 Authing 控制台开启社会化登录后,若此项为 true 将隐藏全部社会化登录
    hideClosefalseBoolean是否隐藏登录框右上角的关闭按钮,如果隐藏,用户将不能通过点击按钮或按 ESC 关闭登录框
    placeholder{}Object定制输入框的 paceholder
    placeholder.username请输入用户名String用户名输入框的 paceholder
    placeholder.email请输入邮箱String邮箱输入框的 paceholder
    placeholder.password请输入密码String密码输入框的 paceholder
    placeholder.confirmPassword请确认密码String确认密码输入框的 paceholder
    placeholder.verfiyCode请输入验证码String验证码输入框的 paceholder
    placeholder.newPassword请输入新密码String新密码输入框的 paceholder
    placeholder.phone请输入手机号String手机号输入框的 paceholder
    placeholder.phoneCode4 位验证码String手机验证码输入框的 paceholder
    qrcodeScanning{}Object小程序扫码登录的配置项
    qrcodeScanning.redirecttrueBoolean是否执行跳转(在用户后台配置的 URL),若值为 false,用户数据可通过 .on('authenticated') 回调函数获取
    qrcodeScanning.interval1500Number每隔多少秒检查一次是否扫码,默认 1500
    qrcodeScanning.tips使用 微信 或小程序 身份管家 扫码登录String提示信息,可写 HTML

    以下供私有部署用户查看

    参数名称是否必填默认值类型参数说明
    useSelfWxappfalseBoolean是否使用私有部署的小程序提供二维码,此选项仅供私有部署用户使用
    host{}ObjectGraphqlQL 通讯地址配置项
    host.user[Authing 官方链接]StringGraphQL 链接,默认 Authing 官方链接,此处用于私有部署 Authing 的用户使用
    host.oauth[Authing 官方链接]StringGraphQL 链接,默认 Authing 官方链接,此处用于私有部署 Authing 的用户使用
    appIdStringSSO 应用的云上 ID
    domainStringSSO 类应用云上域名
    protocoloauthString用于显示指定 SSO 应用类型,可选值为 oauth、oidc、saml
    SSOHosthttps://sso.authing.cnStringSSO 类应用的通讯地址,默认 Authing 官方链接,此处用于私有部署 Authing 的用户使用
    isSSOfalseBoolean用于标识当前是否为 SSO 模式,如果只是想简单生成登录表单,使用默认 false 即可

    浏览器兼容性

    兼容 Chrome、Safari、Firefox 和 Edge。

    问题报告

    如果你遇到问题,请打开 Issue 提出问题。

    Get Help

    1. Join us on Gitter: #authing-chat

    开发者信息

    Authing

    License

    This project is licensed under the MIT license. See the LICENSE file for more info.


    鲜花

    握手

    雷人

    路过

    鸡蛋
    该文章已有0人参与评论

    请发表评论

    全部评论

    专题导读
    热门推荐
    阅读排行榜

    扫描微信二维码

    查看手机版网站

    随时了解更新最新资讯

    139-2527-9053

    在线客服(服务时间 9:00~18:00)

    在线QQ客服
    地址:深圳市南山区西丽大学城创智工业园
    电邮:jeky_zhao#qq.com
    移动电话:139-2527-9053

    Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap