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