Одностраничное приложение: конфигурация кода

Узнайте, как настроить код для одностраничного приложения.

Библиотеки Майкрософт, поддерживающие одностраничные приложения

Следующие библиотеки Майкрософт поддерживают одностраничные приложения:

Язык или платформа	Проект на сайте GitHub	Пакет	Получение из этих вариантов	Выполнение входа пользователей	Доступ к веб-API	Общедоступная версия (GA) или Общедоступная предварительная версия1
Angular	MSAL для Angular версии 22	msal — angular	Краткое руководство			Общедоступная версия
Angular	MSAL для Angular3	msal — angular	—			Общедоступная версия
AngularJS	MSAL для AngularJS3	msal — angularjs	—			Общедоступная предварительная версия
JavaScript	MSAL.js v22	msal — браузер	Руководство			Общедоступная версия
JavaScript	MSAL.js 1.03	msal — ядро	—			Общедоступная версия
React	MSAL для React2	msal — react	Краткое руководство			Общедоступная версия

¹ Универсальные условия лицензионного соглашения для веб-служб применяются к библиотекам в общедоступной предварительной версии.

² Поток кода проверки подлинности только с 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 версии 1)

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')
);

Следующие шаги

Перейдите к следующей статье в этом сценарии, Вход и выход.