使用友好的 Captcha 钩头
使用量
库有前端和后端的功能. 两人各自独立工作.
前端
包含 useCaptchaHook() 在选中文件中。 从那里可以查询部件
从钩子上写出来 让你用你的形式来管理和使用.
请注意 friendly-challenge 库是自1.2.0版本以来必要的对等依赖
钩子预期以下属性:
siteKey: string;
endpoint?: FC_PUZZLE_EP; enum for the currently available endpoints (EU & global)
language?: keyof typeof localizations | Localization;
startMode?: "auto" | "focus" | "none";
showAttribution: boolean;
钩子提供以下参数:
- `CaptchaWidget' 返回 HTML 认证部件. - `Captcha Status.Solution'用于确定谜题是否已解决(`string')或未解决(`null') - `captchastatus.error'用于确定在解决(`string')或未解决(`null')时发生的错误
CaptchaWidget 自定义道具
当 CaptchaWidget ,您可以添加额外的属性 :
props: HTMLAttributes 这包括所有可能的html属性. 因此,这是添加 className 属性,
将自定义样式添加到外侧 Captcha 容器。 您可以在此直接添加 TailwindCSS 类或定义自定义类
项目的.css文件中的未来样式.
customWidgetStyle 允许直接适用于组件的特定样式最多有三个属性:
icon部件的图标button部件的提交按钮text部件内的所有文本元素
这些属性都是可选的,如果使用的话,它们期望一个cs对象像下面的例子:
CustomWidgetStyle = { icon: {color: "green", background: "yellow"}, text: {color: "blue"} }
后端
后端明智 此库提供了使用 Fellower Captcha 校验的函数 API 检查所提交的拼图解是否有效 。 它还原出一个布尔来继续 处理您自己的代码.
该函数期望以下属性:
endpoint?: FC_VERIFICATION_EP; enum for the currently available endpoints (EU & global)
solution: string;
secret: string;
sitekey?: string;
httpPostFetcher: (see further down)
httpstFetcher 页面
后端期望获取器函数为参数 。 此功能由用户提供 并用于向 fc 校验服务器发送 http post 请求。 它应该符合以下设计:
function fetcherExample(
endpoint: string,
requestBody: { solution: string; secret: string; siteKey: string },
headers: { 'Content-Type': 'application/json'; 'Accept': 'application/json'; }
) => Promise<{ success: boolean; errors: any; } | null>
实例
我们提供了以下基本例子: /examples 文件夹,关于如何使用此库 反应 财务报告和审定财务报表 下一个js。 。 。 .
这两个示例都用TypeScript来书写,并保持了简单易读,从此库中呈现函数的效用.
如果您想要运行您的机器上的例子, 请确保读取相应的 README 文件,
增加所有需要.