Azure AD B2C - Angularjs 示例（Web 和移動）應用

Question

如何在基於 angularJs 的移動和 Web 應用程序中使用 Azure AD B2C？

Azure AD B2C 是適用於 Web 和移動應用程序的雲標識管理解決方案。 它是一種高度可用的全球服務，可擴展到數億個身份

在應用程序中使用 Azure AD B2C 的所有方法是什么？

Answer 1

此示例演示了如何使用 AD B2C 來保護基於 AngularJS 的 Web 和移動應用程序。

參考https://github.com/NewtonJoshua/Azure-ADB2C-Angularjs-sample

Azure AD B2C

Azure AD B2C 是適用於 Web 和移動應用程序的雲標識管理解決方案。 它是一種高度可用的全球服務，可擴展到數億個身份。

網絡應用程序 - Hello.js

Web 應用實現使用 Hello.js，它通過 Azure AD B2C 執行身份管理。 Hello.js 是一個客戶端 JavaScript SDK，用於使用 OAuth2 Web 服務進行身份驗證和查詢 REST API。

移動應用程序 - ADAL 插件

移動應用實現使用 ADAL Cordova Plugin Patch For B2C。 這是用於 Apache Cordova 應用程序的 Active Directory 身份驗證庫 (ADAL) 插件的切碎版本，cordova-plugin-ms-adal 可與 Azure AD B2C 配合使用。 原始的cordova-plugin-ms-adal 插件通過利用Active Directory 為您的Apache Cordova 應用程序提供易於使用的身份驗證功能。

解碼 JWT

angular-jwt 的 jwtHelper 將負責幫助您解碼令牌 (JWT) 並檢查其到期日期。 JSON Web Tokens 是一種開放的、行業標准的 RFC 7519 方法，用於在兩方之間安全地表示聲明。

1.項目設置：

2. 克隆或下載此存儲庫

   git clone https://github.com/NewtonJoshua/Azure-ADB2C-Angularjs-sample.git

3. 安裝依賴

   npm install

   bower install

2.廣告設置：

ADAL-B2C 配置

2. 創建 Azure AD B2C 目錄

   請注意Domain name ，它將用作tenantName 。

3. 注冊您的應用程序
   按照說明創建應用程序並啟用 Web App 和 Native 客戶端。 請參閱注冊 Web 應用程序和注冊移動/本機應用程序

   將回復 URL 輸入為 http://localhost:8100 或您將提供應用程序的任何端口。

   在應用程序聲明中，也選擇電子郵件地址。

   請注意應用程序 ID 。 它將用作clientId 。

4. 創建注冊或登錄策略

   請注意該策略的名稱。 它將用作policy 。

5. 創建密碼重置策略

   請注意該策略的名稱。 它將用作密碼重置策略

3.廣告設置：

在 settings.value.js 中，輸入以下值

• 租戶名稱：步驟 2.1 中的域名

• clientId：步驟 2.2 中的應用程序 ID

• 策略：步驟 2.3 中的策略名稱

4. 運行此示例：

網絡應用程序：

從您的 shell 或命令行運行

ionic serve

移動應用：

2. 添加平台

cordova platform add android

cordova platform add ios

2. 生成圖標和閃屏資源

ionic cordova resources

2. 構建應用程序

cordova build

有關構建應用程序的更多詳細信息，請參閱 Cordova 文檔、Android 平台指南和 iOS 平台指南

5. 自定義 Azure AD B2C 用戶界面

可以自定義 Azure AD B2C 登錄屏幕以適合我們的品牌。 請參閱自定義 UI

在這個示例中，我們有兩個自定義的 UI 屏幕，

• AD B2C 登錄 ansd 注冊頁面：adCustomPages/unified.html

• AD B2C 密碼重置頁面：adCustomPages/resetpassword.html

在 adCustomPages/unified.html 的第 442 和 445 行，輸入您的tenantName、password-reset-policy 和 clientId

這些頁面應以 blob 形式上傳，並且它們的 url 應在 Azure AD B2C 策略中引用。

• 按照將示例內容上傳到 Azure Blob 存儲中所述創建存儲帳戶

• 上傳容器中的示例廣告頁面並記下它們的 URL。

• 對於創建的 Blob 服務存儲帳戶，創建一個 CORS 規則，其中“*”作為 ALLOWED ORIGINS。 在允許的方法中選擇所有。 為 ALLOWED HEADERS 和 EXPOSED HEADERS 輸入 *。

• 自定義您的政策

現在在您的應用程序中，您可以看到自定義的 UI。

執行：

如果您必須基於此示例構建應用程序，請記住安裝所需的依賴項。

網絡應用程序

依賴項：

bower install ng-hello --save

bower install angular-jwt --save

參考 hello.service.js

移動應用

依賴項：

cordova plugin add https://github.com/jospete/azure-activedirectory-library-for-cordova --save

bower install angular-jwt --save

參考 adal.service.js

相關文件：

2. 概述：
   https://docs.microsoft.com/en-us/azure/active-directory-b2c/active-directory-b2c-overview

3. Azure AD - 使用 Azure AD 幫助保護 AngularJS 單頁應用程序
   https://docs.microsoft.com/en-us/azure/active-directory/develop/active-directory-devquickstarts-angular

4. Azure AD B2C：使用 OAuth 2.0 隱式流進行單頁應用登錄
   https://docs.microsoft.com/en-us/azure/active-directory-b2c/active-directory-b2c-reference-spa

注意： 不僅可以提出和回答您自己的問題，而且明確鼓勵這樣做。