Authing 低代码登录组件 Guard Web 3.0 版本全新上线

据相关数据显示,30% 的用户在遇到登录问题时会选择离开,超出 10% 的交易被放弃是由于缺乏安全信任。

Authing 是以开发者为中心,基于云原生架构的 IDaaS 产品,帮助数千万企业和开发者千倍级提升生产效率。

Guard 通过低代码方式快速生成 UI 精美的登录表单,为你的应用快速嵌入多种高可用的登录与认证能力。

开发者可以定制登录体验、配置注册页面以及多因素身份验证,也可以轻松添加各种社会化登录方式实现无缝登录,节约 90% 开发时间,降低安全风险。

去年 12 月,Authing 更新了 Guard Android 端(详情请点击:Authing 低代码登录组件 Guard Android 版已上线),助力移动端开发者享受同样便捷的开发体验。近期,Guard Web 3.0 版正式发布,我们对嵌入式 Guard 做了功能升级,提高了系统安全性;对托管式 Guard 做了界面更新,升级后的登录界面操作方便快捷。

你可以使用 npm / yarn 下载,第一时间进行体验:

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

01

托管式 & 嵌入式 Guard 组件

你可以通过两种方式应用 Authing 提供的登录注册能力:托管式 Guard 和嵌入式 Guard 组件。

托管式 Guard 组件

最简单,最安全的集成方式。对于大多数集成,建议使用 Authing 托管的登录流程。

你的业务系统将用户重定向到 Authing,在此用户进行身份验证,然后重定向回在控制台配置的应用回调连接。

此设计被认为是安全性最佳实践。在自定义配置方面,托管模式提供了中等程度的登录注册表单自定义配置,可通过控制台配置和 CSS 进行界面自定义。

嵌入式 Guard 组件

是灵活性和集成之间的最佳平衡。内嵌登录组件由 Authing 构建和更新,使用行业最佳实践安全性设计,仅需要几行 JavaScript 代码就可以集成到你开发的项目中。它可以直接从 CDN 或 NPM 加载,也可以从源代码构建。

Guard 同时支持 React、Vue、Angular 及原生 JavaScript 命令式调用等多种集成模式,在你的任何项目中都可以无缝集成并享有高度自定义灵活性。其具备以下特性:

轻量级:所有资源打包起来只有几百 kb
定制化:可以支持完整的 UI 自定义功能
响应式:兼容移动端和 PC 端网页

02

嵌入式 Guard 组件新功能上线

由于嵌入式 Guard 组件能够灵活嵌入开发者的各种应用场景,便于进行修改和编辑,因此具有广泛的需求。

本次更新主要针对 Web 端 Guard 嵌入式组件,我们新上线了以下功能:

MFA 相关功能实现

MFA 中支持人脸识别 & 活体检测

开启 MFA 后,在首次登录之后,用户还会被提示需要进行第二次身份验证。本次 Guard 组件的 MFA 模块新增人脸识别验证功能,通过活体检测判断生物特征因素,实现更高安全级别的身份验证。

电子邮箱绑定验证

支持绑定邮箱进行 MFA 验证,用户发送邮箱验证码并完成输入后即可完成。

支持 TOTP 验证器的下载

支持绑定 OTP 进行 MFA 验证,可以直接在 Guard 组件中完成跳转至 TOTP 的下载页面并完成绑定,一站式操作,无需跳离页面单独绑定。

登录安全策略

增加登录安全策略的相关功能

包括账号锁定和图形验证码两种安全策略,可以自定义的设置开启安全策略所需的条件。开启「图形验证码」后,当用密码错误 / 登录失败在指定周期内达到次数上限后,用户需要输入图形验证码后才能登录:

开启「账号锁定」后,当用密码错误 / 登录失败在指定周期内达到次数上限后,账号将自动被锁定,用户需要联系管理员解锁账号再登录:

首次登录修改密码

管理员在后台创建用户后,用户在首次登录时系统会自动提示用户需要修改密码,并通过密码安全策略确保用户修改后的密码受到高等级的安全保护。

密码轮换策略

开启密码轮换策略后,你可以要求用户在指定的密码轮换周期内,必须使用不同于原来密码的新密码;系统将在达到指定的时间节点时,在登录界面提示用户并完成密码更新。

更多新增功能

支持多租户相关的功能

新上线多租户相关功能配置区,创建租户后可通过租户身份登录应用,并支持对租户登录组件进行独立的品牌化配置。

使用自定义 CSS 更好的进行定义样式

支持更强大的自定义 CSS 配置功能,让你能够更好的定义登录页面样式。

支持注册登录协议

支持在控制台配置注册 / 登录协议,用户需要勾选后才能实现注册 / 登录,确保用户已知悉应用的《隐私协议》、《服务条款》等相关内容,规避法律风险。

Guard 组件代码实例

旧版 Guard 的使用方式:


import React from 'react'
import { AuthingGuard } from '@authing/react-ui-components'
import '@authing/react-ui-components/lib/index.min.css'const App = () => {const appId = 'Authing_Appid'const config = {host: 'https://core.you-authing-service.com',}return <AuthingGuard appId={appId} />
}

新版 Guard 的使用方式:

import React from 'react'
import { Guard } from '@authing/react-ui-components'
import '@authing/react-ui-components/lib/index.min.css'const App = () => {const appId = 'Authing_Appid'
const config = {host: 'https://core.you-authing-service.com',}
return <Guard appId={appId} />
}

config 中我们移除了一些参数,具体的字段下表所示:

参数名 状态 兼容方式
appHost 移除 使用 host 字段代替即可

更详细的关于新旧版 Guard 组件之间的区别,请点击查看 官方文档

03

托管式 Guard 界面设计深度优化

