模糊 KYI 部件 SDK

将 Bluprynt 的 KYI( 了解您的发行人) 校验部件嵌入您的网络应用程序 .

安装

npm install @bluprynt/kyi-widget-sdk

yarn add @bluprynt/kyi-widget-sdk

pnpm add @bluprynt/kyi-widget-sdk

KYI 部件 SDK 如何工作

1. 向 Bluprynt 询问 SECRET_KEY 作为伙伴融合的一部分.
2. 在您的后端执行 Access Token JWT 生成 .
3. 使用 KYI 部件 SDK 并代表您的用户生成 Access Token .

使用 游乐场 测试 KYI 部件 SDK.

快速启动

1. 生成访问托肯(服务器侧)

如果您在后端使用Node.js, 请随意使用此软件包生成符号 :

// server.ts (Node.js)
import { generateToken } from "@bluprynt/kyi-widget-sdk/server";

const accessToken = await generateToken({
  issuer: "your-partner-id",
  secretKey: process.env.BLUPRYNT_SECRET_KEY!,
  userId: "user-123", // Your internal user identifier
  expiresIn: 3600, // Optional: token expiry in seconds (default: 1 hour)
});

// Return token to your frontend
res.json({ accessToken });

使用其他平台而不是Node.js是正常的,但是你需要自己生成JWT,并用它签名 SECRET_KEY 你从布鲁普林特那里得到的 注意信使的有效载荷必须遵循结构:

{
  "sub": "user-123",
  "iss": "your-partner-id",
  "iat": 1766146154,
  "exp": 1766149754
}

2. 嵌入部件( 外侧)

使用访问令牌嵌入 KYI 部件 :

// client.ts (Browser)
import { kyi } from "@bluprynt/kyi-widget-sdk";

// Fetch token from your backend
const { accessToken } = await fetch("/api/kyi-token").then((r) => r.json());

// Embed the widget
const widget = kyi("modal", "kyi", accessToken, {
  onClose: () => {
    console.log("Widget closed");
  },
  onError: (error) => {
    console.error("Error:", error);
  },
});

// Later: clean up when done
widget.destroy();

部件模式

内置模式

直接将部件嵌入指定的容器元素:

const container = document.getElementById("kyi-container");

const widget = kyi("inline", "kyi", accessToken, {
  parentElement: container,
});

<div id="kyi-container" style="height: 600px;"></div>

模式

在居中模式覆盖中显示部件 :

const widget = kyi("modal", "kyi", accessToken, {
  onClose: () => console.log("Modal closed"),
});

绘图模式

在右侧的滑入面板中显示部件 :

const widget = kyi("drawer", "kyi", accessToken, {
  onClose: () => console.log("Drawer closed"),
});

部件范围

这个 scope 参数决定要显示的页面 :

// Start a new KYI application
kyi("modal", "kyi", accessToken);

// View assets
kyi("modal", "asset-list", accessToken);

// View wallets
kyi("inline", "wallet-list", accessToken, { parentElement: container });

检查 KYI 状态( 服务器侧)

从后端查询当前用户的 KYI 状态 :

import { checkStatus } from "@bluprynt/kyi-widget-sdk/server";

const status = await checkStatus({
  issuer: "your-partner-id",
  secretKey: process.env.BLUPRYNT_SECRET_KEY!,
  userId: "user-123",
});

console.log(status);

API 参考

kyi(mode, scope, accessToken, options?)

创建 KYI 部件实例 .

参数:

选项 :

回返情况: KYIWidget

generateToken(options) (服务员侧)

为部件认证创建 JWT 访问令牌 .

参数:

回返情况: Promise<string> - 签名的JWT标志

checkStatus(options) (服务员侧)

为用户检查 KYI 验证状态 .

参数:

回返情况: Promise<KYIStatus>

框架实例

反应

import { useEffect, useRef } from "react";
import { kyi, type KYIWidget } from "@bluprynt/kyi-widget-sdk";

function KYIButton({ accessToken }: { accessToken: string }) {
  const widgetRef = useRef<KYIWidget | null>(null);

  const openWidget = () => {
    widgetRef.current = kyi("modal", "kyi", accessToken);
  };

  useEffect(() => {
    return () => widgetRef.current?.destroy();
  }, []);

  return <button onClick={openWidget}>Start KYI</button>;
}

警卫

• 永远不要暴露你 SECRET_KEY 在客户端. 托肯一代必须发生在你的后端.
• 访问符是寿命短的JWT. 为每个部件会话创建新令牌 .
• 部件使用 postMessage 安全iframe通讯.

捐款

欢迎捐款! 请看 捐款额 准则.

建造时小心 模糊