Captcha:クライアント統合 FAQ

Q1：1 つのページで複数の CAPTCHA インスタンスを処理する方法は？

• 方法 1：ポップアップモードを使用します。initAliyunCaptcha メソッドに渡す button 要素を非表示要素として設定し、CAPTCHA をトリガーする要素に関連するイベント (通常はクリックイベント) をバインドします。イベントコールバック関数内で、JavaScript を使用して button 要素のクリックイベントをトリガーし、CAPTCHA ポップアップを表示します。ページ全体で 1 つの CAPTCHA インスタンスを共有します。

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

Q2：SMS 検証シナリオで CAPTCHA を統合する方法は？

• 詳細については、「V2 アーキテクチャ SMS 送信シナリオデモ (React)」をご参照ください。

• 詳細については、「V3 アーキテクチャ SMS 送信シナリオデモ (React)」をご参照ください。

Q3：V2 クライアントアーキテクチャで CAPTCHA を手動でリフレッシュまたは破棄する方法、あるいは CAPTCHA ポップアップを手動で表示または閉じる方法は？

CAPTCHA インスタンスで対応するメソッドを呼び出します。なお、トレースレスモードでの初回検証時は、以下のメソッドはサポートされていません。

Q4：APP 統合で APP 側から検証リクエストを行う方法は？

captchaVerifyCallback 内で、カスタム Java API testJsInterface (Android) を呼び出すか、WkScriptMessageHandler プロトコルを使用して JavaScript と WKWebView 間のインタラクション (iOS) を実装できます。これにより、captchaVerifyParam が APP 側に渡されます。次に、captcha H5 ウィンドウを閉じ、検証リクエストを開始します。検証結果を取得した後、APP 側は検証に成功したかどうかを示すメッセージを表示できます。失敗した場合は、H5 ウィンドウを再度表示して再検証を行います。このシナリオでは、トレースレス検証モードはサポートされていません。各検証で captcha が再初期化され (新しい captcha ライフサイクルが開始)、すべての試行がトレースレス検証になるためです。トレースレス検証が失敗しても、次の試行は 2 次検証モードに入らないため、保護が若干弱くなります。

Q5：CAPTCHA ポップアップをトリガーする前にカスタムビジネス操作を処理する方法は？ (例：パズル CAPTCHA は電話番号形式の検証後にのみ表示されるべきです。)

カスタムビジネス操作の検証に成功したら、captcha インスタンスのメソッド captcha.show を使用して、検証用のキャプチャを表示します。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. return ステートメントが AJAX の success コールバックなどのコールバック関数内で宣言されており、外側の captchaVerifyCallback が何も返していません。その結果、CAPTCHA SDK が検証結果を取得できず、検証フローがブロックされます。これを修正するには、戻り値を promise でラップし、コールバック内で結果を resolve します。

   正しい例

   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 がレンダリングされないのはなぜですか？

考えられる原因は次のとおりです。

1. 初期化リクエストエラー:
   ブラウザの開発者ツールコンソールでネットワークエラーメッセージを確認してください。 https://****.captcha-open.aliyuncs.com (**** は顧客 ID) への初期化リクエストの失敗は、通常、以下が原因です。
   

   • ネットワークの問題：ネットワークが不安定なためリクエストが失敗またはタイムアウトします。

   • アカウントの問題：エラーコード Forbidden.AccountAccessDenied が返された場合、Alibaba Cloud アカウントの状態が異常であるか、未払い残高がある可能性があります。

2. 無痕跡検証モード:
   コンソールにエラーが表示されず、初期化リクエストが成功した場合、戻り値の CaptchaType フィールドを確認します。 値が TRACELESS の場合、現在のモードは無痕跡検証です。 このモードでは、最初の初期化時にグラフィカルキャプチャはレンダリングされません。
   

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

セキュリティ上の理由から、ミニプログラムプラグインのコードは複雑な難読化メカニズムを使用しているため、コードサイズが大きくなります。これを解決するには、WeChat ミニプログラムのサブパッケージ機能を使用して、CAPTCHA を使用するページを別のサブパッケージに分離します。参考として、「Native WeChat Subpackages」、「Taro WeChat Mini-Program Independent Subpackage」、および「Importing Plugin Code Packages in uni-app Subpackages」をご参照ください。

Q11：Web CAPTCHA 統合時にリソースの読み込みに失敗する場合はどうすればよいですか？

