如何在用戶端、服務端接入阿里雲驗證碼 - Captcha

開通驗證碼2.0後，您需要在用戶端和服務端接入驗證碼後，才能使用驗證碼進行驗證。本文介紹如何在用戶端和服務端接入。

方法概覽

接入阿里雲驗證碼只需要4步：

開通訂用帳戶或隨用隨付驗證碼2.0並擷取身份標。
建立一個驗證情境，擷取情境ID。
將業務用戶端和服務端接入驗證碼，並進行測實驗證。
發布上線。

V3驗證架構時序圖

滑塊驗證、拼圖驗證、一點即過和映像複原

時序圖說明：

使用者在業務用戶端初始化驗證碼時，業務用戶端將向驗證碼伺服器請求擷取驗證碼的JS資源（例如圖片或題目等）。
驗證碼服務端動態返回相關JS資源，業務用戶端進行資源載入並渲染驗證碼。
使用者在業務用戶端成功完成驗證碼互動（例如滑塊、拼圖或映像複原）後，JS自動發送答案驗證請求，驗證碼服務端驗證答案是否正確和是否為機器請求。
驗證碼服務端如果驗證通過後，調用success回呼函數返回CaptchaVerifyParam，如果驗證不通過，將自動重新整理驗證碼，重新進行驗證。
業務用戶端攜帶業務參數和CaptchaVerifyParam發送請求到商務服務端進行參數校正。
商務服務端調用驗證碼服務端介面VerifyIntelligentCaptcha進行CaptchaVerifyParam參數的校正。
驗證碼服務端驗證參數是否正確和是否為機器請求，返回驗證結果。
商務服務端根據驗證結果進行業務處理後，向用戶端網頁返回驗證結果和業務處理結果。

無痕驗證

時序圖說明：

使用者在業務用戶端初始化驗證碼時，業務用戶端將向驗證碼伺服器請求擷取驗證碼的JS資源（例如圖片或題目等）。
驗證碼服務端動態返回相關JS資源。
使用者在業務用戶端首次單擊觸發按鈕發起驗證，阿里雲服務端會驗證是否為安全使用者。
阿里雲服務端將驗證結果返回到業務用戶端：
- 如果使用者無風險，則首次驗證通過，調用success回呼函數返回CaptchaVerifyParam並進行後續業務驗簽。
- 如果使用者存在風險，則首次驗證可疑，將進行二次驗證
  1. 業務用戶端進行JS資源載入並渲染驗證碼，使用者在業務用戶端成功完成驗證碼互動（例如滑塊、拼圖或映像複原）後，JS自動發送答案驗證請求，驗證碼服務端驗證答案是否正確和是否為機器請求。
  2. 如果二次驗證通過，將調用success回呼函數返回CaptchaVerifyParam並進行後續業務驗簽；如果二次驗證不通過，業務用戶端將自動重新整理驗證碼，重新進行驗證。
業務用戶端攜帶業務參數和CaptchaVerifyParam發送請求到商務服務端進行參數校正。
商務服務端調用驗證碼服務端介面VerifyIntelligentCaptcha進行CaptchaVerifyParam參數的校正。
驗證碼服務端驗證參數是否正確和是否為機器請求，返回驗證結果。
商務服務端根據驗證結果進行業務處理後，向用戶端網頁返回驗證結果和業務處理結果。

步驟一：開通驗證碼服務

登入驗證碼2.0控制台，單擊立即购买。
開通驗證碼服務後，您需要在概览頁面的執行個體基本資料卡片地區，擷取身份标（prefix），用於用戶端接入。

步驟二：建立驗證情境

在左側導覽列，單擊场景管理 > 新建场景。
根據業務情境需求建立驗證情境，設定场景名称、接入方式、验证码形态等參數，擷取场景ID。

步驟三：接入驗證碼

Web和H5接入

如果採用Web和H5接入，建立驗證情境時，接入方式需選擇為Web/H5。

用戶端接入：在使用驗證功能的用戶端頁面（Web和H5）中，整合驗證碼初始化代碼，實現用戶端接入。關於整合驗證碼的初始化程式碼範例，請參見Web和H5用戶端V3架構接入。
服務端接入：在用戶端頁面（Web和H5）對應的服務端中，整合SDK後，調用服務端接入初始化介面VerifyIntelligentCaptcha，發起驗證碼驗證。具體操作，請參見服務端接入。

App接入

如果採用App接入，建立驗證情境時，接入方式需選擇為Webview+H5（支持APP/小程序接入）。

用戶端接入：在使用驗證功能的用戶端頁面（Web和H5）中，整合驗證碼初始化代碼，實現用戶端接入。關於整合驗證碼的初始化程式碼範例，請參見Web和H5用戶端V3架構接入。
服務端接入：在用戶端頁面（Web和H5）對應的服務端中，整合SDK後，調用服務端接入初始化介面VerifyIntelligentCaptcha，發起驗證碼驗證。具體操作，請參見服務端接入。
App端接入
- Android App端：利用WebView組件在App應用中開啟並部署需要接入阿里雲驗證碼2.0的業務頁面。具體操作，請參見Android接入V3架構。
- iOS App端：利用WKWebView組件在App應用中開啟並部署需要接入阿里雲驗證碼2.0的業務頁面。具體操作，請參見iOS接入V3架構。

微信小程式接入

如果採用微信小程式接入，建立驗證情境時，接入方式需選擇為Webview+H5（支持APP/小程序接入）或微信小程序原生插件。

微信小程式接入：在控制台添加驗證情境後，您需要在使用驗證功能的微信小程式頁面中，整合驗證碼初始化代碼，實現微信小程式接入。具體操作，請參見小程式接入。

接入驗證

測試業務用戶端初始化是否成功
接入配置完成後，開啟整合驗證碼的頁面瀏覽器控制台，查看Network資訊。
如果存在如下所有內容，表示用戶端接入成功：
- 初始化請求（圖示①）
- 初始化請求的Preview中存在驗證碼相關資訊（圖示②），且success為true。
- 驗證碼資源（圖示③）

測試業務用戶端驗證是否成功
發送驗證請求後，開啟整合驗證碼的頁面瀏覽器控制台，查看Network資訊。
如果VerifyResult為true（圖示①）則表示驗證成功。

測試商務服務端接入是否成功
用戶端接入成功後，會通過業務介面將驗證參數captchaVerifyParam發送給商務服務端。商務服務端調用阿里雲驗證介面VerifyIntelligentCaptcha後，會返回驗證結果。
您可以在商務服務端請求中查看驗證結果。如果VerifyResult為true代表格服務端接入成功。
```
{
    "RequestId": "C******-B***-4***-A***-5*******1",
    "Message": "success",
    "HttpStatusCode": 200,
    "Code": "Success",
    "Success": true,
    "Result": {
        "VerifyCode": "T001",
        "VerifyResult": true
    }
}
```

測實驗證碼是否能正常使用
服務端接入成功後，會將業務結果和阿里雲驗證碼結果返回給用戶端，用戶端根據返回結果做出不同的業務處理。您可以在用戶端使用驗證碼，測實驗證效果。
- 滑塊驗證、拼圖驗證、一點即過和映像複原：按提示進行驗證後，顯示驗證通過，則表示驗證成功。
- 無痕驗證：業務互動成功，則表示驗證成功。以登入情境為例，輸入使用者名稱和密碼並登入後，顯示登入成功，則表示驗證成功。

步驟四：發布上線

完成上述步驟後，即可將驗證碼發布上線。

查看統計資料

完成接入配置後，您可以在查看統計資料頁面，查看驗證資料。