OTP Code Component

Google Authenticator 验证组件，基于 Web Components 实现。

安装

npm install otp-code-component

使用方法

React

import { defineCustomElements } from 'otp-code-component/loader';

// 注册组件
defineCustomElements();

// 在组件中使用
const AuthPage = () => {
  return (
    <google-auth
      access-token="your-access-token"
      get-qrcode-url="your-qrcode-url"
      verify-code-url="your-verify-code-url"
    />
  );
};

Vue

import { defineCustomElements } from 'otp-code-component/loader';

// 注册组件
defineCustomElements();

// 在组件中使用
<template>
  <google-auth
    :access-token="accessToken"
    get-qrcode-url="your-qrcode-url"
    verify-code-url="your-verify-code-url"
  />
</template>

API

属性

| 属性名 | 类型 | 必填 | 说明 | |--------|------|------|------| | access-token | string | 是 | 访问令牌 | | get-arcode-url | string | 是 | 获取绑定二维码接口路径 | | verify-code-url | string | 是 | 校验 code 接口路径 |

事件

| 事件名 | 参数 | 说明 | |--------|------|------| | authSuccess | { code: number, message: string, data: { is_pass: boolean } } | 验证成功回调 | | authError | { code: number, message: string } | 验证失败回调 |

自定义样式

google-auth {
  --ga-primary-color: #007bff;
  --ga-background-color: #ffffff;
  --ga-text-color: #333333;
  --ga-border-color: #dddddd;
  --ga-error-color: #dc3545;
}