Captcha:クライアント統合に関するよくある質問

Q1：1つのページに複数の CAPTCHA を設置するにはどうすればよいですか？

• 方法 1：ポップアップモードを使用します。initAliyunCaptcha メソッドに渡される button 要素を非表示要素に設定します。次に、CAPTCHA をトリガーする要素にクリックなどのイベントをバインドします。イベントコールバック関数内で、JavaScript を使用して非表示の button 要素のクリックをトリガーします。これにより、CAPTCHA ポップアップウィンドウが開き、ページ全体で単一の CAPTCHA インスタンスを共有できます。

• 方法 2：CAPTCHA をコンポーネントとしてカプセル化し、必要な場所で使用します。初期化パラメーターを props として渡すことができます。検証が完了したら、DOM から CAPTCHA コンポーネントを削除します。詳細については、「クライアント V3 アーキテクチャデモのダウンロード」および「クライアント V2 アーキテクチャデモのダウンロード」をご参照ください。

Q2: ショートメッセージ確認コードを送信するために Captcha を統合するにはどうすればよいですか？

• 詳細については、「ショートメッセージを送信するための V2 アーキテクチャデモ (React)」をご参照ください。

• 詳細については、「ショートメッセージを送信するための V3 アーキテクチャデモ (React)」をご参照ください。

Q3：V2 クライアントアーキテクチャで、CAPTCHA を手動でリフレッシュまたは破棄したり、CAPTCHA ポップアップウィンドウを手動で表示/非表示にしたりするにはどうすればよいですか？

CAPTCHA インスタンスの対応するメソッドを呼び出すことができます。これらのメソッドは、トレースレスモードでの初期検証ではサポートされていません。

Q4：アプリ統合において、アプリクライアントから検証リクエストを送信するにはどうすればよいですか？

captchaVerifyCallback 内で、カスタムの Java インターフェイス testJsInterface (Android の場合) を呼び出すか、WkScriptMessageHandler プロトコルを使用して JavaScript と WKWebView (iOS の場合) の間で対話するメソッドを使用できます。captchaVerifyParam をアプリクライアントに渡し、H5 CAPTCHA ウィンドウを閉じて検証リクエストを開始します。アプリクライアントが検証結果を受け取った後、検証が成功したかどうかを表示します。検証が失敗した場合、H5 ウィンドウが再表示され、再試行できます。このシナリオではトレースレスモードはサポートされていません。これは、検証ごとに CAPTCHA が再初期化され、新しいライフサイクルが開始されるためです。その結果、すべての試行がトレースレス検証になります。トレースレス検証が失敗しても、次の試行で2次検証がトリガーされず、保護が弱まります。

Q5：CAPTCHA ポップアップウィンドウをトリガーする前に、カスタムのビジネス運用を実行するにはどうすればよいですか？ (例：電話番号のフォーマット検証が成功した後にのみパズル CAPTCHA をトリガーする)

カスタムのビジネス運用が検証に成功した後、captcha.show インスタンスメソッドを使用して検証用の CAPTCHA を表示できます。button 要素は非表示要素として設定できます。初期化中に button パラメーターを渡す必要があります (「Q15」をご参照ください)。

Q6：「Uncaught TypeError: Cannot set properties of undefined (setting 'onclick')」エラーを解決するにはどうすればよいですか？

このエラーは、要素またはボタン要素が見つからなかったために発生します。これらの要素は DOM に存在する必要があります。初期化パラメーターで正しい要素 ID を渡す必要があります。

Q7：`slideStyle` パラメーターを設定しましたが、パズル CAPTCHA のスライダーに影響しないのはなぜですか？

`slideStyle` パラメーターはスライダー CAPTCHA にのみ影響し、パズル CAPTCHA には適用されません。パズル CAPTCHA のディメンションは固定です。フロントエンドでイメージやスライダーの長さや幅を変更することはできません。これらのディメンションを変更すると、検証が失敗します。

Q8：`captchaVerifyCallback` は検証結果情報を返しますが、CAPTCHA が応答しないのはなぜですか？

これには、次の理由が考えられます。

1. `ajax` の成功コールバックなどのコールバック関数内で `return` 文が宣言されていますが、外側の `captchaVerifyCallback` 関数に `return` 文がありません。その結果、CAPTCHA ソフトウェア開発キット (SDK) は検証結果を取得できず、検証フローがブロックされます。この問題を解決するには、戻り値を promise でラップし、コールバックで結果を解決します。

   正しい例

   async function captchaVerifyCallback(captchaVerifyParam) {
     return new Promise((resolve) => {
       $.ajax({
         Url: 'xxxx',
         data: 'xxxx',
         success: (result) => {
           resolve({
             captchaResult: true,
             bizResult: false,
           });
         },
       });
     });
   }

   正しくない例

   async function captchaVerifyCallback(captchaVerifyParam) {
     $.ajax({
       Url: 'xxxx',
       data: 'xxxx',
       success: (result) => {
         return {
           captchaResult: true,
           bizResult: false,
         };
       },
     });
   }

