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

项目
2025-05-07

在本快速入门中，你将使用示例单页应用（SPA）来演示如何使用授权代码流和代码交换证明密钥（PKCE）登录用户，并调用Microsoft图形 API。此示例使用 Microsoft身份验证库来处理身份验证。

先决条件

拥有有效订阅的 Azure 帐户。如果还没有帐户，请创建一个帐户。
Azure 帐户必须拥有管理应用程序的权限。以下任何Microsoft Entra 角色都包含所需的权限：
- 应用程序管理员
- 应用程序开发人员
工作人员租户。可以使用默认目录或设置新租户。
Visual Studio Code 或其他代码编辑器。

在 Microsoft Entra 管理中心注册一个新应用，并配置为仅适用于此组织目录中的帐户。有关更多详细信息，请参阅注册应用程序。在应用程序概述页中记录以下值供以后使用：
- 应用程序（客户端）ID
- 目录（租户）ID
使用 单页应用程序 平台配置添加以下重定向 URI。有关更多详细信息，请参阅如何在应用程序中添加重定向 URI 。
- 重定向 URI：http://localhost:3000/
Node.js

在 Microsoft Entra 管理中心注册一个新应用，并配置为仅适用于此组织目录中的帐户。有关更多详细信息，请参阅注册应用程序。在应用程序概述页中记录以下值供以后使用：
- 应用程序（客户端）ID
- 目录（租户）ID
使用 单页应用程序 平台配置添加以下重定向 URI。有关更多详细信息，请参阅如何在应用程序中添加重定向 URI 。
- 重定向 URI：http://localhost:3000/
Node.js

在 Microsoft Entra 管理中心注册一个新应用，并配置为仅适用于此组织目录中的帐户。有关更多详细信息，请参阅注册应用程序。在应用程序概述页中记录以下值供以后使用：
- 应用程序（客户端）ID
- 目录（租户）ID
使用 单页应用程序 平台配置添加以下重定向 URI。有关更多详细信息，请参阅如何在应用程序中添加重定向 URI 。
- 重定向 URI：http://localhost:4200/
Node.js

在 Microsoft Entra 管理中心注册一个新应用，并配置为仅适用于此组织目录中的帐户。有关更多详细信息，请参阅注册应用程序。在应用程序概述页中记录以下值供以后使用：
- 应用程序（客户端）ID
- 目录（租户）ID
使用 单页应用程序 平台配置添加以下重定向 URI。有关更多详细信息，请参阅如何在应用程序中添加重定向 URI 。
- 重定向 URI：http://localhost:5000/authentication/login-callback.
.NET SDK

克隆或下载示例应用程序

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

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

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

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

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

配置项目

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

打开 vanillajs-spa/App/public/authConfig.js ，并使用管理中心中记录的信息更新以下值。

/**
* Configuration object to be passed to MSAL instance on creation. 
* For a full list of MSAL.js configuration parameters, visit:
* https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/configuration.md 
*/
const msalConfig = {
    auth: {

        // WORKFORCE TENANT
        authority: "https://login.partner.microsoftonline.cn/Enter_the_Tenant_Info_Here", //  Replace the placeholder with your tenant info
        redirectUri: '/', // You must register this URI on App Registration. Defaults to window.location.href e.g. http://localhost:3000/
        navigateToLoginRequestUrl: true, // If "true", will navigate back to the original request location before processing the auth code response.
    },
    cache: {
        cacheLocation: 'sessionStorage', // Configures cache location. "sessionStorage" is more secure, but "localStorage" gives you SSO.
        storeAuthStateInCookie: false, // set this to true if you have to support IE
    },
    system: {
        loggerOptions: {
            loggerCallback: (level, message, containsPii) => {
                if (containsPii) {
                    return;
                }
                switch (level) {
                    case msal.LogLevel.Error:
                        console.error(message);
                        return;
                    case msal.LogLevel.Info:
                        console.info(message);
                        return;
                    case msal.LogLevel.Verbose:
                        console.debug(message);
                        return;
                    case msal.LogLevel.Warning:
                        console.warn(message);
                        return;
                }
            },
        },
    },
};

/**
* Scopes you add here will be prompted for user consent during sign-in.
* By default, MSAL.js will add OIDC scopes (openid, profile, email) to any login request.
* For more information about OIDC scopes, visit: 
* https://docs.azure.cn/entra/identity-platform/permissions-consent-overview#openid-connect-scopes
*/
const loginRequest = {
    scopes: ["https://microsoftgraph.chinacloudapi.cn/user.read"],
};

/**
* An optional silentRequest object can be used to achieve silent SSO
* between applications by providing a "login_hint" property.
*/

// const silentRequest = {
//   scopes: ["openid", "profile"],
//   loginHint: "example@domain.net"
// };

// exporting config object for jest
if (typeof exports !== 'undefined') {
    module.exports = {
        msalConfig: msalConfig,
        loginRequest: loginRequest,
    };
}

clientId - 应用程序的标识符，也称为客户端。将引号中的文本替换为前面记录的 应用程序（客户端）ID 值。
authority - 颁发机构是一个 URL，表示 MSAL 可从中请求令牌的目录。请将Enter_the_Tenant_Info_Here替换为先前记录的目录（租户）ID值。
redirectUri - 应用程序的重定向 URI。如有必要，请将引号中的文本替换为前面记录的重定向 URI。

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

