单页应用程序：代码配置

了解如何为单页应用程序 (SPA) 配置代码。

支持单页应用的 Microsoft 库

以下 Microsoft 库支持单页应用：

语言/框架	项目 GitHub	包	获取 started	用户登录	访问 Web API	正式发布 (GA) 或 公共预览版1
Angular	MSAL Angular v22	msal-angular	教程			GA
Angular	MSAL Angular3	msal-angular	—			GA
AngularJS	MSAL AngularJS3	msal-angularjs	—			公开预览版
JavaScript	MSAL.js v22	msal-browser	教程			GA
JavaScript	MSAL.js 1.03	msal-core	—			GA
React	MSAL React2	msal-react	教程			GA

¹在线服务通用许可条款适用于公共预览版中的库。

²仅使用 PKCE 的身份验证代码流（推荐）。

³仅隐式授权流。

应用程序代码配置

在 MSAL 库中，应用程序注册信息在库初始化期间作为配置传递。

JavaScript (MSAL.js v2)

import * as Msal from "@azure/msal-browser"; // if using CDN, 'Msal' will be available in global scope

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

// create PublicClientApplication instance
const publicClientApplication = new Msal.PublicClientApplication(config);

有关可配置选项的更多信息，请参阅使用 MSAL.js 初始化应用程序。

JavaScript (MSAL.js v1)

import * as Msal from "msal"; // if using CDN, 'Msal' will be available in global scope

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

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

有关可配置选项的更多信息，请参阅使用 MSAL.js 初始化应用程序。

Angular (MSAL.js v2)

// In app.module.ts
import { MsalModule } from '@azure/msal-angular';
import { PublicClientApplication } from '@azure/msal-browser';

@NgModule({
    imports: [
        MsalModule.forRoot( new PublicClientApplication({
            auth: {
                clientId: 'Enter_the_Application_Id_Here',
            }
        }), null, null)
    ]
})
export class AppModule { }

Angular (MSAL.js v1)

// App.module.ts
import { MsalModule } from '@azure/msal-angular';
@NgModule({
    imports: [
        MsalModule.forRoot({
            auth: {
                clientId: 'your_app_id'
            }
        })
    ]
})
export class AppModule { }

React

import { PublicClientApplication } from "@azure/msal-browser";
import { MsalProvider } from "@azure/msal-react";

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

// create PublicClientApplication instance
const publicClientApplication = new PublicClientApplication(config);

// Wrap your app component tree in the MsalProvider component
ReactDOM.render(
    <React.StrictMode>
        <MsalProvider instance={publicClientApplication}>
            <App />
        </ MsalProvider>
    </React.StrictMode>,
    document.getElementById('root')
);

后续步骤

转到此方案中的下一篇文章：登录和注销。