2. 埋め込みモードで、スライドまたはイメージの選択が完了した直後にリクエストを送信するには、初期化メソッドに immediate: true パラメーターを追加します。

Q9：デモコードに従って統合しましたが、CAPTCHA がレンダリングされないのはなぜですか？

これには、次の理由が考えられます。

• https://prefix.captcha-open.aliyuncs.com API への初期化リクエストが失敗しました。この失敗は、ネットワークの問題またはタイムアウトが原因である可能性があります。戻り値に Forbidden.AccountAccessDenied が含まれている場合、Alibaba Cloud アカウントの状態が異常であるか、支払いが遅延していることが原因である可能性があります。これらの場合、ブラウザの開発者ツールの コンソール にネットワークエラーメッセージが表示されます。

• ブラウザの開発者ツールの コンソール にエラーメッセージが表示されず、初期化リクエストが成功した場合、戻り値の CaptchaType フィールドが TRACELESS に設定されている可能性があります。これはトレースレスモードを示しており、初期検証ではグラフィック CAPTCHA はレンダリングされません。

Q10：WeChat ミニプログラムとの統合時に、コードパッケージが大きすぎるというメッセージが表示されます。どうすれば解決できますか？

セキュリティ上の理由から、プラグインコードは複雑な難読化メカニズムを使用しており、そのサイズが大きくなっています。この問題は、WeChat ミニプログラムのサブパッケージ機能を使用して解決できます。これには、CAPTCHA を使用するページをサブパッケージに配置することが含まれます。詳細については、「ネイティブ WeChat でのサブパッケージの使用」、「Taro WeChat ミニプログラムの独立したサブパッケージ」、および「uni-app のサブパッケージ内でのプラグインコードパッケージのインポート」をご参照ください。

Q11：Web クライアント統合中に CAPTCHA リソースの読み込みに失敗した場合はどうすればよいですか？

ご利用のシステムでドメインまたは URL フィルタリングが有効になっていないか確認してください。これらの機能は、必須の CAPTCHA リソースまたは API へのアクセスをブロックする可能性があります。これらの機能が有効になっている場合は、次のドメイン名をホワイトリストに追加してください。

Q12：CAPTCHA 統合中に「Console was cleared」というメッセージが表示され、開発者ツールのコンソールからログがクリアされます。これを修正するにはどうすればよいですか？

開発者ツールのログをクリアするのは CAPTCHA が実行するセキュリティ操作であり、通常の機能には影響しません。開発中は、コンソールの設定で [Preserve log] オプションを選択してログを保持できます。

Q13：WebView と H5 を使用してアプリに CAPTCHA を統合する場合、トレースレスモードを使用できますか？

WebView と H5 を使用してアプリに CAPTCHA (V2 または V3 アーキテクチャ) を統合する場合：

• WebView にビジネス運用を含むビジネスページが含まれており、検証が WebView 内の物理ボタンによってトリガーされる場合は、トレースレス検証を使用できます。

• WebView にビジネス運用がなく、CAPTCHA 検証のみが含まれている場合、トレースレスモードはすべての試行をブロックします。この場合、スライダー、ワンクリック検証、パズル CAPTCHA、画像復元など、別のインタラクティブな CAPTCHA タイプを選択する必要があります。

Q14：ビジネスシナリオで、JavaScript を使用して CAPTCHA を直接トリガーする必要があります。どうすればよいですか？

CAPTCHA インスタンスの show メソッドを使用して、ポップアップ CAPTCHA を表示できます。グラフィック CAPTCHA がレンダリングされないため、`show` メソッドはトレースレスモードでの初期検証ではサポートされていません。クリックをシミュレートして CAPTCHA をトリガーしないでください。この操作は、一部のシナリオで自動化ツールとして検出され、ブロックにつながる可能性があります。

Q15：CAPTCHA インスタンスの show メソッドを使用して CAPTCHA を表示した後、ビジネスに物理的なボタンがありません。button 初期化パラメーターを省略できますか？

いいえ、できません。button パラメーターは統合ドキュメントで必須です。このパラメーターには非表示要素を使用できます。このパラメーターを省略すると、トレースレスモードなどの一部のシナリオで CAPTCHA エラーが発生する可能性があります。

Q16：V3 アーキテクチャで、検証が成功した後に再検証のために CAPTCHA をリフレッシュするにはどうすればよいですか？

検証が成功すると、CAPTCHA ライフサイクルは終了します。再検証するには、初期化メソッドを再度呼び出して CAPTCHA を再初期化する必要があります。詳細については、「Web および H5 クライアント V3 アーキテクチャ統合」のコード例にある成功コールバック関数の説明をご参照ください。

Q17：`initAliyunCaptcha` の初期化がタイムアウトした後に成功コールバックがトリガーされるのはなぜですか？

Captcha 2.0 のデフォルトのディザスタリカバリメカニズムでは、初期化呼び出しが失敗した場合に成功コールバックがトリガーされます。これにより、プロダクト API が異常な場合に検証ステップをスキップし、ビジネス運用がブロックされるのを防ぎます。