@ 力学- labs- sdk/ 反应- native- captcha

Captcha 对使用 Dynamic 的 React 本地应用程序的部件进行挑战 .

提供自成一体 HCaptchaChallenge 财务报告和审定财务报表 TurnstileChallenge 组件使其提供者的部件在 react-native-webview 并将卡布查的标志还给Message后桥 将标志递给 @dynamic-labs-sdk/client是因为 setCaptchaToken 之前的签入方法 需要captcha.

安装

pnpm add @dynamic-labs-sdk/react-native-captcha

要求数 @dynamic-labs-sdk/client 财务报告和审定财务报表 react-native-webview。 。 。 .

使用量

读取活动提供者和站点密钥 getCaptchaSettings,然后生成匹配的挑战组件.

import { useState } from 'react';
import { View, Button } from 'react-native';
import { CaptchaProviderEnum, getCaptchaSettings, setCaptchaToken } from '@dynamic-labs-sdk/client';
import { HCaptchaChallenge, TurnstileChallenge } from '@dynamic-labs-sdk/react-native-captcha';

function SignInScreen() {
  const [captchaReady, setCaptchaReady] = useState(false);
  const settings = getCaptchaSettings();
  const siteKey = settings?.siteKey;

  const handleSignIn = async () => {
    // sendEmailOTP, auth.wallet.connect, etc.
  };

  if (!settings || !siteKey) {
    return <Button title="Sign in" onPress={handleSignIn} />;
  }

  const handleToken = (token: string) => {
    setCaptchaToken({ captchaToken: token });
    setCaptchaReady(true);
  };

  const Challenge =
    settings.provider === CaptchaProviderEnum.Hcaptcha
      ? HCaptchaChallenge
      : TurnstileChallenge;

  return (
    <View>
      <Challenge
        baseUrl="https://your-whitelisted-origin.com"
        siteKey={siteKey}
        onToken={handleToken}
        onError={(error) => console.error(error.message)}
      />
      <Button title="Sign in" disabled={!captchaReady} onPress={handleSignIn} />
    </View>
  );
}

这个 baseUrl 道具是部件文档的源头。 hCaptcha 和 Turnstile 站点密钥只渲染出白名单主机名, 因此将其设定为您添加到提供者站点配置中的域 .

构成部分

两个部分都接受 baseUrl, (中文(简体) ), siteKey, (中文(简体) ), onToken, (中文(简体) ), onError,可选 style 道具 (英语). onToken 当用户解决挑战时放出一次; onError 在挑战错误、 令牌过期 或 WebView 负载失败时放出一次 。 返回错误被键入( R)HCaptchaError 编号 : TurnstileError这样你就可以在 error instanceof HCaptchaError 或检查 error.message。 。 。 .

使用 style 覆盖默认高度、边框半径或其他容器样式的道具,以匹配应用程序的设计.

重试挑战

onToken 财务报告和审定财务报表 onError 每个安装部件最多一次起火。 如果您需要让用户在挑战错误或令牌过期后重试, 请卸载并重载组件, 例如通过递增反应 key数字 :

const [attemptKey, setAttemptKey] = useState(0);

<Challenge
  key={attemptKey}
  baseUrl="https://your-whitelisted-origin.com"
  siteKey={siteKey}
  onToken={handleToken}
  onError={(error) => {
    console.error(error.message);
    setAttemptKey((k) => k + 1);
  }}
/>