單頁應用程式：程式代碼設定

瞭解如何設定單頁應用程式的程式代碼（SPA）。

支援單頁應用程式的 Microsoft 連結庫

下列 Microsoft 連結庫支援單頁應用程式：

語言/ 架構	項目開啟 GitHub	套件	取得 啟動	登入使用者	存取 Web API	正式推出 （GA） 或 公開預覽1
Angular	MSAL Angular v2 2	msal-angular	教學課程			GA
Angular	MSAL Angular3	msal-angular	—			GA
AngularJS \(英文\)	MSAL AngularJS3	msal-angularjs	—			公開預覽
JavaScript	MSAL.js v2 2	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')
);

下一步

請移至此案例中的下一篇文章， 登入和註銷。