快速入门：登录到 SPA 并调用 API - Angular

Artículo
04/26/2024

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

先决条件

具有活动订阅的 Azure 帐户。如果还没有帐户，请创建一个帐户。
Node.js
Visual Studio 2022 或 Visual Studio Code

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

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

登录到 Microsoft Entra 管理中心。
如果你有权访问多个租户，请使用顶部菜单中的“设置”图标，通过“目录 + 订阅”菜单切换到你希望在其中注册应用程序的租户。
浏览至“标识”>“应用程序”>“应用注册”，然后选择“新建注册”。
输入应用程序的“名称”，例如“identity-client-spa”。
对于“支持的帐户类型”设置，请选择“仅限此组织目录中的帐户”。要了解不同帐户类型的信息，请选择“帮我选择”选项。
选择“注册”。
注册完成后，将显示应用程序的“概述”窗格。记录要在应用程序源代码中使用的目录（租户）ID 和应用程序（客户端）ID。

注意

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

添加平台重定向 URI

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

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

克隆或下载示例应用程序

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

若要克隆示例，请打开命令提示符并导航到要创建项目的位置，然后输入以下命令：
```
git clone https://github.com/Azure-Samples/ms-identity-docs-code-javascript.git
```
下载 .zip 文件。将其提取到名称长度小于 260 个字符的文件路径。

配置项目

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

打开 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.partner.microsoftonline.cn/<tenant>
      authority: "https://login.partner.microsoftonline.cn/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://microsoftgraph.chinacloudapi.cn/v1.0/me', ['https://microsoftgraph.chinacloudapi.cn/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: ['https://microsoftgraph.chinacloudapi.cn/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 服务器中运行项目：

若要启动服务器，请从项目目录中运行以下命令：
```
npm install
npm start
```
复制终端中显示的 https URL（例如 https://localhost:4200），并将其粘贴到浏览器地址栏中。建议使用私密浏览器或无痕浏览器会话。
按照步骤操作并输入必要的详细信息以使用 Microsoft 帐户登录。系统会要求你提供电子邮件地址，以便向你发送一次性密码。出现提示时输入代码。
该应用程序将请求维持你对已授权访问的数据的访问权限，以及让你登录并读取个人资料的权限。选择“接受”。将显示以下屏幕截图，表明你已登录应用程序且已从 Microsoft Graph API 访问个人资料详细信息。

退出登录应用程序

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

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

快速入门：使用 Microsoft 标识平台保护 ASP.NET Core Web API
通过以下系列教程：让用户登录并调用 Microsoft Graph，从头开始构建此 Angular SPA，了解详细信息

Compartir a través de

先决条件

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

添加平台重定向 URI

克隆或下载示例应用程序

配置项目

退出登录应用程序

Recursos adicionales

Compartir a través de

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

先决条件

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

添加平台重定向 URI

克隆或下载示例应用程序

配置项目

运行应用程序并登录

退出登录应用程序

相关内容

Recursos adicionales