快速入门:在 Angular 单页应用程序中将用户登录并获取访问令牌Quickstart: Sign in users and get an access token in an Angular single-page application

在本快速入门中,你将通过代码示例了解 Angular 单页应用程序 (SPA) 如何将具有工作帐户或学校帐户的用户登录。In this quickstart, you use a code sample to learn how an Angular single-page application (SPA) can sign in users who have work accounts, or school accounts. Angular SPA 还可以获取用于调用 Microsoft Graph API 或任何 Web API 的访问令牌。An Angular SPA can also get an access token to call the Microsoft Graph API or any web API.

先决条件Prerequisites

注册并下载快速入门应用Register and download the quickstart app

若要启动快速入门应用,请使用以下选项之一。To start the quickstart app, use either of the following options.

选项 1(快速):注册并自动配置应用,然后下载代码示例Option 1 (express): Register and automatically configure the app, and then download the code sample

  1. 登录到 Azure 门户Sign in to the Azure portal.
  2. 如果帐户有权访问多个租户,请在右上角选择该帐户,然后将门户会话设置为要使用的 Azure Active Directory (Azure AD) 租户。If your account has access to more than one tenant, select the account at the upper right, and then set your portal session to the Azure Active Directory (Azure AD) tenant that you want to use.
  3. 在 Azure 门户中打开新的应用注册窗格。Open the new App registrations pane in the Azure portal.
  4. 输入应用程序的名称并选择“注册”。Enter a name for your application, and then select Register.
  5. 转到快速入门窗格,查看 Angular 快速入门。Go to the quickstart pane and view the Angular quickstart. 遵照说明下载内容,系统会自动配置新应用程序。Follow the instructions to download and automatically configure your new application.

选项 2(手动):注册并手动配置应用程序和代码示例Option 2 (manual): Register and manually configure the application and code sample

步骤 1:注册应用程序Step 1: Register the application

  1. 登录到 Azure 门户Sign in to the Azure portal.
  2. 如果帐户有权访问多个租户,请在右上角选择该帐户,然后将门户会话设置为要使用的 Azure AD 租户。If your account has access to more than one tenant, select your account at the upper right, and set your portal session to the Azure AD tenant that you want to use.
  3. 按照说明在 Azure 门户中注册单页应用程序Follow the instructions to register a single-page application in the Azure portal.
  4. 在应用注册的“身份验证”窗格中添加新的平台,并注册重定向 URI:http://localhost:4200/Add a new platform on the Authentication pane of your app registration and register the redirect URI: http://localhost:4200/.
  5. 本快速入门使用隐式授权流This quickstart uses the implicit grant flow. 针对“ID 令牌”和“访问令牌”选择“隐式授权”设置。 Select the Implicit grant settings for ID tokens and Access tokens. 由于此应用要将用户登录并调用 API,因此需要 ID 令牌和访问令牌。ID tokens and access tokens are required because this app signs in users and calls an API.

步骤 1:在 Azure 门户中配置应用程序Step 1: Configure the application in the Azure portal

为使本快速入门的代码示例正常运行,需将重定向 URI 添加为 http://localhost:4200/ 并启用“隐式授权”。For the code sample for this quickstart to work, you need to add a redirect URI as http://localhost:4200/ and enable Implicit grant.

已配置 应用程序已使用这些属性进行配置。Already configured Your application is configured with these attributes.

步骤 2:下载代码示例Step 2: Download the code sample

若要使用 Node.js 在 Web 服务器中运行项目,请克隆示例存储库下载核心项目文件To run the project with a web server by using Node.js, clone the sample repository or download the core project files. 使用 Visual Studio Code 之类的编辑器打开这些文件。Open the files by using an editor such as Visual Studio Code.

步骤 3:配置 JavaScript 应用Step 3: Configure the JavaScript app

在 src/app 文件夹中编辑 app.module.ts,并在 MsalModule.forRoot 下设置 clientIdauthority 值。 In the src/app folder, edit app.module.ts and set the clientId and authority values under MsalModule.forRoot.

