Captcha：用戶端接入常見問題

Q1：一個頁面有多處用到驗證碼怎麼處理？

• 方法1：使用彈出式模式（popup），將傳入initAliyunCaptcha方法的button元素設定為一個隱藏元素，然後在需要觸發驗證碼的元素上綁定相關事件（一般為點擊事件），在事件回呼函數中用JavaScript觸發上述button元素的點擊事件，即可觸發驗證碼彈窗，整個頁面共用一個驗證碼執行個體。

• 方法2：將驗證碼封裝為一個組件，在需要調用的地方使用，初始化相關參數可作為props傳入，驗證流程完畢後需要將驗證碼組件卸載（從dom中移除）。更多詳情，請參見用戶端V3架構Demo樣本下載、用戶端V2架構Demo樣本下載。

Q2：手機驗證碼發送情境怎麼接入驗證碼？

• 詳情請參見V2架構傳送簡訊情境Demo樣本（React）。

• 詳情請參見V3架構傳送簡訊情境Demo樣本（React）。

Q3：V2用戶端架構如何手動重新整理/銷毀驗證碼，或者手動彈出/關閉驗證碼彈窗？

調用驗證碼執行個體對應方法。其中無痕模式首次驗證不支援下列方法。

Q4：APP端接入，如何在APP側進行驗證請求？

可以在captchaVerifyCallback中調用自訂Java介面testJsInterface（安卓）或通過WkScriptMessageHandler協議實現JavaScript與WKWebView互動的方法（iOS），將captchaVerifyParam透給APP側，然後關閉驗證碼H5視窗並發起驗證請求，擷取到驗證結果後APP側自行提示驗證是否通過，如不通過則再次彈出H5視窗重新驗證即可。該情境下不支援使用無痕驗證模式，因為每次驗證均會重新初始化驗證碼（新的驗證碼周期），導致每次均為無痕驗證，即使無痕不通過下次驗證也不會進入二次驗證形態，因此防護效果稍弱。

Q5：在觸發驗證碼彈窗之前需要做自訂業務操作怎麼處理？（手機號格式校正通過才會觸發拼圖驗證碼）

自訂業務操作校正通過後，再使用驗證碼執行個體方法captcha.show彈出驗證碼進行驗證，button元素可設定為隱藏元素，必須傳初始化button參數（參考Q15）。

Q6：Uncaught TypeError: Cannot set properties of undefined (setting 'onclick') 報錯如何解決？

沒找到element或者button元素，這兩個元素需要在DOM中存在，初始化參數需要傳入正確的元素id。

Q7：設定了slideStyle參數，怎麼拼圖下的滑塊沒有生效？

slideStyle參數只對滑塊驗證碼生效，拼圖驗證碼不受該參數影響。拼圖驗證碼的答案為固定的，前端不可以修改圖片/滑塊的長度和寬度，否則會造成驗證異常。

Q8：captchaVerifyCallback裡返回了驗證結果資訊，但是為什麼驗證碼沒有反應呢？

可能的原因如下：

1. return語句是在如ajax的success回呼函數中聲明的，而外面的captchaVerifyCallback是沒有return出去的，因此驗證碼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：參考demo代碼接入了，為什麼驗證碼沒有渲染出來？

可能的原因如下：

• 初始化請求失敗，初始化請求即https://prefix.captcha-open.aliyuncs.com這個介面的請求，可能是因為網路原因導致的請求失敗或者逾時；或者傳回值中有Forbidden.AccountAccessDenied時，可能為阿里雲帳號異常或欠費導致的請求失敗。此時瀏覽器開發人員工具的console中會有相應的網路報錯資訊。

• 若瀏覽器開發人員工具的console中沒有報錯資訊，且初始化請求成功了，則有可能是請求傳回值中CaptchaType欄位是為TRACELESS，此時是無痕驗證模式，首次初始化不會渲染圖形驗證。

Q10：微信小程式接入上傳代碼提示程式碼封裝過大，如何解決？

出於安全考慮，外掛程式代碼使用了較為複雜的混淆機制，代碼體積較大。目前可使用微信小程式的分包機制來解決，即將使用到驗證碼的頁面分包。可參考微信原生使用分包、Taro微信小程式獨立分包、uni-app中分包內引入外掛程式程式碼封裝。

Q11：在接入過程中Web端驗證碼出現驗證碼資源載入失敗的情況怎麼辦？

請檢查您的系統是否開啟了網域名稱過濾或網址過濾，開啟以上功能會導致訪問驗證碼重要資源或介面失敗。如果開啟了以上功能，請將以下網域名稱加入訪問白名單。

Q12：接入驗證碼時出現'Console was cleared'開發人員工具Console中日誌被清除，如何解決？

清除開發人員工具日誌為驗證碼安全採集動作，不影響正常功能，開發階段可以在Console設定中開啟Preserve log保留日誌即可。

Q13：App內使用Webview+H5接入驗證碼可以使用無痕形態嗎？

App內使用Webview+H5接入驗證碼（V2或V3架構）時：

• 如果Webview內包含業務頁面（有業務操作），且通過Webview內的實體按鈕觸發驗證，可以使用無痕驗證。

• 如果Webview內沒有業務操作，僅包含驗證碼驗證時，無痕形態會導致全量攔截，請選擇其他互動式驗證碼形態（滑塊、一點即過、拼圖驗證、映像複原）。

Q14：實際業務中存在需要JS直接拉起驗證碼的情境，如何觸發驗證碼？

可以使用驗證碼執行個體的show方法彈出驗證碼（無痕形態首次驗證不會渲染圖形驗證，不支援show方法彈出）。不建議使用類比點擊的方式觸發，會在某些情境被識別為自動化工具導致攔截。

Q15：使用驗證碼執行個體show方法彈出驗證碼後，業務上沒有實體的按鈕，初始化參數button可以不傳嗎？

不可以。接入文檔中button參數為必傳，可作為隱藏元素使用，不傳該參數可能會引起某些情境下的驗證碼報錯（如：無痕形態）。

Q16：V3架構下驗證通過後，需要重新驗證，如何重新整理驗證碼？

驗證碼驗證通過後，一個驗證生命週期已經結束，如需再次驗證，需要調用初始化方法重新初始化驗證碼進行驗證。請參考Web和H5用戶端V3架構接入中程式碼範例的success回呼函數說明。

Q17：為什麼initAliyunCaptcha初始化逾時後會發起success回調？

在驗證碼2.0的預設容災機制中，初始化調用失敗後將發起success回調，支援在產品介面異常情境下跳過驗證環節，避免阻塞業務。