Egyoldalas alkalmazás: Kódkonfiguráció

Megtudhatja, hogyan konfigurálhatja az egyoldalas alkalmazás (SPA) kódját.

Egyoldalas alkalmazásokat támogató Microsoft-kódtárak

Az alábbi Microsoft-kódtárak támogatják az egyoldalas alkalmazásokat:

Nyelv/ keretrendszer	Projekt bekapcsolva GitHub	Csomag	Megszerzés közül	Felhasználók bejelentkezése	Webes API-k elérése	Általánosan elérhető (GA) vagy 1. nyilvános előzetes verzió
Angular	MSAL Angular v2 2	msal-angular	Gyors útmutató			FE
Angular	MSAL szögletes3	msal-angular	—			FE
AngularJS	MSAL AngularJS3	msal-angularjs	—			Nyilvános előzetes verzió
JavaScript	MSAL.js 2-sverzió	msal-browser	Oktatóanyag			FE
JavaScript	MSAL.js 1,03	msal-core	—			FE
Reagálás	MSAL React2	msal-react	Gyors útmutató			FE

¹ Az online szolgáltatásokra vonatkozó univerzális licencfeltételek nyilvános előzetes verziójú kódtárakra vonatkoznak.

² Hitelesítési kódfolyamat csak PKCE-vel (ajánlott).

³ Implicit engedélyezési folyamat csak (nem ajánlott).

Alkalmazáskód konfigurálása

Az MSAL-kódtárakban az alkalmazásregisztrációs adatok konfigurációként lesznek átadva a kódtár inicializálása során.

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

A konfigurálható beállításokról további információt az alkalmazás inicializálása MSAL.js című témakörben talál.

JavaScript (MSAL.js v1)

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

A konfigurálható beállításokról további információt az alkalmazás inicializálása MSAL.js című témakörben talál.

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

Reagálás

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

Következő lépések

Lépjen tovább ebben a forgatókönyvben a következő cikkre, a bejelentkezésre és a kijelentkezésre.