システムでドメインフィルタリングまたは URL フィルタリングが有効になっているかどうかを確認してください。これらの機能により、重要な CAPTCHA リソースまたは API へのアクセス時に失敗が発生する可能性があります。有効になっている場合は、以下のドメインをアクセスホワイトリストに追加してください。

Q12：CAPTCHA 統合中に開発者ツールのコンソールログがクリアされ、「Console was cleared」と表示される場合はどうすればよいですか？

開発者ツールのコンソールログのクリアは、CAPTCHA によるセキュリティデータ収集アクションであり、通常の機能には影響しません。開発中は、コンソール設定で「ログを保持」を有効にしてログを保持できます。Chrome DevTools の Console パネルで設定エリアを開き、[ログを保持] チェックボックスをオンにすると、ページナビゲーション中にログがクリアされなくなります。

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

アプリ内で Webview + H5 を介して CAPTCHA を統合する場合 (V2 または V3 アーキテクチャ)：

• Webview にビジネスページ (ビジネス操作を含む) が含まれており、Webview 内の実際のボタンによって検証がトリガーされる場合は、トレースレス検証を使用できます。

• Webview にビジネス操作が含まれておらず、CAPTCHA 検証にのみ使用される場合、トレースレスモードはすべてのリクエストをブロックします。スライダー、ワンクリック、パズル、画像復元など、別のインタラクティブな CAPTCHA タイプを選択してください。

Q14：JavaScript を使用して直接 CAPTCHA をトリガーする実際のビジネスシナリオで、CAPTCHA を表示する方法は？

captcha インスタンスの show メソッドを使用してキャプチャを表示できます (traceless モードでの最初の検証ではグラフィカルキャプチャはレンダリングされず、show メソッドはサポートされていないことにご注意ください)。特定のシナリオでは自動化ツールとして識別され、ブロックされる可能性があるため、クリックをシミュレートしてキャプチャをトリガーすることはお勧めしません。

Q15：CAPTCHA インスタンスの show メソッドを使用して CAPTCHA を表示する場合、ビジネスページに実際のボタンがありません。button 初期化パラメータを省略できますか？

いいえ。button パラメーターは統合ドキュメントでは必須ですが、非表示要素として使用できます。このパラメーターを省略すると、トレースレスモードなどの特定のシナリオでキャプチャエラーが発生する場合があります。

Q16：V3 アーキテクチャで検証が成功した後、再度検証するために CAPTCHA をリフレッシュする方法は？

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

Q17：initAliyunCaptcha の初期化がタイムアウトした後に success コールバックが起動するのはなぜですか？

Captcha 2.0 のデフォルトの災害復旧メカニズムでは、初期化呼び出しが失敗した後に success コールバックが起動されます。これにより、プロダクト API の例外が発生した場合に検証ステップをスキップし、ビジネスフローがブロックされるのを防ぎます。

Q18：ネイティブ WeChat ミニプログラム統合でのエラー：AliyunCaptchaPluginInterface.show() 関数の呼び出しが失敗しました

現象：

ネイティブ WeChat ミニプログラムで Captcha 2.0 を使用すると、AliyunCaptchaPluginInterface.show() メソッドが o.Config.show is not a function エラーを返す場合があります。

考えられる原因と解決策：

1. ミニプログラムプラグインが正しく統合されていません。プラグインを統合するには、「ステップ 1：プラグインを宣言してコンポーネントをインポートする」をご参照ください。

   1. ネイティブミニプログラムの場合は、app.json ファイルと各ページの JSON ファイルを確認してください。

   2. uni-app プロジェクトの場合は、manifest.json ファイルと各ページの JSON ファイルを確認してください。

2. aliyun-captcha コンポーネントが読み込まれる前に CAPTCHA ロジックが実行されています。コンポーネントを読み込むには、「ステップ 2：コンポーネントテンプレートを挿入する」をご参照ください。

   1. WXML ファイル内の aliyun-captcha 要素は、フロントエンド CAPTCHA コンポーネントです。フロントエンドページとその JavaScript (JS) スクリプトは同期的に読み込まれます。JS スクリプトがフロントエンド要素の読み込みより先に実行されると、エラーが発生します。

3. ミニプログラムプラグインのバージョンに不一致があります。公式ドキュメントには V2 と V3 のサンプルコードが記載されています。対応するプラグインバージョンを使用していることを確認してください。

   1. ミニプログラムプラグインのバージョン情報は、[WeChat Developer Tools] > [Details] > [Basic Information] > [Plug-in Information] で確認できます。