适用于:  员工租户(了解详细信息)
 员工租户(了解详细信息)
了解如何为单页应用程序 (SPA) 配置代码。
先决条件
- 在 Microsoft Entra 管理中心注册一个新应用,并配置为仅适用于此组织目录中的帐户。 有关更多详细信息 ,请参阅注册应用程序 。 在应用程序 概述 页中记录以下值供以后使用: - 应用程序(客户端)ID
- 目录(租户)ID
 
- 使用 单页应用程序 平台配置添加以下重定向 URI。 有关更多详细信息 ,请参阅如何在应用程序中添加重定向 URI 。
- 
              重定向 URI: http://localhost:3000/。
 
- 
              重定向 URI: 
支持单页应用的 Microsoft 库
以下 Microsoft 库支持单页应用:
| 语言/框架 | 项目 GitHub | 包 | 获取 入门 | 用户登录 | 访问 Web API | 
|---|---|---|---|---|---|
| React | MSAL React2 | msal-react | 快速入门 |   |   | 
| JavaScript | MSAL.js2 | msal-browser | 快速入门 |   |   | 
| Angular | MSAL Angular2 | msal-angular | 快速入门 |   |   | 
应用程序代码配置
在 MSAL 库中,应用程序注册信息在库初始化期间作为配置传递。
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')
);
有关可配置选项的更多信息,请参阅使用 MSAL.js 初始化应用程序。