免费注册,打造高效身份管理
博客/开发者/Authing 社区好文推荐:如何 15 分钟开发一个很棒的登录系统
Authing 社区好文推荐:如何 15 分钟开发一个很棒的登录系统
Authing 官方2021.07.22阅读 1254

据 Stripe 的一项全球研究,开发人员每周近 75% 的时间花在维护任务上。低代码开发有助于解决组织数字化转型的许多常见挑战:比如提高开发的敏捷性,更快地推出项目抓住商机,更轻松地替换或升级旧系统的关键组件,极高的扩展性等。

到 2025 年将有 60% 的 CIO 使用低代码工具,超过 65% 的应用程序开发将在低代码环境中进行。

Authing 的低代码方式,可以帮助开发者在几分钟内实施身份认证。

如果您正希望解决身份管理的问题,Authing 已经被验证提供了一个很棒的方法。以下三种方式,帮助您实现出色的登录认证:

No Code 

使用 Authing 托管登录页,无需一行代码,您可以在几分钟内将为您的用户定制登录体验,配置注册页面,自定义配置手机/密码/扫码以及多种社会化登录方式、自定义密码强度配置、主题色配置、注册信息配置、多因素身份验证等……

                                                示例:在应用配置中修改登录注册方式

                                                      示例:在自定义密码强度中配置密码强度

 

Low Code 

使用 Authing 提供的内嵌登录组件,可以集成到您的 Web 和移动端项目中,可以支持完整的 UI 自定义功能,所有资源打包起来只有几百 kb。

内嵌登录组件由 Authing 构建和更新,使用行业最佳实践安全性设计,几行 JavaScript 代码就可以集成到您开发的项目中。它可以直接从 CDN 或 NPM 加载,也可以从源代码构建。Authing 登录组件同时提供 Javascript 原生、React、Vue 和 Angular 等多种集成模式。

您无需设置完整的开发环境,无需从头开始编写代码,通过运行在云端的 JavaScript 代码,可以让您扩展、自定义 Authing 能力;还有大量丰富的函数模板,帮助您快速上手;自定义数据库,使用自己的数据库保存用户数据;自定义处理用户注册、登录等行为监测……

                                                  示例:Authing Guard 自动从服务器拉取配置

                                                  示例:自动开启多因素认证

 Pro Code 
您可以随需调用 Authing 提供的 1000+ API 以及十余种语言和框架的 SDK 资源,基于此灵活地组合出适合的认证流程和自定义 UI 页面,快速集成预设的各种主流应用系统,为您的内部/外部用户实现统一身份管理,创造安全无缝的登录体验……
Authing 为前端开发者提供轻量级、开发者友好的 Auth SDK(支持 JavaScript/Node、Java、Python、PHP、C# 等语言),能够让您更灵活、快捷、安全地实现认证逻辑。
Authing 提供的托管登录页、嵌入登录组件、Auth SDK 底层能力都是通过 Authentication API 提供的。Authing Authentication API 支持两种调用方式:RESTful 和 GraphQL(端点为 https://core.authing.cn/graphql/v2),您也可以直接调用 Authentication API 实现认证逻辑。

以五分钟入微信网页授权登录为例 
体验入口:https://www.authing.cn/developer/

1. 开发准备
在微信公众平台后台 开发 -> 基本配置 获取开发者 ID (AppID) 和开发者密码(AppSecret)。
在微信公众平台后台 设置 -> 公众号设置 -> 功能设置 设置网页授权域名。
域名填写:core.authing.cn。
出于安全验证考虑,微信服务器需要和 Authing 服务器做一次请求验证,开发者需要下载 txt 文件,并记录文件名和文本内容。
最后,在 Authing 控制台 连接身份源 -> 社会化登录 开启微信网页授权登录,并填写配置信息。

                                                               示例:配置信息表单

2. 安装

使用 CDN 引入 authing-wxmp-sdk

  <script src="https://cdn.jsdelivr.net/npm/@authing/wxmp/dist/authing-wxmp-sdk.min.js"></script>

使用 npm / yarn

 npm install --save @authing/wxmp

或者

 yarn add @authing/wxmp

然后通过以下方式引入

  import AuthingWxmp from "@authing/wxmp";

3. 发起微信授权

先从 Authing 控制台中获取用户池 ID

const authingWx = new AuthingWxmp({
  userPoolId: 'YOUR_USERPOOLID',
})

调用 getAuthorizationUrl 方法获取微信授权登录链接,修改 window.location 跳转到微信登录授权页面

// 跳转到微信授权页面
window.location = authingWx.getAuthorizationUrl()

 4. 获取用户信息

// 若在回调页面 authingWx 未初始化,需要先初始化,具体初始化方式参考上文
const { ok, userinfo, message } = authingWx.getUserInfo()
if (ok) {
  // do with userinfo
  console.log(userinfo)
} else if (message) {
  // message 中包含了错误提示
  alert(message)
}

 5. 使用 token 维持登录状态

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

识别用户身份之后,可能还需要对该用户进行权限管理,以判断用户是否对此 API 具备操作权限。

6. 总结授权流程

· 开发者引导用户跳转到 Authing 设置的授权链接:

https://oauth.authing.cn/oauth/wechatmp/url:userPoolId

· Authing 和微信根据 OAuth 协议完成用户信息交互。

· Authing 将用户信息(包含 token)发送到开发者自定义的业务回调链接。

· 开发者使用 token 维持登录状态,检验 token 的合法性以及登录状态。

· 终端用户后续的请求将 token 携带上。

· 开发者在后端调用 Authing 提供的方法检验 token 的合法性以及登录状态。

· 根据 Authing 返回的登录状态和开发者自己的业务逻辑,对请求进行相应处理。

文章作者

avatar

Authing 官方

0

文章总数

authing blog rqcode
关注 Authing 公众号
随时随地发现更多内容
authing blog rqcode
添加 Authing 小助手
加入 Authing 开发者大家庭
authing
如有需求请添加身份顾问微信。
authing
authing
下载 Authing 令牌,体验快速登录认证!
免费使用
在线咨询
电话咨询