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

据 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 令牌,体验快速登录认证!
免费使用
在线咨询
电话咨询