Aplikacja jednostronicowa: konfiguracja kodu

Dotyczy: Dzierżawcy siły roboczej Biały okrąg z szarym symbolem X. dzierżawcy zewnętrzni (White circle with a gray X symbol.dowiedz się więcej)

Dowiedz się, jak skonfigurować kod dla aplikacji jednostronicowej (SPA).

Wymagania wstępne

• Zarejestruj nową aplikację w centrum administracyjnym usługi Microsoft Entra, skonfigurowaną tylko dla kont w tym katalogu organizacyjnym. Aby uzyskać więcej informacji, zobacz Rejestrowanie aplikacji . Zapisz następujące wartości na stronie Przegląd aplikacji do późniejszego użycia:
  • Identyfikator aplikacji (klienta)
  • Identyfikator katalogu (klienta)
• Dodaj następujące identyfikatory URI przekierowania, używając konfiguracji platformy aplikacji jednostronicowej. Więcej informacji znajdziesz w Jak dodać adres URI przekierowania w aplikacji.
  • Identyfikator URI przekierowania: http://localhost:3000/.

Biblioteki firmy Microsoft obsługujące aplikacje jednostronicowe

Następujące biblioteki firmy Microsoft obsługują aplikacje jednostronicowe:

Język/struktura	Projekt dotyczący GitHub	Pakiet	Uzyskiwanie rozpoczęło się	Logowanie użytkowników	Dostęp do interfejsów API sieci Web
Reaguj	MSAL React2	msal-react	Szybki start
JavaScript	MSAL.js2	msal-browser	Szybki start
Kanciasty	MSAL Angular2	msal-angular	Szybki start

Konfiguracja kodu aplikacji

W bibliotece MSAL informacje dotyczące rejestracji aplikacji są przekazywane jako konfiguracja podczas inicjowania biblioteki.

Reagować

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

Kanciasty

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

Aby uzyskać więcej informacji na temat konfigurowalnych opcji, zobacz Inicjowanie aplikacji przy użyciu MSAL.js.

Następny krok

• Dodaj kod logowania i wylogowania.