Auth0 ACUL JS SDK (英语)

这个 Auth0 ACUL JS SDK (英语) 允许您与 Universal 登录的高级自定义工作.

它简化了将认证屏幕(登录,签注,无密码,密码录入等)整合到您的网络应用中,为无缝执行提供了必要的工具.

页:1

• 快速启动 - 我们的指南设置 SDK 在你的应用程序.
• 指南 - 更多常见案例指南
• 实例 - 不同定制用途的代码片段.
• 问题 - 对有关Auth0 ACUL JS SDK的常见问题找到答案.

开始

先决条件

在开始前,确保您有以下设置:

1. 自定义域: 确保为您的 Auth0 租户配置自定义域 .
2. 屏幕配置: 在您的 Auth0 流中设置所需的认证屏幕 .
   关于详细步骤,请参见 配置 ACUL 屏幕。 。 。 .

安装

您可以轻松地安装 SDK 通过 无数字 :

npm install @auth0/auth0-acul-js

在安装 SDK 后, 您可以导入您想要配置的相关屏幕模块

导入屏幕

// Default import of any particular screen, eg: login-id screen
import  LoginId  from '@auth0/auth0-acul-js/login-id'; 

// Named import of any screen
import  { LoginId }  from '@auth0/auth0-acul-js'; 

// Default import of all screens
import  * as Screens  from '@auth0/auth0-acul-js'; 

注:关于所有屏幕导入路径的更详细情况,请参见: FAQ的电话。 。 。 .

使用量

将功能添加到屏幕

让我们看看在逻辑上增加逻辑的例子 login-id 屏幕.

示例: 在登录按钮中添加逻辑

  import  LoginId  from '@auth0/auth0-acul-js/login-id';

  const loginIdManager = new LoginId();

  // Trigger the login method on button click
  loginIdManager.login({
    username: "testUser"
  });

获取登录的强制字段列表

const { transaction } = loginIdManager
const requiredFields = transaction.getActiveIdentifiers();

整合登录的社会连接

允许用户通过社交连接(如Google,Facebook)登录,使用以下片段

import  LoginId  from "@auth0/auth0-acul-js/login-id";
const loginIdManager = new LoginId();

// Check if alternateConnections is available and has at least one item
if (!loginIdManager.transaction.alternateConnections) {
  console.error('No alternate connections available.');
}

// Select the first available connection (users can select any available connection)
const selectedConnection = alternateConnections[0];

// Log the chosen connection for debugging or informational purposes
console.log(`Selected connection: ${selectedConnection.name}`);

// Proceed with social login using the selected connection
loginIdManager.socialLogin({
  connection: selectedConnection.name,
})

登录处理出错

一个顶级的获取器功能, getErrors,可用于在后端验证失败时检索详细的认证错误.

import Login from "@auth0/auth0-acul-js/login";

const loginIdManager = new Login();

const errors = loginIdManager.getErrors();
if (errors) {
  console.error("Login failed:", errors);
}

也可以使用 transaction.errors 可在屏幕上直接为每个屏幕提供上下文.

import Login from "@auth0/auth0-acul-js/login";

const loginIdManager = new Login();

const errors = loginIdManager.transaction?.errors ?? [];
if (errors) {
  console.error("Login failed:", errors);
}

更多例子请访问我们 实例

用 Boilerplate App 快速启动

起来,用我们的锅炉板启动模板快速运行: 链接

API 参考

屏幕

帮助函数

本节记录了屏幕实例在 Auth0-acul-js 中曝光的帮助方法和属性 .

上下文属性

• user- 现行交易的当前用户/简介数据.

• tenant- 租户配置和元数据(领域、区域、设置).

• branding- 品牌/主题配置(颜色、标志、字体、视觉标志). branding.themes.default.identifiers 附加标识符显示首选项( q)loginDisplay, (中文(简体) ), otpAutocomplete, (中文(简体) ), phoneDisplay 与 masking 财务报告和审定财务报表 formatting; 计 数 identifiers 当租户配置其中任何一个时,键会被省略.

• client- 应用程序客户端元数据和设置.

• countryCodes- 现有的电话国家代码(available,每个带 code, (中文(简体) ), label, (中文(简体) ), dialCode)和建议的默认(recommended(三); null 没有提供。 在注册和登录屏幕上,通过选中的 code 恢复为 phoneCountryCode 与电话号码一起从一个屏幕上提交,而不是通过路由 pickCountryCode()打开 login 财务报告和审定财务报表 login-id 它需要与 identifierType: 'phone'。 。 。 .

• organization- 适用的组织背景.

• prompt- 当前快速/流程配置 .

• untrustedData- 未经信任的投入(URL参数、预填表值).

• screen- 当前的屏幕元数据和配置.

• transaction- 交易/流程状态、会话标识符和相关数据.

• experiment- 当前屏幕的主动实验中心试验,或 null 当没有实验活动或屏幕没有选择通过 context_configuration. 暴露指定的变异(experimentId, (中文(简体) ), variationId, (中文(简体) ), variationName, (中文(简体) ), variationDescription, (中文(简体) ), isControl和解决 config (一个实验定义的地图——通过它读取一个密钥的解析值) value 财产,例如:. experiment.config?.['show_passkey']?.value,而且总是无效检查 experiment 首config 可能缺席,所以要小心 ?. 页:1 分会 isControl 使基线对治疗UI.

标识管理

• getLoginIdentifiers()数字 : 获取可用的登录标识类型( 电子邮件、 电话、 用户名)

• getSignupIdentifiers(): 获取可用的注册标识符类型, 每个类型都有其 required 状态

表格验证

• validatePassword(password: string)数字 : 实时密码强度验证
• validateUsername(username: string): 用户名格式和可用性验证

外交部/推动投票和重新发送

• pollingManager(): 开始并管理对外交部推动挑战的投票.

• resendManager() 获得此屏幕的超时管理功能重传.

共同帮助者

• getCurrentScreen()
  返回当前屏幕上下文数据 .

• getCurrentThemeOptions() 从品牌上下文中获取具有平整配置的当前主题选项. 仅返回样式符号( E)colors, (中文(简体) ), fonts, (中文(简体) ), borders, (中文(简体) ), pageBackground, (中文(简体) ), widget)——读 branding.themes.default.identifiers 用于标识符显示首选项.

• getErrors() 从交易上下文获取当前错误

* 反馈

捐款

我们赞赏反馈和对这次再投资的贡献! 在开始前,请参看以下内容:

• Auth0的一般贡献准则
• Auth0 行为守则准则

提出问题

请提供反馈或报告错误 提出我们的问题追踪器。 。 。 .

脆弱性报告

请不要在公共 GitHub 问题跟踪器上报告安全漏洞 。 这个 负责任的披露程序 详细说明披露安全问题的程序.

Auth0是一个易于执行,可适应的认证和授权平台. 学习更多退房 为什么是Auth0?

这个项目根据麻省理工学院的许可证获得许可。 见 自由主义 需要更多信息的文件.