@ 连接- xyz/ auth- js

一个JavaScript SDK,可以使前端应用与Connect Auth产品无缝地相接.

Connect Auth为加密存款提供了安全,自定义的认证流程. 学习更多在 连接 Auth 文档。 。 。 .

安装

国家预防机制(建议)

npm install @connect-xyz/auth-js

import { Auth } from '@connect-xyz/auth-js';

维娅 CDN

您可以导入索引文件中的脚本并使用它提供的 Auth 类 .

<script
  type="module"
  src="https://sdk.connect.xyz/auth-web/index.js"
></script>

或者你可以直接导入你的javascript代码.

import { Auth } from 'https://sdk.connect.xyz/auth-web/index.js';

开始

遵循这些简单步骤将 Connect Auth 集成到您的前端应用程序中 :

1. 导入 Auth 模块

import { Auth } from '@connect-xyz/auth-js';

1.1 通过CDN导入

import { Auth } from 'https://sdk.connect.xyz/auth-web/index.js';

2. 初始化 Auth 模块到您的 App

// Create an Auth instance with configuration
const auth = new Auth({
  jwt: 'your-jwt-token',
  env: 'production', // or 'sandbox'
  theme: 'auto', // 'auto' (default), 'light', or 'dark'
  onError: ({ errorCode, reason }) => {
    console.error('Auth error:', errorCode, 'Reason:', reason);
  },
  onClose: () => {
    console.log('Auth widget closed');
  },
  onDeposit: ({ data }) => {
    console.log('Deposit completed:', data);
  },
  onEvent: ({ type, data }) => {
    console.log('Event received:', type, data);
  },
  onLoaded: () => {
    console.log('Auth widget loaded and ready');
  },
});

// Render the widget to a container element
const container = document.getElementById('auth-container');
await auth.render(container);

// Update configuration dynamically
auth.updateConfig({
  jwt: 'new-jwt-token',
  onError: newErrorHandler,
});

// Check if rendered
if (auth.isRendered()) {
  console.log('Widget is active');
}

// Clean up when done
auth.destroy();

2.1 使用打字符(可选)

import { Auth, AuthConfig } from '@connect-xyz/auth-js';

const config: AuthConfig = {
  jwt: 'your-jwt-token',
  env: 'sandbox',
  theme: 'dark', // 'auto' (default), 'light', or 'dark'
  onError: ({ errorCode, reason }) => {
    // Handle error with type safety
  },
  onDeposit: ({ data }) => {
    // Handle deposit with type safety
  },
};

const auth = new Auth(config);

API 参考

Auth 部件道具

构造器

new Auth(config: AuthConfig)

用提供的配置创建新的 Auth 实例 .

参数

• config (AuthConfig):配置对象
  • jwt (字符串,需要):JWT认证标志
  • env (字符串,可选):环境 - “ 生产” (默认) 或“ 散装箱”
  • theme (弦,可选): 主题模式 - “ 自动” (默认)、 “ 光” 或 “ 暗”
  • onError (职能,可选): 回调错误
  • onClose (职能,可选): 关闭回调
  • onDeposit (职能,可选): 回扣存款
  • onEvent (职能,可选): 一般事件召回
  • onLoaded (职能,可选): 装入部件并准备就绪时召回

方法

render(container: HTMLElement): Promise<void>

将 Auth 部件渲染到指定的容器元素.

await auth.render(document.getElementById('auth-container'));

updateConfig(config: Partial<AuthConfig>): void

更新已渲染部件的配置.

auth.updateConfig({
  jwt: 'new-token',
  onError: newErrorHandler,
});

destroy(): void

从 DOM 中删除部件并清理资源.

auth.destroy();

isRendered(): boolean

返回当前部件是否已打开 .

if (auth.isRendered()) {
  // Widget is active
}

getConfig(): AuthConfig

返回当前配置的副本.

const config = auth.getConfig();
console.log('Current JWT:', config.jwt);

回调函数

关于召回事件及其有效载荷的详情,见 Auth SDK 回调文档。 。 。 .

错误

当 Auth 部件出错时调用 .

onError: ({ errorCode, reason }) => {
  // errorCode: Error code
  // reason: Human-readable error description
};

关闭

当用户关闭 Auth 部件时调用 .

onClose: () => {
  // Handle close event
};

保存

收到押金就打电话.

onDeposit: ({ data }) => {
  // data: Object containing deposit details
};

活动

从 Auth 部件调用一般事件 .

onEvent: ({ type, data }) => {
  // type: Event type string
  // data: Event-specific data object
};

已登录

当 Auth 部件已完全装入并准备好用户交互时调用 。 此调用在部件初始化后显示装入状态或执行动作时有用 .

onLoaded: () => {
  // Widget is fully loaded and ready
};

浏览器支持

• 克罗梅/第90号+
• Firefox 88+ (英语)
• 萨法里14+
• 所有有 Web 组件支持的现代浏览器

更多信息与支持

欲了解有关Connect Auth的全面文献或支持,请访问 页 次。 。 。 .