65.9K
CodeProject 正在变化。 阅读更多。
Home

AAD 身份验证：使用 Azure AD B2C 和 MSAL 库进行 Angular2 身份验证

uspatel
starIconstarIconstarIcon
emptyStarIcon
starIcon
emptyStarIcon

3.96/5 (7投票s)

2017 年 11 月 3 日

CPOL

5分钟阅读

viewsIcon

28164

downloadIcon

253

本示例演示如何将 MSAL 与 Azure B2C 结合用于身份验证。

引言

在大多数应用程序中，我们需要进行身份验证，无论是基于 Web 的还是移动/窗口的。因此，AAD 可以成为应用程序身份验证的一个不错的解决方案。它提供身份即服务，并支持 OAuth、OpenID 和 SAML 等协议。在开始演示示例的实现之前，请阅读这些协议的简介。如果您已经了解了这些，可以跳过此部分。

  1. AAD
  2. Azure B2C
  3. ADAL 及其库：请注意其针对 v1.0
  4. MSAL 及其库：它针对 v2.0
  5. ADAL 与 MSAL / v1.0 与 v2.0

1. 配置 Azure B2C

  1. 请按照 此链接 中提到的步骤操作。您可以按照给出的简单步骤创建所有用于注册/登录/密码重置等的策略。

  2. 注册您的应用程序：将回复 URL 设置为 https://:4200

2. 设置应用程序

  1. 在您的系统上下载并安装 Node.js。
  2. 下载 Visual Studio Code IDE。
  3. 检查命令提示符中的 npm 命令是否在您的系统上工作，如果不行，请设置 npm 的路径。
  4. 安装 CLI。
    Angular CLI 是一个非常棒的命令行工具，我们可以使用它完成创建、构建和部署 Angular 项目所需的所有任务。
    npm install -g @angular/cli
    如果您已经安装了 CLI，那么
    npm uninstall -g angular-cli
npm cache clean
npm install -g @angular/cli@latest
  5. 使用 CLI 创建项目，并通过 ng serve 命令运行示例应用程序。
    ng new msalb2c-demo
cd msalb2c-demo
npm i
ng serve -o
    ng serve -o 将在您的默认浏览器中打开 https://:4200 以查看您的应用程序。有各种 CLI 命令可用于简化项目开发。 CLI 命令

3. MSAL 实现

由于我们正在处理 Angular2 项目，我们需要 JS 库，该库可在 github 上找到。因此，请在您的项目中安装此 npm 包。

npm install msal

在这里，我假设您的需求是在根级别对应用程序进行身份验证。因此，当用户访问您的应用程序时，

  1. 它会重定向到 AAD B2C 身份验证页面。
  2. 从身份验证页面，用户可以注册自己、重置密码和登录。
  3. 如果用户成功登录，它将被重定向到您在 Azure 门户上注册应用程序时在 回复 URL 中提供的应用程序 URL，如下屏幕所示。

  4. 在应用程序重定向（身份验证后），MSAL 库会将必要的参数存储到 sessionstorage 中，您可以使用 window.sessionStorage.getItem('msal.idtoken') 获取它。 MSAL 库默认将令牌和其他参数存储在 sessionstorage 中。如果需要，您也可以将此存储位置从 sessionstorage 更改为 localstorage。

成功登录后，令牌将以 msal.idtoken 的名称保存在 sessionstorage 中。此令牌包含 Azure 中的登录注册策略中定义的所有应用程序声明，如下所示。

如果您想查看此令牌内容，可以使用 JWT analyzer chrome 扩展程序。

通常，此令牌用于客户端应用程序中数据操作的 API 身份验证。因此，您可以通过将其作为 Authorization 标头与请求一起发送来对 Web API 进行身份验证。您的 API 将验证此令牌并相应地执行操作。

您可以从我的 git 仓库 下载演示代码。代码的简要介绍如下：

login.component.ts：此组件将调用 login 方法。

