单页应用程序：代码配置Single-page application: Code configuration

• 11/23/2020
• • n
  • a

了解如何为单页应用程序 (SPA) 配置代码。Learn how to configure the code for your single-page application (SPA).

用于 SPA 和支持的身份验证流的 MSAL 库MSAL libraries for SPAs and supported authentication flows

Microsoft 标识平台提供下述用于 JavaScript 的 Microsoft 身份验证库 (MSAL.js)，通过使用行业推荐的安全性实践来支持隐式流和 PKCE 授权代码流：The Microsoft identity platform provides the following Microsoft Authentication Library for JavaScript (MSAL.js) to support implicit flow and authorization code flow with PKCE by using industry-recommended security practices:

MSAL 库MSAL library	流向Flow	说明Description
MSAL.js (2.x)MSAL.js (2.x)	授权代码流 (PKCE)Authorization code flow (PKCE)	用于任何使用 JavaScript 或 SPA 框架（如 Angular、Vue.js 和 React.js）构建的客户端 Web 应用的纯 JavaScript 库。Plain JavaScript library for use in any client-side web app that's built through JavaScript or SPA frameworks such as Angular, Vue.js, and React.js.
MSAL.js (1.x)MSAL.js (1.x)	隐式流Implicit flow	用于任何使用 JavaScript 或 SPA 框架（如 Angular、Vue.js 和 React.js）构建的客户端 Web 应用的纯 JavaScript 库。Plain JavaScript library for use in any client-side web app that's built through JavaScript or SPA frameworks such as Angular, Vue.js, and React.js.
MSAL AngularMSAL Angular	隐式流Implicit flow	核心 MSAL.js 库的包装器，用于简化在使用 Angular 框架构建的单页应用中的使用。Wrapper of the core MSAL.js library to simplify use in single-page apps that are built through the Angular framework.

应用程序代码配置Application code configuration

在 MSAL 库中，应用程序注册信息在库初始化期间作为配置传递。In an MSAL library, the application registration information is passed as configuration during the library initialization.

// Configuration object constructed.
const config = {
    auth: {
        clientId: 'your_client_id'
    }
};

// create UserAgentApplication instance
const userAgentApplication = new UserAgentApplication(config);

// App.module.ts
import { MsalModule } from '@azure/msal-angular';

@NgModule({
    imports: [
        MsalModule.forRoot({
            auth: {
                clientId: 'your_app_id'
            }
        })
    ]
})

export class AppModule { }

后续步骤Next steps

转到此方案中的下一篇文章：登录和注销。Move on to the next article in this scenario, Sign-in and sign-out.