Single-Page-Webanwendung: Codekonfiguration

Gilt für: Mitarbeitermieter Externe Mieter (weitere Informationen)

Erfahren Sie, wie Sie den Code für Ihre Single-Page-Webanwendung (SPA) konfigurieren.

Voraussetzungen

• Registrieren Sie eine neue App im Microsoft Entra Admin Center, die nur für Konten in diesem Organisationsverzeichnis konfiguriert ist. Weitere Informationen finden Sie unter Registrieren einer Anwendung . Notieren Sie die folgenden Werte auf der Anwendungsübersichtsseite für die spätere Verwendung:
  • Anwendungs-ID (Client)
  • Verzeichnis-ID (Mandant)
• Fügen Sie die folgenden Umleitungs-URIs mithilfe der Konfiguration der Plattform für die Einzelseitenanwendung hinzu. Weitere Informationen finden Sie unter Hinzufügen eines Umleitungs-URI in Ihrer Anwendung .
  • Umleitungs-URI: http://localhost:3000/.

Microsoft-Bibliotheken zur Unterstützung von Single-Page-Apps

Die folgenden Microsoft-Bibliotheken unterstützen Single-Page-Apps:

Programmiersprache/Framework	Projekt auf GitHub	Paket	Erste Schritte gestartet	Anmelden von Benutzern	Zugriff auf Web-APIs
Reagieren	MSAL React2	msal-react	Schnellstart
JavaScript	MSAL.js2	msal-browser	Schnellstart
Eckig	MSAL Angular2	msal-angular	Schnellstart

Codekonfiguration der Anwendung

In einer MSAL-Bibliothek werden die Anwendungsregistrierungsinformationen während der Initialisierung der Bibliothek als Konfiguration übergeben.

Reagieren

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

Eckig

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

Weitere Informationen zu den konfigurierbaren Optionen finden Sie unter Initialisieren von Clientanwendungen mithilfe von MSAL.js.

Nächster Schritt

• Fügen Sie Anmelde- und Abmeldecode hinzu.