Captcha:統合ガイド

プラットフォーム別の統合方法

認証タイプ

Web および H5 の統合

認証シーンを作成する際に、Integration Method を [Web/H5] に設定します。

1. クライアント側： 認証が必要なすべてのページに CAPTCHA の初期化コードを追加します。コードサンプルについては、「Web および H5 クライアント V3 アーキテクチャの統合」をご参照ください。

2. サーバー側： ご利用のサーバーに Alibaba Cloud SDK をインストールします。クライアントから受け取った CaptchaVerifyParam の値を使用して VerifyIntelligentCaptcha API を呼び出します。詳細については、「サーバー側の統合」をご参照ください。

アプリの統合 (Android および iOS)

認証シーンを作成する際に、Integration Method を [Webview+H5 (Supports apps and mini-programs)] に設定します。

1. クライアント側 (Web/H5)： アプリ内でロードされる Web ページに CAPTCHA の初期化コードを追加します。「Web および H5 クライアント V3 アーキテクチャの統合」をご参照ください。

2. サーバー側： Alibaba Cloud SDK をインストールし、VerifyIntelligentCaptcha API を呼び出します。「サーバー側の統合」をご参照ください。

3. アプリ側：

   • Android： WebView コンポーネントを使用して、CAPTCHA を含む Web ページをロードします。「Android V3 アーキテクチャの統合」をご参照ください。

   • iOS： WKWebView コンポーネントを使用して、CAPTCHA を含む Web ページをロードします。「iOS V3 アーキテクチャの統合」をご参照ください。

WeChat ミニプログラムの統合

認証シーンを作成する際に、Integration Method を [Webview+H5] (Supports apps and mini-programs) または WeChat Mini Program Native Plugin に設定します。

認証が必要な各ミニプログラムページに CAPTCHA の初期化コードを追加します。「ミニプログラムの統合」をご参照ください。

クライアント側の初期化のテスト

1. CAPTCHA が統合されたページを開きます。

2. ブラウザの開発者ツールを開き、[ネットワーク] タブに移動します。

3. 以下の項目が存在することを確認します。

   • 初期化リクエスト。

   • 初期化リクエストの [プレビュー] に、success が true に設定された CAPTCHA 情報が含まれている。

   • CAPTCHA リソースがロードされている。

クライアント側の検証のテスト

1. CAPTCHA を操作して検証リクエストをトリガーします。

2. ブラウザの開発者ツールで、[ネットワーク] タブに移動します。

3. [VerifyResult] が true であることを確認します。

サーバー側の検証のテスト

クライアント側の検証が成功すると、クライアントは CaptchaVerifyParam をビジネスサーバーに送信します。ご利用のサーバーは VerifyIntelligentCaptcha API を呼び出します。

API 応答を確認します。検証が成功すると、VerifyResult が true として返されます。

{
    "RequestId": "C******-B***-4***-A***-5*******1",
    "Message": "success",
    "HttpStatusCode": 200,
    "Code": "Success",
    "Success": true,
    "Result": {
        "VerifyCode": "T001",
        "VerifyResult": true
    }
}

エンドツーエンドの動作のテスト

アプリケーションで CAPTCHA が期待どおりに動作することを確認します。

• スライダー認証、ジグソーパズル認証、クリック認証、画像復元認証： ユーザーがチャレンジを完了すると、[認証成功] メッセージが表示されます。

• No-CAPTCHA 認証： ビジネスアクションが成功すると、認証が確認されます。たとえば、ログインシナリオでは、ユーザーがログインした後に [ログイン成功] メッセージが表示されます。

スライダー認証、ジグソーパズル認証、クリック認証、画像復元認証

1. クライアントは CAPTCHA を初期化し、JavaScript (JS) リソース (画像、質問) を CAPTCHA サーバーにリクエストします。

2. CAPTCHA サーバーは JS リソースを返します。クライアントは CAPTCHA をロードしてレンダリングします。

3. ユーザーはチャレンジ (スライダー、パズル、または画像復元) を解決します。JS は検証リクエストを CAPTCHA サーバーに送信します。サーバーは回答と、リクエストがマシンから発信されたものかどうかを確認します。

4. 成功すると、CAPTCHA は success コールバック関数を呼び出し、CaptchaVerifyParam を返します。失敗した場合、CAPTCHA は自動的にリフレッシュされ、再試行できます。

5. クライアントはビジネスパラメーターと CaptchaVerifyParam をビジネスサーバーに送信します。

6. ビジネスサーバーは VerifyIntelligentCaptcha API を呼び出して CaptchaVerifyParam を検証します。

7. CAPTCHA サーバーはパラメーターを検証し、悪意のあるアクティビティをチェックして結果を返します。

8. ビジネスサーバーは結果に基づいてビジネスロジックを処理し、検証結果とビジネス結果の両方をクライアントに返します。

No-CAPTCHA 認証

1. クライアントは CAPTCHA を初期化し、JS リソースを CAPTCHA サーバーにリクエストします。

2. CAPTCHA サーバーは JS リソースを返します。

3. ユーザーがトリガーボタンをクリックします。Alibaba Cloud サーバーはユーザーが安全かどうかを評価します。

4. サーバーは評価結果を返します。

   • 安全なユーザー： 初期検証に合格します。success コールバックは、サーバー側の検証のために CaptchaVerifyParam を返します。

   • リスクのあるユーザー： 二次チャレンジがトリガーされます。

     1. クライアントは JS リソースをロードし、CAPTCHA をレンダリングします。ユーザーがチャレンジを解決した後、JS は検証リクエストを送信します。CAPTCHA サーバーは回答を確認します。

     2. 成功すると、success コールバックは CaptchaVerifyParam を返します。失敗した場合、CAPTCHA は自動的にリフレッシュされます。

5. クライアントはビジネスパラメーターと CaptchaVerifyParam をビジネスサーバーに送信します。

6. ビジネスサーバーは VerifyIntelligentCaptcha API を呼び出して CaptchaVerifyParam を検証します。

7. CAPTCHA サーバーはパラメーターを検証し、悪意のあるアクティビティをチェックして結果を返します。

8. ビジネスサーバーはビジネスロジックを処理し、結果をクライアントに返します。