教學課程：使用 Arkose Labs 平臺設定 Azure Active Directory B2C

在本教學課程中，瞭解如何整合 Azure Active Directory B2C (Azure AD B2C) 驗證與 Arkose Labs Arkose Protect Platform。 Arkose Labs 產品可協助組織抵禦 Bot 攻擊、帳戶接管和詐騙帳戶開啟。

必要條件

若要開始，您需要：

• Azure 訂用帳戶
  • 如果沒有訂用帳戶，您可以取得 Azure 免費帳戶
• 連結至 Azure 訂用帳戶的Azure AD B2C 租使用者
• Arkose Labs 帳戶
  • 移至 arkoselabs.com 以 要求示範

案例描述

Arkose Labs 產品整合包含下列元件：

• Arkose 保護平臺 - 可防範 Bot 和其他自動化濫用的服務
• Azure AD B2C 註冊使用者流程 - 使用 Arkose Labs 平臺的註冊體驗
  • 自訂 HTML、JavaScript 和 API 連接器與 Arkose 平臺整合
• Azure Functions - 使用 API 連接器功能的託管 API 端點
  • 此 API 會驗證 Arkose Labs 會話權杖的伺服器端
  • 深入瞭解Azure Functions概觀

下圖說明 Arkose Labs 平臺如何與 Azure AD B2C 整合。

1. 使用者註冊並建立帳戶。 使用者選取 [ 提交]，並會出現 Arkose Labs 強制執行挑戰。
2. 使用者完成挑戰。 Azure AD B2C 會將狀態傳送至 Arkose Labs 以產生權杖。
3. Arkose Labs 會將權杖傳送至 Azure AD B2C。
4. Azure AD B2C 會呼叫中繼 Web API 來傳遞註冊表單。
5. 註冊表單會移至 Arkose Labs 以進行權杖驗證。
6. Arkose Labs 會將驗證結果傳送至中繼 Web API。
7. API 會將成功或失敗的結果傳送至 Azure AD B2C。
8. 如果挑戰成功，註冊表單會移至完成驗證的 Azure AD B2C。

向 Arkose Labs 要求示範

1. 移至 arkoselabs.com 以 預訂示範。
2. 建立帳戶。
3. 流覽至 Arkose 入口網站 登入頁面。
4. 在儀表板中，流覽至網站設定。
5. 找出您的公開金鑰和私密金鑰。 您稍後會使用此資訊。

注意

公開金鑰和私密金鑰值為 ARKOSE_PUBLIC_KEY 和 ARKOSE_PRIVATE_KEY 。 請參閱 Azure-Samples/active-directory-b2c-node-sign-up-user-flow-arkose。

與 Azure AD B2C 整合

建立 ArkoseSessionToken 自訂屬性

若要建立自訂屬性：

1. 登入Azure 入口網站，然後流覽至Azure AD B2C。
2. 選取 [使用者屬性 ] 。
3. 選取 [新增]。
4. 輸入 ArkoseSessionToken 作為屬性 Name。
5. 選取 [建立]。

深入瞭解： 在 Azure Active Directory B2C 中定義自訂屬性

建立使用者流程

使用者流程適用于註冊和登入，或註冊。 註冊期間會出現 Arkose Labs 使用者流程。

1. 在 Azure Active Directory B2C 中建立使用者流程和自訂原則。 如果使用使用者流程，請使用 [建議]。

2. 在使用者流程設定中，移至 [使用者屬性]。

3. 選取 ArkoseSessionToken 宣告。

   

設定自訂 HTML、JavaScript 和頁面版面配置

1. 移至 Azure-Samples/active-directory-b2c-node-sign-up-user-flow-arkose。
2. 尋找具有 JavaScript <script> 標籤的 HTML 範本。 這些動作有三件事：

• 載入 Arkose Labs 腳本，以轉譯其小工具並執行用戶端 Arkose Labs 驗證。

• extension_ArkoseSessionToken隱藏對應至自訂屬性的 ArkoseSessionToken 輸入元素和標籤。

• 當使用者完成 Arkose Labs 挑戰時，會驗證使用者回應並產生權杖。 自訂 JavaScript 中的回呼 arkoseCallback 會將 extension_ArkoseSessionToken 的值設定為產生的權杖值。 此值會提交至 API 端點。

  注意

  移至用戶端 指示developer.arkoselabs.com。 請遵循步驟，為您的使用者流程使用自訂 HTML 和 JavaScript。

3. 在 Azure-Samples 中，修改 selfAsserted.html 檔案，使其 <ARKOSE_PUBLIC_KEY> 符合您為用戶端驗證所產生的值。

