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 和移动应用程序的云标识管理解决方案。它是一种高度可用的全局服务，可扩展到数亿个标识。

网络应用程序 - 您好.js

Web 应用实现使用 Hello.js 通过 Azure AD B2C 执行标识管理。Hello.js 是一个客户端 JavaScript SDK，用于使用 OAuth2 Web 服务进行身份验证和查询 REST API。

移动应用 - ADAL 插件

移动应用程序实现使用 ADAL Cordova 插件补丁 B2C。这是用于Apache Cordova应用程序的Active Directory身份验证库(ADAL)插件的切碎版本，cordova-plugin-ms-adal适用于Azure AD B2C。原始的cordova-plugin-ms-adal插件通过利用Active Directory为您的Apache Cordova应用程序提供了易于使用的身份验证功能。

解码智威汤逊

angular-jwt 的 jwtHelper 将负责帮助您解码令牌 (JWT) 并检查其到期日期。JSON Web 令牌是一种开放的行业标准 RFC 7519 方法，用于在双方之间安全地表示声明。

1. 项目立项：

2. 克隆或下载此存储库

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

3. 安装依赖项

   npm install

   bower install

阿拉伯数字。广告设置：

ADAL-B2C 配置

2. 创建 Azure AD B2C 目录

   记下"域名"，它将用作租户名称。

3. 注册应用程序
   按照说明创建应用程序并启用 Web 应用和本机客户端。请参阅注册 Web 应用程序和注册移动/本机应用程序

   输入回复 URL作为 http://localhost:8100 或要为应用提供服务的任何端口。

   在"应用程序声明">中，也选择"电子邮件地址"。

   记下应用程序 ID。它将用作客户端 ID。

4. 创建注册或登录策略

   记下策略的名称。它将用作策略。

5. 创建密码重置策略

   记下策略的名称。它将用作密码重置策略

3.广告设置：

在设置.值.js中，输入以下值

• 租户名称：步骤 2.1 中的域名

• 客户端 ID：步骤 2.2 中的应用程序 ID

• 策略：步骤 2.3 中的策略名称

4.运行此示例：

网络应用：

从外壳或命令行运行

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 登录和注册页面：adCustomPages/unified.html

• AD B2C 密码重置页：adCustomPages/resetpassword.html

在 adCustomPages/unified.html 的 442 和 445 行中，输入您的租户名称、密码重置策略和客户端 ID

页面应在 Blob 中上传，其 URL 应在 Azure AD B2C 策略中引用。

• 创建存储帐户，如将示例内容上传到 Azure Blob 存储中所述

• 在容器中上传示例广告页面，并记下其网址。

• 对于创建的 Blob 服务存储帐户，创建一个将"*"作为"允许源"的 CORS 规则。在"允许的方法"中选择"全部"。输入 * 作为允许的标头和公开的标头。

• 自定义策略

现在，在您的应用程序中，您可以看到自定义的 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://learn.microsoft.com/en-us/azure/active-directory-b2c/active-directory-b2c-overview

Azure AD

3. - 通过使用 Azure AD
   https://learn.microsoft.com/en-us/azure/active-directory/develop/active-directory-devquickstarts-angular 帮助保护 AngularJS 单页应用

4. Azure AD B2C：使用 OAuth 2.0 隐式流
   https://learn.microsoft.com/en-us/azure/active-directory-b2c/active-directory-b2c-reference-spa 进行单页应用登录

注意：不仅可以提出和回答自己的问题，而且明确鼓励。