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

• 03/25/2021
• • n
  • a

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

支持单页应用的 Microsoft 库Microsoft libraries supporting single-page apps

以下 Microsoft 库支持单页应用：The following Microsoft libraries support single-page apps:

语言/框架Language / framework	项目Project on GitHubGitHub	包Package	获取Getting startedstarted	用户登录Sign in users	访问 Web APIAccess web APIs	正式发布 (GA) 或Generally available (GA) or 公共预览版1Public preview1
AngularAngular	MSAL Angular v22MSAL Angular v22	msal-angularmsal-angular	——			公共预览版Public preview
AngularAngular	MSAL Angular3MSAL Angular3	msal-angularmsal-angular	教程Tutorial			GAGA
AngularJSAngularJS	MSAL AngularJS3MSAL AngularJS3	msal-angularjsmsal-angularjs	——			公共预览版Public preview
JavaScriptJavaScript	MSAL.js v22MSAL.js v22	msal-browsermsal-browser	教程Tutorial			GAGA
JavaScriptJavaScript	MSAL.js 1.03MSAL.js 1.03	msal-coremsal-core	教程Tutorial			GAGA
ReactReact	MSAL React2MSAL React2	msal-reactmsal-react	——			公共预览版Public preview

¹ Azure 预览版的补充使用条款适用于公共预览版中的库。¹ Supplemental terms of use for Azure Previews apply to libraries in Public preview.

² 仅使用 PCKE 的身份验证代码流（建议）。² Auth code flow with PCKE only (Recommended).

³ 仅隐式授权流。³ Implicit grant flow only.

应用程序代码配置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.