打开 react-spa/src/authConfig.js ，并使用管理中心中记录的信息更新以下值。

/*
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License.
*/

import { LogLevel } from "@azure/msal-browser";

/**
* Configuration object to be passed to MSAL instance on creation. 
* For a full list of MSAL.js configuration parameters, visit:
* https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/configuration.md 
*/

export const msalConfig = {
    auth: {
        clientId: "Enter_the_Application_Id_Here",
        authority: "https://login.partner.microsoftonline.cn/Enter_the_Tenant_Info_Here",
        redirectUri: "http://localhost:3000",
    },
    cache: {
        cacheLocation: "sessionStorage", // This configures where your cache will be stored
        storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
    },
    system: {	
        loggerOptions: {	
            loggerCallback: (level, message, containsPii) => {	
                if (containsPii) {		
                    return;		
                }		
                switch (level) {
                    case LogLevel.Error:
                        console.error(message);
                        return;
                    case LogLevel.Info:
                        console.info(message);
                        return;
                    case LogLevel.Verbose:
                        console.debug(message);
                        return;
                    case LogLevel.Warning:
                        console.warn(message);
                        return;
                    default:
                        return;
                }	
            }	
        }	
    }
};

/**
* Scopes you add here will be prompted for user consent during sign-in.
* By default, MSAL.js will add OIDC scopes (openid, profile, email) to any login request.
* For more information about OIDC scopes, visit: 
* https://docs.azure.cn/entra/identity-platform/permissions-consent-overview#openid-connect-scopes
*/
export const loginRequest = {
    scopes: ["https://microsoftgraph.chinacloudapi.cn/user.read"]
};

/**
* Add here the scopes to request when obtaining an access token for MS Graph API. For more information, see:
* https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/resources-and-scopes.md
*/
export const graphConfig = {
    graphMeEndpoint: "https://microsoftgraph.chinacloudapi.cn/v1.0/me",
};

clientId - 应用程序的标识符，也称为客户端。将引号中的文本替换为前面记录的 应用程序（客户端）ID 值。
authority - 颁发机构是一个 URL，表示 MSAL 可从中请求令牌的目录。请将Enter_the_Tenant_Info_Here替换为先前记录的目录（租户）ID值。
redirectUri - 应用程序的重定向 URI。如有必要，请将引号中的文本替换为前面记录的重定向 URI。

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

打开 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。

在 IDE 中，打开包含示例的项目文件夹 ms-identity-docs-code-dotnet/spa-blazor-wasm。
打开 spa-blazor-wasm/wwwroot/appsettings.json ，并使用之前在管理中心记录的信息更新以下值。
```
{
  "AzureAd": {
    "Authority": "https://login.partner.microsoftonline.cn/<Enter the tenant ID obtained from the Microsoft Entra admin center>",
    "ClientId": "Enter the client ID obtained from the Microsoft Entra admin center",
    "ValidateAuthority": true
  }
}
```
- Authority - 颁发机构是一个 URL，表示 MSAL 可从中请求令牌的目录。请将Enter_the_Tenant_Info_Here替换为先前记录的目录（租户）ID值。
- ClientId - 应用程序的标识符，也称为客户端。将引号中的文本替换为前面记录的 应用程序（客户端）ID 值。

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

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

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

若要启动服务器，请从项目目录中运行以下命令：
```
cd react-spa/App
npm install
npm start
```
复制终端中显示的 https URL，例如 https://localhost:3000，并将其粘贴到浏览器中。建议使用专用或隐身浏览器会话。
按照步骤操作，并输入必要的详细信息，以使用 Microsoft 帐户登录。你已请求电子邮件地址，以便可以向你发送一次性密码。出现提示时输入代码。
应用程序请求权限，以便继续访问您已授权的数据，并且能够登录您的账户并读取您的个人资料。选择 “接受”。将显示以下屏幕截图，指示已登录到应用程序，并从 Microsoft Graph API 访问配置文件详细信息。

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

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

使用 dotnet 通过 Web 服务器运行项目：

若要启动服务器，请从项目目录中运行以下命令：

cd spa-blazor-wasm
dotnet workload install wasm-tools
dotnet run

复制终端中显示的 http URL，例如 http://localhost:5000，并将其粘贴到浏览器中。建议使用专用或隐身浏览器会话。
按照步骤操作，并输入必要的详细信息，以使用 Microsoft 帐户登录。系统会要求你提供电子邮件地址，以便向你发送一次性密码。出现提示时输入代码。
该应用程序将请求维持你对已授权访问的数据的访问权限，以及让你登录并读取个人资料的权限。选择 “接受”。将显示以下屏幕截图，指示已登录到应用程序，并从 Microsoft Graph API 访问配置文件详细信息。

从应用程序注销

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

此时会显示一条消息，指示你已注销。现在可以关闭浏览器窗口。

快速入门：使用Microsoft标识平台保护 ASP.NET 核心 Web API。
在以下多部分系列教程中，详细了解如何构建一个让用户登录的 React SPA。

通过

快速上手：在单页应用 (SPA) 中让用户登录并调用 Microsoft Graph API

先决条件

克隆或下载示例应用程序

配置项目

运行应用程序并登录和注销

其他资源