4. 在已啟用 CORS) 的跨原始來源資源分享 (裝載 HTML 頁面。

5. 建立儲存體帳戶。

6. Azure 儲存體的 CORS 支援。

   注意

   如果您有自訂 HTML，請將元素複製並貼 <script> 到您的 HTML 頁面上。

7. 在Azure 入口網站中，移至Azure AD B2C。

8. 流覽至 [使用者流程]。

9. 選取您的使用者流程。

10. 選取 [頁面配置]。

11. 選取 [本機帳戶註冊] 頁面配置。

12. 針對 [使用自訂頁面內容]，選取 [ 是]。

13. 在 [使用自訂頁面內容] 中，貼上您的自訂 HTML URI。

14. (選擇性) 如果您使用社交識別提供者，請針對 [社交帳戶註冊] 頁面重複步驟。

    

15. 從您的使用者流程，移至 [屬性]。

16. 選取 [啟用 JavaScript]。

深入瞭解： 在 Azure Active Directory B2C 中啟用 JavaScript 和頁面版面配置版本

建立和部署 API

本節假設您使用Visual Studio Code來部署Azure Functions。 您可以使用Azure 入口網站、終端機或命令提示字元來部署。

移至 Visual Studio Marketplace 以安裝Visual Studio Code 的Azure Functions。

在本機執行 API

1. 在 Visual Studio Code 的左側導覽中，移至 Azure 擴充功能。
2. 選取本機 Azure 函式的 [ 本機專案 ] 資料夾。
3. 按F5或選取 [偵錯開始偵> 錯]。 此命令會使用所建立的偵錯組態 Azure 函式。
4. Azure Function 會視需要產生本機開發、安裝相依性和 Function Core 工具的檔案。
5. 在 [Visual Studio Code終端機] 面板中，[函式核心] 工具的輸出隨即出現。
6. 當主機啟動時，選取 [Alt+ 按一下 輸出中的本機 URL]。
7. 瀏覽器會開啟並執行 函式。
8. 在Azure Functions總管中，以滑鼠右鍵按一下函式以查看本機裝載的函式 URL。

新增環境變數

本節中的範例會在使用 HTTP 基本驗證時保護 Web API 端點。 深入瞭解 Internet Engineering Task Force 頁面 RFC 7617：基本驗證。

使用者名稱和密碼會儲存為環境變數，而不是存放庫的一部分。 深入瞭解程式碼，並在本機測試Azure Functions本機設定檔。

1. 在您的根資料夾中，建立 local.settings.json 檔案。
2. 將下列程式碼複製並貼到檔案上：

{
  "IsEncrypted": false,
  "Values": {
    "AzureWebJobsStorage": "",
    "FUNCTIONS_WORKER_RUNTIME": "node",
    "BASIC_AUTH_USERNAME": "<USERNAME>",
    "BASIC_AUTH_PASSWORD": "<PASSWORD>",
    "ARKOSE_PRIVATE_KEY": "<ARKOSE_PRIVATE_KEY>",
    "B2C_EXTENSIONS_APP_ID": "<B2C_EXTENSIONS_APP_ID>"
  }
}

3. BASIC_AUTH_USERNAME和BASIC_AUTH_PASSWORD是用來驗證 Azure 函式 API 呼叫的認證。 選取值。

• <ARKOSE_PRI加值稅E_KEY > 是您在 Arkose Labs 平臺中產生的伺服器端密碼。
  • 它會呼叫 Arkose Labs 伺服器端驗證 API，以驗證前端所產生的 值 ArkoseSessionToken 。
  • 請參閱 伺服器端指示。
• <B2C_EXTENSIONS_APP_ID > 是 Azure AD B2C 用來將自訂屬性儲存在目錄中的應用程式識別碼。

4. 流覽至應用程式註冊。

5. 搜尋 b2c-extensions-app。

6. 從 [ 概觀] 窗格中，複製應用程式 (用戶端) 識別碼。

7. 移除 - 字元。

   

將應用程式部署至 Web

1. 將您的 Azure 函式部署至雲端。 深入瞭解Azure Functions檔。

2. 複製 Azure 函式的端點 Web URL。

3. 部署之後，選取 [上傳設定] 選項。

4. 您的環境變數會上傳至 App Service 的應用程式設定。 深入瞭解 Azure 中的應用程式設定。

   注意

   您可以 管理函式應用程式。 另請參閱部署專案檔，以瞭解Visual Studio Code開發Azure Functions。

設定並啟用 API 連接器

1. 建立 API 連接器。 請參閱將 API 連接器新增至註冊使用者流程。

2. 為您的使用者流程啟用它。

   

• 端點 URL - 您在部署 Azure 函式時複製的函式 URL
• 使用者 名稱 - 您定義的使用者名稱
• 密碼 - 您定義的密碼

3. 在使用者流程的 API 連接器 設定中，選取在 建立使用者之前叫用的 API 連接器。

4. API 會 ArkoseSessionToken 驗證值。

   

測試使用者流程

1. 開啟 Azure AD B2C 租用戶。
2. 在 [原則] 底下，選取 [使用者流程]。
3. 選取您建立的使用者流程。
4. 選取 [執行使用者流程]。
5. 針對 [應用程式 ] 選取已註冊的應用程式， (範例為 JWT) 。
6. 針對 [回復 URL]，選取重新導向 URL。
7. 選取 [執行使用者流程]。
8. 執行註冊流程。
9. 建立帳戶。
10. 登出。
11. 執行登入流程。
12. 選取 [繼續]。
13. Arkose Labs 的難題隨即出現。

資源

• Azure-Samples/active-directory-b2c-node-sign-up-user-flow-arkose
  • 尋找 Azure AD B2C 註冊使用者流程
• Azure AD B2C 自訂原則概觀
• 教學課程：在 Azure Active Directory B2C 中建立使用者流程和自訂原則