了解如何为单页应用程序 (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 | 快速入门 |
![]() |
![]() |
角 | 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 初始化应用程序。