使用Angular和AzureAD进行身份验证登录

2 年 ago

逸, 科

2 minutes

最近开始接触Angular，并且想要使用AzureAD进行身份验证，于是我进行了各种调查研究。
经过一番奋斗，我终于抵达了能够正常运行的阶段，但是为了以防后面忘记，我还是做了些备忘录。

虽然暂时可以动了，但可能不是最佳方法。请注意。

由于我使用Visual Studio进行开发，所以可能会采用一些非常规的方法。

前提的意思是指事情进行下去所必须的条件或基础。

adal-angular8

操作步骤

第0步: 准备工作

创建一个ASP.NET Core Web应用程序（Angular）。

当您从”新建项目”开始，一点一点地操作，就能完成。

备考

0-2. 构建项目

如果不编译项目一次，将无法在ClientApp文件夹下创建node_modules文件夹，因此请注意。
没有node_modules文件夹会造成第一步的困扰。

步骤1. 安装 adal-angular8。

正如以下文章所述，由于在客户端库(L)中添加附加项并没有成功，所以我们将从命令提示符中进行安装。在使用 Visual Studio 2019 时，我们会采用 Ant Design of Angular。

1-1. 打开开发者命令提示符

工具(T) > 命令行(L) > 开发人员命令提示符(C)

1-2. 在命令提示符中执行以下命令。

npm i adal-angular8

参考：adal-angular8 – npm

1-3. 重新启动 Visual Studio。

当您通过命令提示符安装软件包时，由于某些原因，Visual Studio可能无法正确识别它们，所以我会先重新启动一次。

步骤2. 设置Azure Active Directory

创建Azure Active Directory。

沿着画面点点点就可以完成注册。

2-2. 应用程序的注册

在开发时，将URL输入到红框部分能够方便地进行调试。
当部署到生产环境时，需要另外添加URL。

2-3. 更改认证

你需要按照以下步骤更改认证设置。
– 选择在“2-2. 应用注册”中注册的应用并进入管理界面。
– 在“隐式授予”下方选中“ID令牌”。

如果从Visual Studio的模板中创建Angular项目，会默认生成一个后端组件。
虽然隐式地勾选”ID令牌”可能是不推荐的，但出于方便考虑，这次我们会进行勾选。

步骤3. 更改源代码

我根据以下网站参考，修改了源代码。
使用 Angular 和 Azure Active Directory。

更改 app.module.ts 文件

只摘录了从模板更改的部分。

import { HttpClient, HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { Adal8Service, Adal8HTTPService } from "adal-angular8";

@NgModule({
  ...
    providers: [
      Adal8Service,
      {
        provide: Adal8HTTPService,
        useFactory: Adal8HTTPService.factory,
        deps: [HttpClient, Adal8Service]
      }
    ],
  ...
})

更改app.component.ts

import { Component, OnInit } from '@angular/core';

import { Adal8Service } from "adal-angular8";
import { adal } from "adal-angular";

const config: adal.Config = {
  tenant: '<登録したテナントID>',
  clientId: '<登録したアプリケーションID>'
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})

export class AppComponent implements OnInit {
  username: string;

  constructor(private service: Adal8Service) {
    this.service.init(config);
  }

  ngOnInit() {
    this.service.handleWindowCallback();

    if (!this.service.userInfo.authenticated) {
      this.service.login();
    }

    this.username = this.service.userInfo.username;
    console.log('profile', this.service.userInfo.profile);
  }

  public logout() {
    this.service.logOut();
  }
}

请参考下方图像中的值。

第四步：确认动作