ngOnInit() {
const token: string = this.authSandbox.getToken();
if (token === null || token === undefined || token === 'null') {
this.authSandbox.login();
}

auth.service.ts：这是包装器类，用于 msal.service.ts ，提供所有登录、注销代码，这些代码将在您的组件中调用。

注意：令牌有过期时间，所以它可能会过期，我们必须检查令牌是否处于活动状态。如果没有，它应该通过再次调用 login 方法来获取新令牌。

import { Injectable } from '@angular/core';
import { tokenNotExpired } from 'angular2-jwt';
import { MSALService } from './msal.service';
import { HttpRequest } from '@angular/common/http';
@Injectable()
export class AuthService {
    cachedRequests: Array<httprequest<any>> = [];
    constructor(private msalService: MSALService) { }

    public getToken(): string {
        // Read token from session storage and return.
        let token = window.sessionStorage.getItem('msal.idtoken');
        if (this.isTokenExpired(token)) {
            return token;
        } else {
            this.msalService.login();
        }
    }

    public login() {
        const token = this.getToken();
        if (token == null || token === undefined || token === 'null') {
            this.msalService.login();
        }
    }

    private isTokenExpired(token: string): boolean {
        if (token != null && token !== undefined && token !== 'null') {
            return tokenNotExpired(null, token);
        }
        return true;
    }
}
</httprequest<any>

msal.service.ts：它包含调用 MSAL 库 API 的代码。

authentication.guard.ts：它用于在根级别启用身份验证。

app-routing.module.ts：它用于配置您的路由，它将转到 authentication.gurad.ts，如果尚未进行身份验证，则重定向到 LoginComponent，canActivate: [AuthenticationGuard] 是决定路由是否可以激活的守卫。

const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full', canActivate: [AuthenticationGuard] },
{ path: 'home', component: AppComponent, canActivate: [AuthenticationGuard] },
{ path: 'authentication', component: LoginComponent }
];

Using the Code

我为身份验证创建了一个单独的模块，您需要在 msal.service.ts 文件中更改您的 azure AAD B2C 配置。

 private applicationConfig: any = {
        clientID: 'paste your application id here',
        authority: 'https://login.microsoftonline.com/tfp/demob2c.onmicrosoft.com/B2C_1_SignInPolicy',
        b2cScopes: ['https://demob2c.onmicrosoft.com/user.read'],
        redirectUrl: 'https://:4200',
        extraQueryParameter: 'p=B2C_1_SignInPolicy&scope=openid&nux=1'
    };

demob2c 是 Azure B2C 租户。

redirectUrl 应与应用程序注册时提供的回复 URL 相同。

运行演示代码

  1. 下载代码或克隆 git 仓库。
  2. 如果您的系统上尚未设置 angular2 环境，请遵循上面的步骤 2“设置应用程序”。
  3. 在 vs code 终端中运行命令 "npm install"。
  4. 在 vs code 终端中运行 "ng serve -o"。

关注点

  1. MSAL 可以被视为 ADAL 的下一个版本，因为许多基本原语保持不变（AcquireTokenAsync、AcquireTokenSilentAsync、AuthenticationResults 等），并且目标——无需成为协议专家即可轻松访问 API——保持不变。ADAL 仅通过 Azure AD 和 ADFS 与工作和学校帐户一起使用，MSAL 与工作和学校帐户、MSA、Azure AD B2C 和 ASP.NET Core Identity 一起使用，并最终（在未来的版本中）与 ADFS 一起使用……所有这些都在一个统一的对象模型中。因此，如果您正在使用 ADAL，请计划切换到 MSAL。：)
  2. Azure B2C 非常棒。 如果您查看演示应用程序 https://msalb2c-demo.azurewebsites.net，我并没有为 登录页面、登录页面、注册页面和其他与用户配置文件相关的部分编写代码，所有这些都仅通过在 Azure B2C 上设置策略就完成了。它提供了从身份即服务到社交登录支持的大量酷功能。具有登录、注册和忘记密码功能的登录页面如下所示，您也可以根据需要自定义此页面。

相同的 Azure B2C 设置可用于多个应用程序。 

历史

即将创建... :)

© . All rights reserved.