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