web-dev-qa-db-ja.com

Google reCaptcha v3をAngular app with ng-recaptchaに統合する

登録ページを自動送信から保護したいので、reCaptcha v3を試すことにしました。これはAngularアプリケーションであり、統合を容易にするために ng-recaptcha モジュールを使用しています。Stackblitzで基本的な例を設定し、オンラインでテストできるようにしています：

https://stackblitz.com/edit/angular-qk3jhr

私にはいくつかの疑問/問題があります：

  1. 有効なGoogleキーをapp.module.tsファイル、送信ボタンを押すと、this.recaptchaV3Service.execute呼び出しは何もしません。これは、アプリがreCaptcha V3キーの生成時に指定したドメインにないためですか？また、間違ったキーを書き込んだ場合、Googleは次のエラーを表示します。

エラー：無効なサイトキーまたはapi.jsに読み込まれていません：

  1. トークンを入手したら、どうすればよいですか？ ng-recaptchaのドキュメントを読みましたが、何も表示されません。つまり、トークンを入手したら、それが有効かどうかを確認してフォームを送信するために何をする必要がありますか？

前もって感謝します、

angularrecaptcha-v3
2
Fel

最後に、いくつかのことを試す時間を得て、どうにかしてそれを機能させることができました。基本的に、私がしたことは：

1テスト用のキーのペアを生成します（ドメインで「localhost」を設定）。

2クライアントアプリで、ng-recaptchaそのページで説明されているモジュール（ https://www.npmjs.com/package/ng-recaptcha#recaptcha-v3-usage-see-in-action ）。次に、ユーザー保護コンポーネント（保護したい）から、[送信]ボタンを押すと次のコードが実行されます。

public beforeSubmittingForm(): void {
    this.recaptchaV3Service.execute('registerSubmit').subscribe(
        (token) => {
            // 'this.user' contains the data of the user we want to create. Add the received token
            this.user.recaptchav3_token = token;    

            this.submitForm();  // This sends the user data to the backend
        },
        (error) => {
            this.errors = [ 'Error trying to verify request (reCaptcha v3)' ];
        });
}

3バックエンドのユーザー登録ルートで、axiosライブラリ（ https://www.npmjs.com/package/axios ）を使用してPOST受信したトークンを使用したGoogle検証サービスへのリクエスト：

try {
    var result = await axios.post("https://www.google.com/recaptcha/api/siteverify", {}, {
        params: {
            secret: recaptcha_api_key,  // Secret API key
            response: req.body.recaptchav3_token    // Received token from the frontend
        }
    });

    if(result.score < 0.5) {
        return res.status(403).json({ msg: 'Google Recaptcha error' });
    }
} catch(e) {
    return res.status(403).json({ msg: 'Error trying to verify the request' });
}
// Continue with the registration process...

よろしくお願いいたします。

4
Fel

最初の質問が理解できるかわかりません。無効なキーを使用すると、そのエラーが発生することが予想されます。正しいドメインに正しいキーを使用する場合は、トークンを生成する必要があります。

2番目の質問については、ngOnInit()メソッドでトークンを生成しているため、preSubmitForm()の実行中にトークンを生成する必要はなく、それで十分です。トークンをどうするかについては、それを残りのフォームデータと共にサーバーに投稿する必要があります。次に、フォーム送信が処理されるサーバー側コードで、トークンと秘密鍵の両方を提供するrecaptcha APIにリクエストを送信します。

サーバー側の検証に関しては GoogleのreCaptchaドキュメント をご覧ください。

2
isNaN