產品QA

Q1: 驗證碼的生命周期是怎樣的？

生命周期流程圖如下：

整個流程中只需初始化一次驗證碼，無需再多次調用initAliyunCaptcha方法。阿里云驗證碼2.0不支持單個頁面注冊多個驗證碼實例，多次調用初始化方法會重復添加元素和注冊事件，造成驗證表現異常。

如果出現一次驗證流程發出了多個驗證請求，可以考慮為重復初始化的問題，需要排查觸發調用初始化方法的按鈕是否做了防抖處理。

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

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

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

Q3：手機驗證碼發送場景怎么接入驗證碼？

詳情請參見下載發送手機短信場景Demo示例（React）。

Q4：如何手動刷新/銷毀驗證碼，或者手動彈出/關閉驗證碼彈窗？

調用驗證碼實例對應方法。其中，無痕模式首次驗證不支持下列方法。

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

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

Q6：在觸發驗證碼彈窗之前需要做自定義業務操作怎么處理？

可以將傳入initAliyunCaptcha的button元素設置為一個隱藏元素，然后在需要觸發驗證碼的元素上綁定相關事件（一般為點擊事件）， 在事件回調中做業務操作（如業務參數校驗），通過之后再用JavaScript觸發上述button元素的點擊事件。

Q7：無痕模式的驗證邏輯是怎樣的？

無痕驗證流程圖如下：

• captchaResult為false，將會自動彈出二次驗證。

• captchaResult為true，執行onBizResultCallback，做業務提示、跳轉等邏輯。

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

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

Q9：設置了slideStyle參數，怎么拼圖下的滑塊沒有生效？

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

Q10：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參數。

Q11：參考demo代碼接入了，為什么驗證碼沒有渲染出來？

可能的原因如下：

• 初始化請求失敗，初始化請求即https://prefix.captcha-open.aliyuncs.com這個接口的請求，可能是因為網絡原因導致的請求失敗或者超時；或者返回值中有Forbidden.AccountAccessDenied時，可能為阿里云賬號異常或欠費導致的請求失敗。此時瀏覽器開發者工具的console中會有相應的網絡報錯信息。

• 若瀏覽器開發者工具的console中沒有報錯信息，且初始化請求成功了，則有可能是請求返回值中CaptchaType字段是為TRACELESS，此時是無痕驗證模式，首次初始化不會渲染圖形驗證，具體驗證邏輯可以參考Q7：無痕模式的驗證邏輯是怎樣的？。

Q12：微信小程序接入上傳代碼提示代碼包過大，如何解決？

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

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

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

Q14：驗證碼彈窗的關閉按鈕有沒有回調函數？關閉按鈕時需要執行業務自定義操作怎么處理？

目前沒有這個按鈕的回調，可以在getInstance回調函數里手動覆蓋aliyunCaptcha-btn-close元素或者aliyunCaptcha-mask元素的點擊事件，調用實例方法captcha.hide()來隱藏彈窗、蒙版，然后做其他自定義業務操作。