1. StackOverflow 文件
  2. azure-active-directory 教程
  3. Azure Active Directory B2C
  4. Azure AD B2C - Angularjs 示例（Web 和移動）應用程式

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

Created: November-22, 2018

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

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

Azure AD B2C

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

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 令牌是一種開放的，行業標準的 RFC 7519方法，用於在雙方之間安全地表示索賠。

1.專案設定：

  1. 克隆或下載此儲存庫

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

  2. 安裝依賴項

    npm install

    bower install

2. AD 設定：

ADAL-B2C 配置

  1. 建立 Azure AD B2C 目錄

    注意域名，它將被用作 tenantName 。

  2. 註冊應用程式按照說明建立應用程式並啟用 Web App 和 Native Client。請參閱註冊 Web 應用程式並註冊移動/本機應用程式

    輸入回覆 URL 為 http：// localhost：8100 或你將為你的應用程式提供服務的任何埠。

    在應用程式宣告中，也選擇電子郵件地址。

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

  3. 建立註冊或登入策略

    請注意策略的名稱。它將被用作政策。

  4. 建立密碼重置策略

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

3. AD 設定：

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

  • tenantName：步驟 2.1 中的域名
  • clientId：步驟 2.2 中的應用程式 ID
  • policy：步驟 2.3 中的策略名稱

4.執行此示例：

網路應用：

從你的 shell 或命令列執行

ionic serve

移動應用：

  1. 新增平臺

cordova platform add android

cordova platform add ios

  1. 生成圖示和啟動螢幕資源

ionic cordova resources

  1. 構建應用程式

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 中，並且應在 Azure AD B2C 策略中引用其 URL。

現在，在你的應用程式中，你可以看到自定義 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

相關檔案：

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

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

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