Authing 文档
文档
快速开始
概念
使用指南
开发集成
应用集成
加入 APN
多租户(内测版)
旧版
快速开始
概念
使用指南
开发集成
应用集成
加入 APN
多租户(内测版)
旧版
开发集成
  • 登录组件 (Guard)
  • 单点登录(SSO)
  • JavaScript / Node.js
  • Java / Kotlin
  • Python
  • C#
  • PHP
  • Go
  • Ruby
  • Android
  • iOS
  • Swift
  • Flutter
  • React Native
  • 微信小程序
  • 微信网页授权
  • 框架集成
  • 错误代码

    ¶ Vue.js 登录组件

    更新时间: 2022-03-11 11:21:01

    Authing 登录组件(Guard)是一种可嵌入的登录表单,可根据你的需求进行配置,建议用于单页面应用程序。它使你可以轻松添加各种社会化登录方式,以便你的用户可以无缝登录,并且在不同平台拥有一致的登录体验。Guard 为开发者屏蔽了很多底层认证的实现细节,同时也包括繁琐的 UI 开发。

    Guard 可以通过组件化的形式集成到你的 Vue.js 项目中,你可以借助此组件快速实现登录认证流程。

    ¶ 快速开始

    ¶ 使用 npm

    ¶ 安装

    $ yarn add @authing/vue-ui-components
    
    # OR
    
    $ npm install @authing/vue-ui-components --save
    

    ¶ 初始化

    在 Vue.js 项目中引入 @authing/vue-ui-components 并初始化。

    <template>
      <AuthingGuard :appId="appId" />
    </template>
    
    <script>
      import { AuthingGuard } from "@authing/vue-ui-components";
      import "@authing/vue-ui-components/lib/index.min.css";
    
      export default {
        components: {
          AuthingGuard,
        },
        data() {
          return {
            appId: "AUTHING\_APP\_ID",
          };
        },
      };
    </script>
    

    ¶ 使用 CDN

    ¶ 使用 CDN 引入

    <script src="https://cdn.authing.co/packages/vue-ui-components/2.4.45/index.min.js"></script>
    
    <link href="https://cdn.authing.co/packages/vue-ui-components/2.4.45/index.min.css" rel="stylesheet"></link>
    

    ¶ 在 Script 代码块中初始化

    <script>
    const appId = "AUTHING\_APP\_ID";
    const config = {
      logo: "https://usercontents.authing.cn/client/logo@2.png",
    };
    
    const app = new Vue({
      el: "#app",
      render: (h) =>
        h(AuthingVueUIComponents.AuthingGuard, {
          props: {
            appId,
          },
        }),
    });
    </script>
    

    ¶ 监听登录事件

    AuthingGuard 组件可以使用 @login 事件回调函数,当用户成功登录时回调用此函数,你可以在此获取当前用户的用户信息。查看完整事件列表。

    <template>
      <AuthingGuard :appId="appId" @login="handleLogin" />
    </template>
    
    <script>
    import { AuthingGuard } from "@authing/vue-ui-components";
    import "@authing/vue-ui-components/lib/index.min.css";
    
    export default {
      components: {
        AuthingGuard,
      },
      data() {
        return {
          appId: "AUTHING\_APP\_ID",
        };
      },
      methods: {
        handleLogin(userInfo) {
          console.log(userInfo);
        },
      },
    };
    </script>
    
    了解获取用户信息之后该怎么做?

    获取到用户信息之后,你可以得到用户的身份凭证(用户信息的 token 字段),你可以在客户端后续发送给后端服务器的请求中携带上此 token, 以 axios 为例:

    const axios = require("axios");
    axios
      .get({
        url: "https://yourdomain.com/api/v1/your/resources",
        headers: {
          Authorization: "Bearer ID_TOKEN",
        },
      })
      .then((res) => {
        // custom codes
      });
    

    在后端接口中需要检验此 token 的合法性,来验证用户的身份,验证方式详情请见验证用户身份凭证(token)。识别用户身份之后,你可能还需要对该用户进行权限管理,以判断用户是否对此 API 具备操作权限。

    查看支持的社会化登录列表及接入流程

    Authing 目前一共支持国内外将近 20 余种社会化登录,如微信、GitHub、Sign in with Apple、支付宝等,以下是完整的列表:

    社会化登录 使用场景 接入手册
    微信 PC 扫码 PC 网站 查看接入文档
    微信移动端 移动 APP 查看接入文档
    微信网页授权登录 微信内网页 查看接入文档
    关注公众号登录 PC 网站 查看接入文档
    微信小程序内登录 微信小程序 查看接入文档
    微信小程序扫码登录 PC 网站 查看接入文档
    App 拉起小程序登录 移动 APP 查看接入文档
    企业微信(内部应用)扫码登录 PC 网站 查看接入文档
    企业微信(内部应用,代开发模式)扫码登录 PC 网站 查看接入文档
    企业微信(第三方应用)扫码登录 PC 网站 查看接入文档
    企业微信(第三方应用)网页授权登录 企业微信内网页 查看接入文档
    GitHub PC 网站 查看接入文档
    Google PC 网站 查看接入文档
    Twitter PC 网站 查看接入文档
    Facebook PC 网站 查看接入文档
    钉钉 PC 网站 查看接入文档
    微博 PC 网站 查看接入文档
    QQ PC 网站 查看接入文档
    百度 PC 网站 查看接入文档
    飞书企业自建应用 PC 网站 查看接入文档
    飞书企业自建应用移动端 移动 APP 查看接入文档
    飞书应用商店应用 PC 网站 查看接入文档
    飞书应用商店应用移动端 移动 APP 查看接入文档
    GitLab PC 网站 查看接入文档
    支付宝 移动 APP 查看接入文档
    支付宝(Web 端) PC 网站 查看接入文档
    Sign in with Apple(Web 端) PC 网站 查看接入文档
    Sign in with Apple(移动端) 移动 APP 查看接入文档
    Slack PC 网站 查看接入文档
    LinkedIn PC 网站 查看接入文档
    QingCloud PC 网站 查看接入文档
    Gitee PC 网站 查看接入文档
    手机号一键登录 移动 APP 查看接入文档

    ¶ 退出登录

    1. 在项目入口文件中初始化 AuthenticationClient。
    import { initAuthClient } from "@authing/vue-ui-components";
    
    initAuthClient({
      appId: "YOUR_APP_ID",
    });
    
    1. 添加一个退出登录的 Button 组件,并绑定点击事件为 getAuthClient().logout()。
    <template>
      <button @click="handleLogout" />
    </template>
    
    <script>
    import { getAuthClient } from "@authing/vue-ui-components";
    
    export default {
      components: {
        AuthingGuard,
      },
      methods: {
        handleLogout() {
          getAuthClient().logout();
        },
      },
    };
    </script>
    

    ¶ 实现单点登录

    使用 Guard 进行单点登录只需要将属性 isSSO 设置为 true 即可:

    <template>
      <AuthingGuard :appId="AUTHING\_APP\_ID" :isSSO="true" />
    </template>
    

    ¶ GuardMode

    Guard 目前有两种展示方式 modal | normal,normal 方式会将表单插入指定的 dom 节点,适合将登录作为单独页面的场景,modal 模式会以模态框形式展示表单,适合在已有页面中弹出进行登录。默认展示方式为 normal,可通过传入 mode 参数配置展示方式。然后通过 visible 属性实现 Guard 是否可见。

    <AuthingGuard :appId="appId" :visible="visible" mode="modal"/>
    
    data() {
      return {
        visible: false
      }
    }
    
    ...
    
    methods: {
      showLogin() {
        this.visible = true
      }
    }
    

    ¶ 导出 authing-js-sdk

    Guard 组件本身基于 Authing JavaScript SDK 进行封装,当你需要进行一些更高级的操作(如管理用户自定义数据、修改用户资料、退出登录)时:

    1. 调用 initAuthClient 初始化 AuthenticationClient,多次调用此函数只会初始化一次。
    import { initAuthClient } from "@authing/vue-ui-components";
    
    initAuthClient({
      appId: "YOUR_APP_ID",
    });
    
    1. 之后使用 getAuthClient 获取 AuthenticationClient 实例。
    import { getAuthClient } from "@authing/vue-ui-components";
    
    const authClient = getAuthClient();
    
    1. 调用 AuthenticationClient 实例的方法,完整方法列表请见 AuthenticationClient 方法列表。
    authClient.getCurrentUser().then((user) => console.log(user));
    

    ¶ 属性列表

    属性名称 描述 类型 取值描述
    appId 你的应用 ID String
    mode Guard 展示模式 String modal:弹窗模式
    normal:全屏模式
    autoRegister 如果为 true,登录时,用户不存在则自动注册账号 boolean 默认为 false
    isSSO 是否是单点登录 boolean 默认为 false
    clickCloseable Modal 模式时是否隐藏登录框右上角的关闭按钮。
    如果隐藏,用户将不能通过点击按钮关闭登录框
    boolean 默认为 true
    escCloseable Modal 模式时是否可以通过键盘 ESC 键关闭登录框 boolean 默认为 true

    ¶ 事件列表

    事件名 事件说明 事件参数 事件参数说明
    load Authing appId 验证通过,加载完成 authClient AuthenticationClient 对象,可直接操作 login, register,详情请查看 authing-js-sdk
    load-error Authing appId 验证失败,加载失败 error 错误信息
    login 用户登录成功 user, authClient

    user: 用户信息

    authClient 同上

    login-error 用户登录失败 error 错误信息,包含字段缺失/非法或服务器错误等信息
    register 用户注册成功 user, authClient

    user: 用户信息

    authClient 同上

    register-error 用户注册失败 error 错误信息,包含字段缺失/非法或服务器错误等信息
    pwd-email-send 忘记密码邮件发送成功 - -
    pwd-email-send-error 忘记密码邮件发送失败 error 错误信息
    pwd-phone-send 忘记密码手机验证码发送成功 - -
    pwd-phone-send-error 忘记密码手机验证码发送失败 error 错误信息
    pwd-reset 重置密码成功 - -
    pwd-reset-error 重置密码失败 error 错误信息
    close modal 模式中 guard 关闭事件 - -
    login-tab-change 登录 tab 切换事件 activeTab 切换后的 tab
    register-tab-change 注册 tab 切换事件 activeTab 切换后的 tab
    register-info-completed 注册补充成功事件 user, udfs, authClient

    user: 用户信息

    udfs: 补充的自定义字段信息

    authClient 同上

    register-info-completed-error 注册补充失败事件 error, udfs, authClient

    error: 错误信息

    udfs: 补充的自定义字段信息

    authClient 同上

    ¶ 私有化部署

    私有化部署场景需要指定你私有化的 Authing 服务的 Host(包含协议但不含 Path),如果你不清楚可以联系 Authing IDaaS 服务管理员。

    <template>
      <AuthingGuard :appId="appId" :config="config" />
    </template>
    
    <script>
      import { AuthingGuard } from "@authing/vue-ui-components";
      import "@authing/vue-ui-components/lib/index.min.css";
    
      export default {
        components: {
          AuthingGuard,
        },
        data() {
          return {
            appId: "AUTHING\_APP\_ID",
            config: {
              apiHost: "https://core.your-authing-service.com",
            },
          };
        },
      };
    </script>
    

    ¶ 在线体验


    ¶ 获取帮助

    Join us on forum: #authing-chat (opens new window)

    本文是否有解决您的问题?

    如果遇到其他问题,你可以在 authing-chat/community 联系我们。

    • 快速开始
    • 导出 authing-js-sdk
    • 属性列表
    • 事件列表
    • 私有化部署
    • 在线体验
    • 获取帮助

    用户身份管理

    集成第三方登录
    手机号闪验 (opens new window)
    通用登录表单组件
    自定义认证流程

    企业内部管理

    单点登录
    多因素认证
    权限管理

    开发者

    开发文档
    框架集成
    博客 (opens new window)
    GitHub (opens new window)
    社区用户中心 (opens new window)

    公司

    服务状态
    15559944612
    sales@authing.cn
    北京市朝阳区北辰世纪中心 B 座 16 层(总)
    成都市高新区天府五街 200 号 1 号楼 B 区 4 楼 406 室(分)

    京ICP备19051205号

    beian京公网安备 11010802035968号

    © 北京蒸汽记忆科技有限公司