对于托管式 Guard,本次更新侧重界面优化,提高开发者登录体验。

登录

验证码登录

密码登录

扫码登陆

注册

手机号注册

邮箱注册

04

未来规划

Authing 开放平台高级工程师孙天祥表示:本次更新,从产品功能和使用体验上对嵌入式 Guard 组件进行了全方位完善,Authing 嵌入式和托管式登录框功能双向对齐,为全场景下的用户提供更加一致的使用体验。

Authing 产品负责人佟野表示:我们会一直秉承着开发者友好的初心,持续迭代 Guard 组件,推出更加灵活可配置的 PaaS 化版本,开发者只需在页面中’拖拖拽拽’,以 Low Code,甚至 No Code 的方式来打造自己的登录界面和流程,为业务持续赋能。

Authing 低代码登录组件 Guard Web 3.0 版本全新上线相关推荐

  1. 微搭低代码自定义组件开发教程

    低代码以其组件丰富著称,但是在实际开发的过程中有时候官方组件开发进展也不是特别快,尤其我们需要一些特色的小程序组件时要等官方更新可能来不及.为了保证项目进度,就不得不自己封装一些组件. 正好微搭低代码 ...

  2. 腾讯微搭低代码自定义组件库体验

    公测期间,很多小伙伴关心是否会开放第三方组件库,今天,它来了.权限开放后,运营同学第一时间@了博主,博主也马上进行了试用.学习嘛,就是要积极进取才有可能提高. 升级cli 一般新功能我们第一时间需要做 ...

  3. 低代码里程碑版—JeecgBoot 3.4.3 版本发布,低代码功能专项升级

    项目介绍 JeecgBoot是一款企业级的低代码平台!前后端分离架构 SpringBoot2.x,SpringCloud,Ant Design&Vue,Mybatis-plus,Shiro,J ...

  4. JeecgBoot低代码平台 3.5.2,仪表盘版本发布!重磅新功能—支持在线拖拽设计大屏和门户

    项目介绍 JeecgBoot是一款企业级的低代码平台!前后端分离架构 SpringBoot2.x,SpringCloud,Ant Design&Vue3,Mybatis-plus,Shiro, ...

  5. fortify扫描java_fortify代码扫描使用教程(20.0版本)

    先下载20.0版本的fortify,下载地址:http://www.pc6.com/softview/SoftView_837967.html 下载后傻瓜式安装 安装完成后,打开Audit Workb ...

  6. 有了这款低代码工具,开发可以告别996啦

    最近低代码.零代码很火,网络一搜,各家都鼓吹自己零代码开发的平台.确实,近十年IT的发展以及互联网产品的推动,使得很多细分领域的工具都呈现出一种简单易用少开发轻量化的趋势. 笔者自己也在IT行业做了1 ...

  7. HighNewTech:低代码(0代码/无代码,无需代码)开发的简介以及如何选择最合适的低代码开发工具

    High&NewTech:低代码(0代码/无代码,无需代码)开发的简介以及如何选择最合适的低代码开发工具 导读:在互联网时代,博主经常反思一个问题,如何跟进这个快速发展的时代才能不会被淘汰?博 ...

  8. 低代码发展专访系列之二:两三年内会出现“现象级”低代码产品吗?

    前言:2019年开始,低代码爆火.有人认为它是第四代编程语言,有人认为它是开发模式的颠覆,也有人认为是企业管理模式的变革--有很多声音,社区讨论很热烈.CSDN 随后展开低代码平台产品系列活动,包括低 ...

  9. 低代码平台,JeecgBoot v3.0版本发布—新里程牌开始,迎接VUE3版本到来

    项目介绍 JeecgBoot是一款基于代码生成器的低代码平台!前后端分离架构 SpringBoot2.x,SpringCloud,Ant Design&Vue,Mybatis-plus,Shi ...

最新文章

  1. 为什么有些人非技术出身,却能带好团队?
  2. 20135337朱荟潼 Linux第八周学习总结——进程的切换和系统的一般执行过程
  3. CSS滤镜实现火狐、IE兼容
  4. 前序遍历(递归、非递归)、层序遍历(递归、非递归)
  5. 从《跨过鸭绿江》中看程序员的时间管理实践
  6. Git得基本使用方法add、commit、push、checkout以及Pull
  7. Zipkin 存储追踪数据至 MySQL
  8. ASP.NET 无刷新上传文件
  9. Spring实战——Profile
  10. javascript中在链表中向前(向后)移动n个节点
  11. microsoft edge怎么截长图_实用技能 | Fireshot 网页截长图工具
  12. 【python教程入门学习】Pygame下载和安装
  13. dts音效大师安卓版_dts音效大师手机app下载-dts音效大师安卓手机app下载-电玩之家...
  14. 2012 年美国总统候选人政治献金 数据分析(numpy+pandas)
  15. live555直播startplaying
  16. Node四种动态加载JS代码方法性能对比
  17. C# MethodInvoker委托的使用
  18. mysql locate不走索引_面试--mysql的模糊查询优化、like、locate、position、instr、find_in_set...
  19. java图片去掉文字_java解出图片中的文字
  20. vscode的下载速度会特别慢问题处理

热门文章

  1. 云栖大会幕后花絮,好玩的都在这里,且看且珍惜
  2. Cannot redeclare C() (previously declared in .
  3. 深入解析最短路径算法
  4. python 3.7 搓螺旋丸
  5. get一个小技巧,教你如何在typora写文章上传图片到博客上
  6. 计算机控制技术王超,王超 研究生副院长
  7. 机器学习笔记(四)决策树剪枝
  8. 估计问题 二项分布 P
  9. 关于java博网即时通讯软件的设计与实现
  10. Postman实现接口测试(附项目实战)