Google reCAPTCHA
序文
Google reCAPTCHAだけで言えば、それが何であるかを知っている人はほとんどいないでしょう。しかし、以下の検証を見たことがあれば、おそらくそれが何であるかを知っているでしょう。
それだけでは不十分な場合は、これをもう一度見てください
私はこのバリデーターをよく扱いますが、使いすぎると難しすぎます。しかし、慎重に考えると非常に人間に優しいです。なぜなら、それは本当に人々がそれを注意深く検証する必要があり、そしてそれは高い確率で検証に合格するからです。これが、私がこの製品をセキュリティ保護に使用する理由でもあります。
バックグラウンド
会社がIPに従ってユーザーに提供するアクティベーションコードについては、IPをシミュレートすることで、数千のコードを即座にスワイプする人もいました。その理由は、アクティベーションコードを受信するためのインターフェイスがIPのみを制限するためです。もう1つは、インターフェース自体です。これは、呼び出しによって直接取得できます。これは、ページから取得する必要があります。同僚と話し合った後、上の写真のコントロールであるセキュリティ保護のためにGooglereCAPTCHAv2のチェックボックスを使用することにしました。
APIキーを取得する
まず、www.google.com / recaptcha / a…にアクセスして、Webサイトの[人間の認証を有効にする]チェックボックスのバージョン2構成を作成する必要があります。作成すると、2つのキーを取得します。
Webサイトキーは、クライアントが認証を開始するときに使用されます。次の通信キーは、サーバー側でのユーザーの応答を確認するために使用されます。
クライアント
制御構造とシンプルなスタイリング
<div id="robot"></div>
复制代码#robot {
position: fixed;
left: 50%;
transform: translate(-50%, 0);
bottom: 270px;
}
@media screen and (max-width: 768px) {
#robot {
bottom: 200px;
}
}
复制代码ページのニーズに合わせてスタイルを調整できます
脚本
jsを作成する前に、まずリソースをロードする必要があります。
<script src="https://www.google.com/recaptcha/api.js?render=explicit" async defer></script>
复制代码次に、コードを書くことができます
export const googleVerify = () => {
if (!grecaptcha.render) return;
grecaptcha.render("robot", {
sitekey: "网站密钥",
callback: function (token) {
// 验证通过
},
});
};
复制代码googleVerifyメソッドが呼び出されると、renderメソッド。検証に合格すると、検証がcallback実行され、返品がtoken返送。完全なセキュリティ保護を行うには、最終検証のためにバックエンドに渡す必要があります。
サーバ
開発者.google.com/recaptcha / d…を参照して、サーバーが行う必要があるのは、GooglereCAPTCHAのAPIを使用して確認リクエストを送信することだけであることを確認してください。Expressのミドルウェアを例にとると、具体的な処理プロセスは次のとおりです。
const verifyGoogleToken: RequestHandler = async (req, res, next) => {
const { token } = req.body;
const { data } = await axios({
url: "https://www.google.com/recaptcha/api/siteverify",
method: "post",
headers: { "Content-Type": "application/x-www-form-urlencoded" },
data: `secret=${通信密钥}&response=${token}`,
});
if (data && data.success) {
next();
} else {
res.send("google verify failed");
}
};
复制代码このような完全な検証プロセスが完了します。