Ensidesprogram: Kodkonfiguration

Gäller för: Arbetskraftshyresgäster Externa hyresgäster (läs mer)

Lär dig hur du konfigurerar koden för ditt ensidesprogram (SPA).

Förutsättningar

• Registrera en ny app i administrationscentret för Microsoft Entra, som endast konfigurerats för konton i den här organisationskatalogen. Mer information finns i Registrera ett program . Registrera följande värden från programöversiktssidan för senare användning:
  • App-ID (klient-ID)
  • Katalog-ID (hyresgäst)
• Lägg till följande omdirigerings-URI:er med hjälp av konfigurationen för ensidesapplikationsplattformen. Mer information finns i Så här lägger du till en omdirigerings-URI i ditt program .
  • omdirigerings-URI: http://localhost:3000/.

Microsoft-bibliotek som stöder ensidesapplikationer

Följande Microsoft-bibliotek stöder enkeltsidiga appar:

Språk/ramverk	Projekt på GitHub	Paket	Få komma igång	Logga in användare	Åtkomst till webb-API:er
Reagera	MSAL React2	msal-react	Snabbstart
JavaScript	MSAL.js2	msal-browser	Snabbstart
Kantig	MSAL Angular2	msal-angular	Snabbstart

Konfiguration av programkod

I ett MSAL-bibliotek skickas programregistreringsinformationen som konfiguration under initieringen av biblioteket.

Reagera

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

Kantig

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

Mer information om konfigurerbara alternativ finns i Initiera program med MSAL.js.

Nästa steg

• Lägg till inloggnings- och utloggningskod.