鄒平市如何使用谷歌的人機(jī)身份驗(yàn)證功能recaptcha？
像這種谷歌自帶的人機(jī)身份驗(yàn)證，實(shí)際上有很多插件可以實(shí)現(xiàn)。
但是有客戶看他們同行都用的谷歌的這種，也讓我?guī)退某蛇@種，那么現(xiàn)在我就來(lái)說(shuō)說(shuō)如何實(shí)現(xiàn)。
第一步：登陸谷歌的recaptcha平臺(tái)：https://www.google.com/recaptcha/about/，當(dāng)然了，你打開(kāi)的可能是英文界面。
第二步： 登陸您的谷歌賬號(hào)，然后進(jìn)行網(wǎng)站創(chuàng)建。都是很簡(jiǎn)單的，英文看著費(fèi)勁，我翻譯成了中文，你可以參考對(duì)比一下。
在這里面：reCAPTCHA類型有V3和V2兩種方式。不管您使用哪一種方式，他都有相關(guān)的使用指南，您可以參考他的代碼進(jìn)入加入到自己的網(wǎng)站中。
用得比較多的可能就是這種V2的方式了。
接入也非常 的簡(jiǎn)單，在你需要使用的地方引入JS，并使用對(duì)應(yīng)的代碼引入即可。
以上操作即可完成。
緊接上文，我們發(fā)現(xiàn)谷歌的recaptcha其實(shí)并沒(méi)有hcaptcha那樣簡(jiǎn)單的引入就可以使用了。因?yàn)樗麩o(wú)法像hcaptcha直接通過(guò)ID判斷當(dāng)前是否已經(jīng)進(jìn)行判斷。所以我們需要在代碼中進(jìn)行判斷是否驗(yàn)證成功。
方法如下：
1：引入谷歌的JS
<script src="https://www.google.com/recaptcha/api.js" async defer></script> 或者 <script src="https://www.recaptcha.net/recaptcha/api.js" async defer></script> 如果需要國(guó)內(nèi)可以訪問(wèn)，就使用后面的這一個(gè)，如果不需要國(guó)內(nèi)訪問(wèn)，則使用上面的谷歌鏈接也可以。
2：加HTML代碼，例如，這里面我們使用callback再使用JS回調(diào)來(lái)判斷
<div class="g-recaptcha" data-sitekey="6Lf-VwoqAAAAAEfnF6R_5cYeR_Zn1aBRMuwetsm1" data-theme="light" data-size="normal" data-callback="callback" data-expired-callback="expired" data-error-callback="error"></div>
3：JS部分
<script type="text/javascript" charset="utf-8">
//js部分
var callback = function (args) {
console.log(args)
console.log('驗(yàn)證成功');
$("#submitform").addClass("d-block"); //在未進(jìn)行驗(yàn)證成功前，提交按鈕不顯示
};
var expiredCallback = function (args) {
console.log(args)
console.log('驗(yàn)證過(guò)期');
};
var errorCallback = function (args) {
console.log(args)
console.log('驗(yàn)證失敗');
};
function getResponseFromRecaptcha() {
var responseToken = grecaptcha.getResponse(widgetId);
if (responseToken.length == 0) {
alert("驗(yàn)證失敗");
} else {
alert("驗(yàn)證通過(guò)");
}
};
</script>完成以上即可。
第二種方式：
第一步和上面第一步一樣。然后第二步：HTML
<div id="robot"></div>
第三步：JS
<script type="text/javascript" charset="utf-8">
//js部分
var callback = function (args) {
console.log(args)
console.log('驗(yàn)證成功');
$("#submitform").addClass("d-block");//在未進(jìn)行驗(yàn)證成功前，提交按鈕不顯示
};
var expiredCallback = function (args) {
console.log(args)
console.log('驗(yàn)證過(guò)期');
};
var errorCallback = function (args) {
console.log(args)
console.log('驗(yàn)證失敗');
};
var widgetId;
var onloadCallback = function () { // 得到組件id
widgetId = grecaptcha.render('robot', {
'sitekey': '你的KEY',
'theme': 'light', //主題顏色，有l(wèi)ight與dark兩個(gè)值可選
'size': 'normal',//尺寸規(guī)則，有normal與compact兩個(gè)值可選
'callback': callback, //驗(yàn)證成功回調(diào)
'expired-callback': expiredCallback, //驗(yàn)證過(guò)期回調(diào)
'error-callback': errorCallback //驗(yàn)證錯(cuò)誤回調(diào)
});
};
function getResponseFromRecaptcha() {
var responseToken = grecaptcha.getResponse(widgetId);
if (responseToken.length == 0) {
alert("驗(yàn)證失敗");
} else {
alert("驗(yàn)證通過(guò)");
}
};
</script>
