快速入门:在单页应用 (SPA) 中登录用户,并使用 Angular 调用 Microsoft Graph API

本快速入门使用示例 Angular 单页应用 (SPA),演示如何使用授权代码流和代码交换证明密钥(PKCE)来登录用户,并调用 Microsoft Graph API。 此示例使用适用于 JavaScript 的 Microsoft 身份验证库来处理身份验证。

先决条件

注册应用程序和记录标识符

若要完成注册,请为应用程序命名,指定支持的帐户类型并添加重定向 URI。 注册后,应用程序“概述”窗格将显示应用程序源代码中所需的标识符。

  1. 登录 Microsoft Entra 管理中心

  2. 如果你有权访问多个租户,请使用顶部菜单中的“设置”图标 ,通过“目录 + 订阅”菜单切换到你希望在其中注册应用程序的租户。

  3. 浏览至“标识”>“应用程序”>“应用注册”,然后选择“新建注册”。

  4. 输入应用程序的“名称”,例如“identity-client-spa”

  5. 对于“支持的帐户类型”设置,请选择“仅限此组织目录中的帐户”。 要了解不同帐户类型的信息,请选择“帮我选择”选项。

  6. 选择“注册”。

    显示了如何在 Microsoft Entra 管理中心输入名称和选择帐户类型的屏幕截图。

  7. 注册完成后,将显示应用程序的“概述”窗格。 记录要在应用程序源代码中使用的目录(租户)ID 和应用程序(客户端)ID。

    显示了 Microsoft Entra 管理中心的概述页面上的标识符值的屏幕截图。

    注意

    可以通过参照修改应用程序支持的帐户来更改支持的帐户类型。

添加平台重定向 URI

若要为应用注册指定应用类型,请执行以下步骤:

  1. 在“管理”下,选择“身份验证”。
  2. 在“平台配置”页上,选择“添加平台”,然后选择“SPA”选项。
  3. 对于“重定向 URI”,请输入 http://localhost:4200
  4. 选择“配置”以保存更改。

克隆或下载示例应用程序

若要获取示例应用程序,可以从 GitHub 克隆它或将其下载为 .zip 文件。

  • 若要克隆示例,请打开命令提示符并导航到要创建项目的位置,然后输入以下命令:

    git clone https://github.com/Azure-Samples/ms-identity-docs-code-javascript.git
    
  • 下载 .zip 文件。 将其提取到名称长度小于 260 个字符的文件路径。

配置项目

  1. 在 IDE 中,打开包含示例的项目文件夹 ms-identity-docs-code-javascript/angular-spa

  2. 打开 src/app/app.module.ts 并使用管理中心先前记录的信息更新以下值。

    // Required for Angular multi-browser support
    import { BrowserModule } from '@angular/platform-browser';
    
    // Required for Angular
    import { NgModule } from '@angular/core';
    
    // Required modules and components for this application
    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    import { ProfileComponent } from './profile/profile.component';
    import { HomeComponent } from './home/home.component';
    
    // HTTP modules required by MSAL
    import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
    
    // Required for MSAL
    import { IPublicClientApplication, PublicClientApplication, InteractionType, BrowserCacheLocation, LogLevel } from '@azure/msal-browser';
    import { MsalGuard, MsalInterceptor, MsalBroadcastService, MsalInterceptorConfiguration, MsalModule, MsalService, MSAL_GUARD_CONFIG, MSAL_INSTANCE, MSAL_INTERCEPTOR_CONFIG, MsalGuardConfiguration, MsalRedirectComponent } from '@azure/msal-angular';
    
    const isIE = window.navigator.userAgent.indexOf('MSIE ') > -1 || window.navigator.userAgent.indexOf('Trident/') > -1;
    
    export function MSALInstanceFactory(): IPublicClientApplication {
      return new PublicClientApplication({
        auth: {
          // 'Application (client) ID' of app registration in the Microsoft Entra admin center - this value is a GUID
          clientId: "Enter_the_Application_Id_Here",
          // Full directory URL, in the form of https://login.microsoftonline.com/<tenant>
          authority: "https://login.microsoftonline.com/Enter_the_Tenant_Info_Here",
          // Must be the same redirectUri as what was provided in your app registration.
          redirectUri: "http://localhost:4200",
        },
        cache: {
          cacheLocation: BrowserCacheLocation.LocalStorage,
          storeAuthStateInCookie: isIE
        }
      });
    }
    
    // MSAL Interceptor is required to request access tokens in order to access the protected resource (Graph)
    export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
      const protectedResourceMap = new Map<string, Array<string>>();
      protectedResourceMap.set('https://graph.microsoft.com/v1.0/me', ['user.read']);
    
      return {
        interactionType: InteractionType.Redirect,
        protectedResourceMap
      };
    }
    
    // MSAL Guard is required to protect routes and require authentication before accessing protected routes
    export function MSALGuardConfigFactory(): MsalGuardConfiguration {
      return { 
        interactionType: InteractionType.Redirect,
        authRequest: {
          scopes: ['user.read']
        }
      };
    }
    
    // Create an NgModule that contains the routes and MSAL configurations
    @NgModule({
      declarations: [
        AppComponent,
        HomeComponent,
        ProfileComponent
      ],
      imports: [
        BrowserModule,
        AppRoutingModule,
        HttpClientModule,
        MsalModule
      ],
      providers: [
        {
          provide: HTTP_INTERCEPTORS,
          useClass: MsalInterceptor,
          multi: true
        },
        {
          provide: MSAL_INSTANCE,
          useFactory: MSALInstanceFactory
        },
        {
          provide: MSAL_GUARD_CONFIG,
          useFactory: MSALGuardConfigFactory
        },
        {
          provide: MSAL_INTERCEPTOR_CONFIG,
          useFactory: MSALInterceptorConfigFactory
        },
        MsalService,
        MsalGuard,
        MsalBroadcastService
      ],
      bootstrap: [AppComponent, MsalRedirectComponent]
    })
    export class AppModule { }
    
    • clientId - 应用程序的标识符,也称为客户端。 将引号中的文本替换为先前记录的应用程序(客户端)ID 值
    • authority - 颁发机构是一个 URL,表示 MSAL 可从中请求令牌的目录。 请将“Enter_the_Tenant_Info_Here”替换为先前记录的“目录(租户)ID”值。
    • redirectUri:应用程序的重定向 URI。 如有必要,请将引号中的文本替换为先前记录的重定向 URI。

运行应用程序并登录

使用 Node.js 在 Web 服务器中运行项目:

  1. 若要启动服务器,请从项目目录中运行以下命令:

    npm install
    npm start
    
  2. 复制终端中显示的 https URL(例如 https://localhost:4200),并将其粘贴到浏览器地址栏中。 建议使用私密浏览器或无痕浏览器会话。

  3. 按照步骤操作并输入必要的详细信息以使用 Microsoft 帐户登录。 系统会要求你提供电子邮件地址,以便向你发送一次性密码。 出现提示时输入代码。

  4. 该应用程序将请求维持你对已授权访问的数据的访问权限,以及让你登录并读取个人资料的权限。 选择“接受”。 将显示以下屏幕截图,表明你已登录应用程序且已从 Microsoft Graph API 访问个人资料详细信息。

    描述 API 调用结果的 JavaScript 应用的屏幕截图。

退出登录应用程序

  1. 在页面右上角找到“退出登录”按钮,然后选中它
  2. 系统将提示你选择要退出登录的帐户。 选择用于登录的帐户。

此时会显示一条消息,表明你已退出登录。现在可以关闭浏览器窗口。