MsalModule.forRoot({
   auth: {
       clientId: 'Enter_the_Application_Id_here', // This is your client ID
       authority: 'https://login.partner.microsoftonline.cn/Enter_the_Tenant_Info_Here', // This is your tenant info
       redirectUri: 'Enter_the_Redirect_Uri_Here' // This is your redirect URI
   },
   cache: {
       cacheLocation: 'localStorage',
       storeAuthStateInCookie: isIE, // set to true for IE 11
   },
},
//... )

备注

Enter_the_Supported_Account_Info_HereEnter_the_Supported_Account_Info_Here

替换以下值:Replace these values:

值名称Value name 说明Description
Enter_the_Application_Id_HereEnter_the_Application_Id_Here 在应用程序注册的“概览”页中,这是你的“应用程序(客户端) ID”值。 On the Overview page of your application registration, this is your Application(client) ID value.
Enter_the_Cloud_Instance_Id_HereEnter_the_Cloud_Instance_Id_Here 这是 Azure 云的实例。This is the instance of the Azure cloud. 对于主要云或全球 Azure 云,请输入 https://login.partner.microsoftonline.cnFor the main or global Azure cloud, enter https://login.partner.microsoftonline.cn. 对于国家/地区云(例如中国云),请参阅国家/地区云For national clouds (for example, China), see National clouds.
Enter_the_Tenant_Info_HereEnter_the_Tenant_Info_Here 设置为以下选项之一:如果应用程序支持此组织目录中的帐户,请将此值替换为目录(租户)ID 或租户名称(例如 contoso.microsoft.com)。Set to one of the following options: If your application supports accounts in this organizational directory, replace this value with the directory (tenant) ID or tenant name (for example, contoso.microsoft.com). 如果应用程序支持“任何组织目录中的帐户”,请将此值替换为 organizationsIf your application supports accounts in any organizational directory, replace this value with organizations. 如果应用程序支持“任何组织目录中的帐户”,请将此值替换为“common”If your application supports accounts in any organizational directory, replace this value with common.
Enter_the_Redirect_Uri_HereEnter_the_Redirect_Uri_Here 替换为 http://localhost:4200。Replace with http://localhost:4200.
cacheLocationcacheLocation (可选)针对身份验证状态设置浏览器存储。(Optional) Set the browser storage for the authentication state. 默认值为 sessionStorage。The default is sessionStorage.
storeAuthStateInCookiestoreAuthStateInCookie (可选)标识用于存储身份验证请求状态的库。(Optional) Identify the library that stores the authentication request state. 在浏览器 Cookie 中验证身份验证流时需要此状态。This state is required to validate the authentication flows in the browser cookies. 此 Cookie 为 Internet Explorer 和 Microsoft Edge 设置,可以适应这两个浏览器。This cookie is set for Internet Explorer and Edge to accommodate those two browsers. 有关更多详细信息,请参阅已知问题For more details, see the known issues.

提示

若要查找“应用程序(客户端) ID”、“目录(租户) ID”和“支持的帐户类型”的值,请转到 Azure 门户中应用的“概述”页。 To find the values of Application (client) ID, Directory (tenant) ID, and Supported account types, go to the app's Overview page in the Azure portal.

有关可用的可配置选项的详细信息,请阅读初始化客户端应用程序For more information about available configurable options, see Initialize client applications.

可以在 GitHub 上的 AzureAD/microsoft-authentication-library-for-js 存储库中找到 MSAL.js 库的源代码。You can find the source code for the MSAL.js library in the AzureAD/microsoft-authentication-library-for-js repository on GitHub.

步骤 3:运行项目Step 3: Run the project

步骤 4:运行项目Step 4: Run the project

如果使用 Node.js:If you're using Node.js:

  1. 从项目目录运行以下命令以启动服务器:Start the server by running the following commands from the project directory:

    npm install
    npm start
    
  2. 浏览到 http://localhost:4200/Browse to http://localhost:4200/.

  3. 选择“登录名”。Select Login.

  4. 选择“个人资料”以调用 Microsoft Graph。Select Profile to call Microsoft Graph.

在浏览器加载应用程序后,选择“登录”。After the browser loads the application, select Login. 首次开始登录时,系统会提示你允许应用程序访问你的个人资料并将你登录。The first time you start to sign in, you're prompted to provide your consent to allow the application to access your profile and sign you in. 成功登录后,选择“个人资料”,你的用户个人资料信息随即会显示在页面上。After you're signed in successfully, select Profile, and your user profile information will be displayed on the page.

示例工作原理How the sample works

示意图,展示了本快速入门中的示例应用的工作原理

后续步骤Next steps

接下来,在 Angular 教程中了解如何将用户登录和获取令牌:Next, learn how to sign in a user and acquire tokens in the Angular tutorial: