MessageVerify 验证码弹窗sdk接入说明

sdk简介

本 SDK 提供以下核心功能：

• 环境指纹：生成设备唯一标识
• 敏感接口二次验证弹窗：增强交易安全性
• 重新登录弹窗：处理用户登录失效场景

相关接入文档：

sdk接入文档

安装

pnpm i @yqg/message-verify

使用

1. 环境指纹

基础接入

import { initFingerprint } from '@yqg/message-verify';

// 在拦截器中设置请求头
const fp = await initFingerprint();
http.defaults.headers.common['X-Device-Fingerprint'] = fp;

2. 重新登录弹窗

参数说明

| 字段名称 | 含义 | 是否必填 | 默认值 | | ------------- | ------------- | ------ | ------ | | goLogin | 拉起重登方法 | 是 | - |

基础接入

import { createReLoginModal } from '@yqg/message-verify';
// fintopia-web内项目接入可直接引用，独立项目请自定义
import { YQG_NEED_RELOGIN } from 'yqg-common/core/YqgStatus';

// 在响应拦截器中处理
http.interceptors.response.use(response => {
  if (response.data.code === YQG_NEED_RELOGIN) {
    createReLoginModal({
      goLogin: () => {
        // 自定义登出逻辑
        window.location.href = '/login';
      },
    });
  }
  return response;
});

3. 敏感接口二次验证弹窗

参数说明

| 字段名称 | 含义 | 是否必填 | 默认值 | | ------------- | -------------------------------------------------- | ------ |------------------ | | detail | 验证弹窗所需的业务数据（如验证码内容、提示等） | 是 | - | | config | 本次请求的配置信息（便于弹窗内重试或补充请求） | 是 | - | | http | 全局 http 实例，供弹窗内部发起后续请求 | 是 | - | | verifyPromise | 用于暂停/恢复请求的promise | 是 | - | | lang | 多语言，支持'zh'（中文）、'en'（英文）、'id'（印尼 | 是 | 'zh' | | sendApi | 支持自定义重新发送验证码接口，多在系统中存在/admin代理时使用 | 是 | '/admin/sms/send' |

基础接入

// fintopia-web内项目接入可直接引用，独立项目请自定义
import {
  YQG_STATUS_CODE_NEED_SEND_MESSAGE_VERIFY,
  YQG_STATUS_CODE_NEED_INSERT_MESSAGE_VERIFY
} from 'yqg-common/core/YqgStatus';
import { VerifyHandler } from '@yqg/message-verify';

// 创建 promise 控制器
const verifyPromise = { current: null };

// 响应拦截器配置
http.interceptors.response.use(response => {
  VerifyHandler.getResponse(response);
  
  switch (response.data.code) {
    case YQG_STATUS_CODE_NEED_SEND_MESSAGE_VERIFY:
    case YQG_STATUS_CODE_NEED_INSERT_MESSAGE_VERIFY:
      return VerifyHandler.createModal({
        data: response.data?.detail,      // 从响应获取业务数据
        config: response.config,           // 原始请求配置
        http,                             // HTTP 实例
        verifyPromise,                    // Promise 控制器
        sendApi: '/custom/sms/send'       // 自定义发送接口
      });
    default:
      return response;
  }
});

NPM scripts

pnpm install: 安装依赖 pnpm dev: 启动项目 pnpm build: 编译项目 npm publish: 发布项目 pnpm release:beta: 构建并发布beta测试版本