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

Область применения: арендаторы рабочей силы внешние арендаторы (подробнее)

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

Предпосылки

• Зарегистрируйте новое приложение в Центре администрирования Microsoft Entra, настроенное только для учетных записей в этом каталоге организации. Дополнительные сведения см. в статье "Регистрация приложения ". Запишите следующие значения на странице обзора приложения для последующего использования:
  • Идентификатор приложения (клиента)
  • Идентификатор каталога (арендатора)
• Добавьте следующие URI перенаправления, используя конфигурацию платформы одностраничного приложения. Дополнительные сведения см. в статье о добавлении URI перенаправления в приложение .
  • URI перенаправления: http://localhost:3000/.

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

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

Язык или платформа	Проект на сайте GitHub	Пакет	Получение началось	Вход пользователей	Доступ к веб-API
Реагировать	MSAL для React2	msal-react	Краткое руководство
JavaScript	MSAL.js2	msal — браузер	Краткое руководство
Угловой	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')
);

JavaScript

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

Угловой

// 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 { }

Дополнительные сведения о настраиваемых параметрах см. в статье Инициализация приложения с помощью MSAL.js.

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

• Добавьте код входа и выхода.