代码拉取完成,页面将自动刷新
基于虚拟机保护、设备特征识别和操作行为识别的新一代智能验证码,具备智能评分、抗 Headless、模拟伪装、针对恶意设备自动提升验证难度等多项安全措施,帮助开发者减少恶意攻击导致的数字资产损失,强力护航业务安全。
npm install yotest-react-sdk --save
当你使用 npm 进行安装后,你可以通过 import 直接引入
import React from "react";
import useYoTest from "yotest-react-sdk";
export default function App() {
const { render } = useYoTest({
accessId: "your accessId",
style: {
width: 300,
height: 40,
},
onSuccess({ token, verified }) {
console.log("success", token, verified);
},
onError({ code, message }) {
console.log("error", code, message);
},
});
return <div className="App">{render()}</div>;
}
import React from "react";
import useYoTest from "yotest-react-sdk";
export default function App() {
const { render } = useYoTest({
accessId: "your accessId",
product: "float",
style: {
width: 300,
height: 40,
},
onSuccess({ token, verified }) {
console.log("success", token, verified);
},
onError({ code, message }) {
console.log("error", code, message);
},
});
return <div className="App">{render()}</div>;
}
import React from "react";
import useYoTest from "yotest-react-sdk";
export default function App() {
const { render } = useYoTest({
accessId: "your accessId",
product: "popup",
style: {
width: 300,
height: 40,
},
onSuccess({ token, verified }) {
console.log("success", token, verified);
},
onError({ code, message }) {
console.log("error", code, message);
},
});
return <div className="App">{render()}</div>;
}
import React from "react";
import useYoTest from "yotest-react-sdk";
export default function App() {
const { render, verify } = useYoTest({
accessId: "your accessId",
product: "bind",
style: {
width: 300,
height: 40,
},
onReady() {
// 你也可以绑定事件,但需要注意:
// 一定要在onReady之后进行verify的调用
verify();
},
onSuccess({ token, verified }) {
console.log("success", token, verified);
},
onError({ code, message }) {
console.log("error", code, message);
},
});
return <div className="App">{render()}</div>;
}
import React from "react";
import useYoTest from "yotest-react-sdk";
export default function App() {
const { render } = useYoTest({
accessId: "your accessId",
product: "custom",
area: ".App",
bgColor: "red",
style: {
width: 300,
height: 40,
},
onSuccess({ token, verified }) {
console.log("success", token, verified);
},
onError({ code, message }) {
console.log("error", code, message);
},
});
return <div className="App">{render()}</div>;
}
props
<Object>
return:
return:
void监听验证的初始化完成事件。
import React from "react";
import useYoTest from "yotest-react-sdk";
export default function App() {
const { render } = useYoTest({
accessId: "your accessId",
onReady() {
console.log("yotest init completed...");
},
});
return <div className="App">{render()}</div>;
}
return:
void验证框展现的回调。
import React from "react";
import useYoTest from "yotest-react-sdk";
export default function App() {
const { render } = useYoTest({
accessId: "your accessId",
onShow() {
console.log("yotest showed...");
},
});
return <div className="App">{render()}</div>;
}
data
<ValidateResult>
return:
void验证成功的监听回调。
import React from "react";
import useYoTest from "yotest-react-sdk";
export default function App() {
const { render } = useYoTest({
accessId: "your accessId",
onSuccess({ token, verified }) {
console.log("success", token, verified);
},
});
return <div className="App">{render()}</div>;
}
data
<ValidateError>
return
: void验证错误的监听回调。
import React from "react";
import useYoTest from "yotest-react-sdk";
export default function App() {
const { render } = useYoTest({
accessId: "your accessId",
onError({ code, message }) {
console.log("error", code, message);
},
});
return <div className="App">{render()}</div>;
}
return:
void验证关闭的监听回调。
import React from "react";
import useYoTest from "yotest-react-sdk";
export default function App() {
const { render } = useYoTest({
accessId: "your accessId",
onClose() {
console.log("captcha close");
},
});
return <div className="App">{render()}</div>;
}
return:
<React.component>返回友验的UI DOM。
import React from "react";
import useYoTest from "yotest-react-sdk";
export default function App() {
const { render } = useYoTest({
accessId: "your accessId",
});
return <div className="App">{render()}</div>;
}
return
: <ValidateResult>
获取当前验证结果。
import React from "react";
import useYoTest from "yotest-react-sdk";
export default function App() {
const { render, getValidate } = useYoTest({
accessId: "your accessId",
onClose() {
const { token, verified } = getValidate();
if (verified) {
// 通过ajax/fetch将token传给后端相应接口进行判断
}
},
});
return <div className="App">{render()}</div>;
}
return
: void重置 Captcha 当前状态为初始化状态。
import React from "react";
import useYoTest from "yotest-react-sdk";
export default function App() {
const { render, reset } = useYoTest({
accessId: "your accessId",
onError({ code, message }) {
if(code === -1){
reset();
}
},
});
return <div className="App">{render()}</div>;
}
return
: void当 product: "bind" 时,调用此API可以呼出验证界面并要求验证。这种方式提供了更好的灵活性,方便开发者在不破坏原由功能和UI的情况下进行集成。
import React from "react";
import useYoTest from "yotest-react-sdk";
export default function App() {
const { render, verify } = useYoTest({
accessId: "your accessId",
product: "bind",
style: {
width: 300,
height: 40,
},
onReady() {
// 你也可以绑定事件,但需要注意:
// 一定要在onReady之后进行verify的调用
verify();
},
});
return <div className="App">{render()}</div>;
}
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。