blazorserverアプリでgoogle reCAPTCHA v3 を導入する方法
BlazorはMicrosoftが開発したウェブアプリを開発するフレームワークです。ログイン画面など自動生成することができますが、ログイン画面にGoogleRecaptcha導入することもできます。
この記事では、Blazor Server アプリケーションのログイン画面にGoogle Recaptchaを導入する方法を紹介します。
Google reCAPTCHA Admin Consoleにログインする
まずは Google reCAPTCHA Admin Console へログインしましょう。
[https://www.google.com/recaptcha/about/(https://www.google.com/recaptcha/about/)
上記画面の「v3 Admin Console」をクリックするとAdmin Console へログインすることができます。
サイトを登録してコードを得る
右上の「＋」マークをクリックしてサイトを追加します。
必要な情報を入力していきます。
- ラベル
わかりやすい名前にしましょう。私はドメイン名をそのまま入力しています。
- reCAPTCHAタイプ
「reCAPTCHA v3」と「reCAPTCHA v2」があります。今回は「reCAPTCHA v3」を選択します。
- ドメイン
今回reCAPTCHA v3 を導入するドメイン名を入力します。
- オーナー
ドメインの所有者のメールアドレスを入力します。メールアドレスのドメインは上記で入力したドメインと一致する必要はありません。アラートなどを受信するために使用します。
- reCAPTCHA 利用条件に同意する
内容を確認して問題なければチェックを入れましょう。
- アラートをオーナーに送信する
不審なトラフィックの増加などサイトに問題が検出された場合に通知を受け取る場合はチェックを入れましょう。
- 送信ボタン
入力内容が問題なければ送信ボタンをクリックしましょう。
送信ボタンをクリックすると、サイトキーとシークレットキーが表示されます。後から設定画面で確認できますので、このタイミングでメモしておく必要はありません。
補足：reCAPTCHA v3 とは
reCAPTCHA v3 はそのサイトでのユーザーの振る舞いから、人間かロボットかを判断する仕組みです。
そのため、「私はロボットではありません」のチェックを入れる作業や、指定された画像を選択する作業も不要になっています。
「reCAPTCHA v3」はそのサイトでの行動からロボットかどうかを判断します。画像の選択はありませんし、「私はロボットではありません」のチェックを入れる必要もありません。
Google reCAPTCHAを導入するページを選定する
人間かロボットか判断したいページはいろいろあります。
- ログインページ
- 新規ユーザー登録ページ
- パスワードリセットメール送信ページ
- メールアドレス確認メール再送ページ
どのページに reCAPTCHAを導入するか検討しておきましょう。
ログインページにreCAPTCHAを導入する
今回はログインページに導入してみます。
フロント（Login.cshtml）
まずはrecaptchaのisファイルを読み込むようにscriptタグを記述します。
<script src="https://www.google.com/recaptcha/api.js"></script>次に、ログインボタンに対してサイトキーなどを設定していきます。
<button id="login-submit" type="submit" class="w-100 btn btn-lg btn-primary g-recaptcha"
data-sitekey="(サイトキー)"
data-callback='onSubmit'
data-action='submit'>Log in</button>ログインボタンがクリックされた際のコールバック関数onSubmitを定義します。
この例では、accountというidが設定されているformをsubmitするように記述します。
<script>
function onSubmit(token) {
document.getElementById("account").submit();
}
</script>サーバーサイド（Login.cshtml.cs）
サーバーサイドでは以下のライブラリを使用します。
- System.Net
- JSON.NET
JSON.NETのnugetは以下のページにあります。
reCAPTCHA API コール関数 isReCaptchaValid()
reCAPTCHA API をコールして結果を取得する関数を記述します。
public bool isReCaptchaValid()
{
bool result = false;
string reCAPTCHAResponse = Request.Form["g-recaptcha-response"];
string secretKey = "(シークレットキー)";
string requestURL = $"https://www.google.com/recaptcha/api/siteverify?secret={secretKey}&response={reCAPTCHAResponse}";
var request = (HttpWebRequest)WebRequest.Create(requestURL);
using(WebResponse response = request.GetResponse())
{
using(StreamReader sr = new StreamReader(response.GetResponseStream()))
{
Newtonsoft.Json.Linq.JObject jResponse = Newtonsoft.Json.Linq.JObject.Parse(sr.ReadToEnd());
bool isSuccess = jResponse.Value<bool>("success");
result = (isSuccess) ? true : false;
}
}
return result;
}
isReCaptchaValid() コード解説
クライアント側のレスポンスデータは以下のコードで取得しています。
string reCAPTCHAResponse = Request.Form["g-recaptcha-response"];APIのURLを組み立てて呼び出します。
string requestURL = $"https://www.google.com/recaptcha/api/siteverify?secret={secretKey}&response={reCAPTCHAResponse}";
var request = (HttpWebRequest)WebRequest.Create(requestURL);JSON.NET を使用して、APIからのレスポンスデータからsuccessを取得します。
OnPostAsync
クライアント側でログインボタンがクリックされた際に呼び出されるサーバサイドのメソッドです。
ここに以下のようにisReCaptchaValid()を呼び出します。
false すなわちreCAPTCHA がロボットと判定した場合にログインページを再表示します。
if(isReCaptchaValid() == false) return Page();
以上！
これでreCAPTCHA v3 の導入は完了です。v2と違って「私はロボットではありません」のチェックボックスも無いので、クライアント側の画面を構築する必要もなく簡単ですね。
最近ではRPAで簡単にブラウザ操作の自動化ができますが、RPAは人間と判定されるのかロボットと判定されるのか、どっちなんでしょうかね。。。
コメント