Toepassing met één pagina: aanmelden en afmelden

Informatie over het toevoegen van aanmelding aan de code voor uw toepassing met één pagina.

Voordat u tokens kunt verkrijgen voor toegang tot API's in uw toepassing, hebt u een geverifieerde gebruikerscontext nodig. U kunt gebruikers op twee manieren aanmelden bij uw toepassing MSAL.js:

• Pop-upvenster met behulp van de loginPopup methode
• Omleiden met behulp van de loginRedirect methode

U kunt eventueel ook de bereiken van de API's doorgeven waarvoor de gebruiker toestemming moet geven op het moment van aanmelden.

Als uw toepassing al toegang heeft tot een geverifieerde gebruikerscontext of id-token, kunt u de aanmeldingsstap overslaan en tokens rechtstreeks verkrijgen. Zie SSO met gebruikershint voor meer informatie.

Kiezen tussen een pop-up- of omleidingservaring voor aanmelden

De keuze tussen een pop-up- of omleidingservaring is afhankelijk van uw toepassingsstroom:

• Als u niet wilt dat gebruikers tijdens de verificatie van uw hoofdtoepassingspagina weggaan, raden we de pop-upmethode aan. Omdat de verificatieomleiding plaatsvindt in een pop-upvenster, blijft de status van de hoofdtoepassing behouden.

• Als gebruikers browserbeperkingen of beleidsregels hebben waarbij pop-upvensters zijn uitgeschakeld, kunt u de omleidingsmethode gebruiken. Gebruik de omleidingsmethode met de browser Internet Explorer, omdat er bekende problemen zijn met pop-upvensters in Internet Explorer.

Aanmelden met een pop-upvenster

JavaScript (MSAL.js v2)

const config = {
  auth: {
    clientId: "your_app_id",
    redirectUri: "your_app_redirect_uri", //defaults to application start page
    postLogoutRedirectUri: "your_app_logout_redirect_uri",
  },
};

const loginRequest = {
  scopes: ["User.ReadWrite"],
};

let accountId = "";

const myMsal = new PublicClientApplication(config);

myMsal
  .loginPopup(loginRequest)
  .then(function (loginResponse) {
    accountId = loginResponse.account.homeAccountId;
    // Display signed-in user content, call API, etc.
  })
  .catch(function (error) {
    //login failure
    console.log(error);
  });

JavaScript (MSAL.js v1)

const config = {
  auth: {
    clientId: "your_app_id",
    redirectUri: "your_app_redirect_uri", //defaults to application start page
    postLogoutRedirectUri: "your_app_logout_redirect_uri",
  },
};

const loginRequest = {
  scopes: ["User.ReadWrite"],
};

const myMsal = new UserAgentApplication(config);

myMsal
  .loginPopup(loginRequest)
  .then(function (loginResponse) {
    //login success
  })
  .catch(function (error) {
    //login failure
    console.log(error);
  });

Angular (MSAL.js v2)

Met de MSAL Angular-wrapper kunt u specifieke routes in uw toepassing beveiligen door deze toe te voegen MsalGuard aan de routedefinitie. Met deze beveiliging wordt de methode aangeroepen om u aan te melden wanneer die route wordt geopend.

// In app-routing.module.ts
import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { ProfileComponent } from "./profile/profile.component";
import { MsalGuard } from "@azure/msal-angular";
import { HomeComponent } from "./home/home.component";

const routes: Routes = [
  {
    path: "profile",
    component: ProfileComponent,
    canActivate: [MsalGuard],
  },
  {
    path: "",
    component: HomeComponent,
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: false })],
  exports: [RouterModule],
})
export class AppRoutingModule {}

Stel voor een pop-upvenster de interactionType configuratie InteractionType.Popup in op de Guard-configuratie. U kunt ook de bereiken doorgeven waarvoor toestemming is vereist:

// In app.module.ts
import { PublicClientApplication, InteractionType } from "@azure/msal-browser";
import { MsalModule } from "@azure/msal-angular";

@NgModule({
  imports: [
    MsalModule.forRoot(
      new PublicClientApplication({
        auth: {
          clientId: "Enter_the_Application_Id_Here",
        },
        cache: {
          cacheLocation: "localStorage",
          storeAuthStateInCookie: isIE,
        },
      }),
      {
        interactionType: InteractionType.Popup, // Msal Guard Configuration
        authRequest: {
          scopes: ["user.read"],
        },
      },
      null
    ),
  ],
})
export class AppModule {}

Angular (MSAL.js v1)

Met de MSAL Angular-wrapper kunt u specifieke routes in uw toepassing beveiligen door deze toe te voegen MsalGuard aan de routedefinitie. Met deze beveiliging wordt de methode aangeroepen om u aan te melden wanneer die route wordt geopend.

// In app-routing.module.ts
import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { ProfileComponent } from "./profile/profile.component";
import { MsalGuard } from "@azure/msal-angular";
import { HomeComponent } from "./home/home.component";
const routes: Routes = [
  {
    path: "profile",
    component: ProfileComponent,
    canActivate: [MsalGuard],
  },
  {
    path: "",
    component: HomeComponent,
  },
];
@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: false })],
  exports: [RouterModule],
})
export class AppRoutingModule {}

Schakel de popUp configuratieoptie in voor een pop-upvenster. U kunt ook de bereiken doorgeven waarvoor toestemming is vereist:

// In app.module.ts
@NgModule({
    imports: [
        MsalModule.forRoot({
            auth: {
                clientId: 'your_app_id',
            }
        }, {
            popUp: true,
            consentScopes: ["User.ReadWrite"]
        })
    ]
})

React

Met de MSAL React-wrapper kunt u specifieke onderdelen beveiligen door ze in het MsalAuthenticationTemplate onderdeel te verpakken. Dit onderdeel roept aanmelding aan als een gebruiker nog niet is aangemeld of onderliggende onderdelen anders weergeeft.

import { InteractionType } from "@azure/msal-browser";
import { MsalAuthenticationTemplate, useMsal } from "@azure/msal-react";

function WelcomeUser() {
  const { accounts } = useMsal();
  const username = accounts[0].username;

  return <p>Welcome, {username}</p>;
}

// Remember that MsalProvider must be rendered somewhere higher up in the component tree
function App() {
  return (
    <MsalAuthenticationTemplate interactionType={InteractionType.Popup}>
      <p>This will only render if a user is signed-in.</p>
      <WelcomeUser />
    </MsalAuthenticationTemplate>
  );
}

U kunt de @azure/msal-browser API's ook rechtstreeks gebruiken om een aanmelding aan te roepen die is gekoppeld aan de AuthenticatedTemplate en/of UnauthenticatedTemplate onderdelen om specifieke inhoud weer te geven aan respectievelijk aangemelde of afgemelde gebruikers. Dit is de aanbevolen aanpak als u aanmelding moet aanroepen als gevolg van interactie van de gebruiker, zoals een klik op de knop.

import {
  useMsal,
  AuthenticatedTemplate,
  UnauthenticatedTemplate,
} from "@azure/msal-react";

function signInClickHandler(instance) {
  instance.loginPopup();
}

// SignInButton Component returns a button that invokes a popup login when clicked
function SignInButton() {
  // useMsal hook will return the PublicClientApplication instance you provided to MsalProvider
  const { instance } = useMsal();

  return <button onClick={() => signInClickHandler(instance)}>Sign In</button>;
}

function WelcomeUser() {
  const { accounts } = useMsal();
  const username = accounts[0].username;

  return <p>Welcome, {username}</p>;
}

// Remember that MsalProvider must be rendered somewhere higher up in the component tree
function App() {
  return (
    <>
      <AuthenticatedTemplate>
        <p>This will only render if a user is signed-in.</p>
        <WelcomeUser />
      </AuthenticatedTemplate>
      <UnauthenticatedTemplate>
        <p>This will only render if a user is not signed-in.</p>
        <SignInButton />
      </UnauthenticatedTemplate>
    </>
  );
}

Aanmelden met omleiding

JavaScript (MSAL.js v2)

const config = {
  auth: {
    clientId: "your_app_id",
    redirectUri: "your_app_redirect_uri", //defaults to application start page
    postLogoutRedirectUri: "your_app_logout_redirect_uri",
  },
};

const loginRequest = {
  scopes: ["User.ReadWrite"],
};

let accountId = "";

const myMsal = new PublicClientApplication(config);

function handleResponse(response) {
  if (response !== null) {
    accountId = response.account.homeAccountId;
    // Display signed-in user content, call API, etc.
  } else {
    // In case multiple accounts exist, you can select
    const currentAccounts = myMsal.getAllAccounts();

    if (currentAccounts.length === 0) {
      // no accounts signed-in, attempt to sign a user in
      myMsal.loginRedirect(loginRequest);
    } else if (currentAccounts.length > 1) {
      // Add choose account code here
    } else if (currentAccounts.length === 1) {
      accountId = currentAccounts[0].homeAccountId;
    }
  }
}

myMsal.handleRedirectPromise().then(handleResponse);

JavaScript (MSAL.js v1)

De omleidingsmethoden retourneren geen belofte vanwege de verplaatsing van de hoofd-app. Als u de geretourneerde tokens wilt verwerken en openen, registreert u callbacks voor succes en fouten voordat u de omleidingsmethoden aanroept.

const config = {
  auth: {
    clientId: "your_app_id",
    redirectUri: "your_app_redirect_uri", //defaults to application start page
    postLogoutRedirectUri: "your_app_logout_redirect_uri",
  },
};

const loginRequest = {
  scopes: ["User.ReadWrite"],
};

const myMsal = new UserAgentApplication(config);

function authCallback(error, response) {
  //handle redirect response
}

myMsal.handleRedirectCallback(authCallback);

myMsal.loginRedirect(loginRequest);

Angular (MSAL.js v2)

De code hier is hetzelfde als eerder in de sectie over aanmelden met een pop-upvenster, behalve dat de interactionType code is ingesteld InteractionType.Redirect voor de MsalGuard-configuratie en de MsalRedirectComponent opstartprocedure voor het afhandelen van omleidingen.

// In app.module.ts
import { PublicClientApplication, InteractionType } from "@azure/msal-browser";
import { MsalModule, MsalRedirectComponent } from "@azure/msal-angular";

@NgModule({
  imports: [
    MsalModule.forRoot(
      new PublicClientApplication({
        auth: {
          clientId: "Enter_the_Application_Id_Here",
        },
        cache: {
          cacheLocation: "localStorage",
          storeAuthStateInCookie: isIE,
        },
      }),
      {
        interactionType: InteractionType.Redirect, // Msal Guard Configuration
        authRequest: {
          scopes: ["user.read"],
        },
      },
      null
    ),
  ],
  bootstrap: [AppComponent, MsalRedirectComponent],
})
export class AppModule {}

Angular (MSAL.js v1)

De code hier is hetzelfde als eerder in de sectie over aanmelden met een pop-upvenster. De standaardstroom wordt omgeleid.

React

Met de MSAL React-wrapper kunt u specifieke onderdelen beveiligen door ze in het MsalAuthenticationTemplate onderdeel te verpakken. Dit onderdeel roept aanmelding aan als een gebruiker nog niet is aangemeld of onderliggende onderdelen anders weergeeft.

import { InteractionType } from "@azure/msal-browser";
import { MsalAuthenticationTemplate, useMsal } from "@azure/msal-react";

function WelcomeUser() {
  const { accounts } = useMsal();
  const username = accounts[0].username;

  return <p>Welcome, {username}</p>;
}

// Remember that MsalProvider must be rendered somewhere higher up in the component tree
function App() {
  return (
    <MsalAuthenticationTemplate interactionType={InteractionType.Redirect}>
      <p>This will only render if a user is signed-in.</p>
      <WelcomeUser />
    </MsalAuthenticationTemplate>
  );
}

U kunt de @azure/msal-browser API's ook rechtstreeks gebruiken om een aanmelding aan te roepen die is gekoppeld aan de AuthenticatedTemplate en/of UnauthenticatedTemplate onderdelen om specifieke inhoud weer te geven aan respectievelijk aangemelde of afgemelde gebruikers. Dit is de aanbevolen aanpak als u aanmelding moet aanroepen als gevolg van interactie van de gebruiker, zoals een klik op de knop.

import {
  useMsal,
  AuthenticatedTemplate,
  UnauthenticatedTemplate,
} from "@azure/msal-react";

function signInClickHandler(instance) {
  instance.loginRedirect();
}

// SignInButton Component returns a button that invokes a popup login when clicked
function SignInButton() {
  // useMsal hook will return the PublicClientApplication instance you provided to MsalProvider
  const { instance } = useMsal();

  return <button onClick={() => signInClickHandler(instance)}>Sign In</button>;
}

function WelcomeUser() {
  const { accounts } = useMsal();
  const username = accounts[0].username;

  return <p>Welcome, {username}</p>;
}

// Remember that MsalProvider must be rendered somewhere higher up in the component tree
function App() {
  return (
    <>
      <AuthenticatedTemplate>
        <p>This will only render if a user is signed-in.</p>
        <WelcomeUser />
      </AuthenticatedTemplate>
      <UnauthenticatedTemplate>
        <p>This will only render if a user is not signed-in.</p>
        <SignInButton />
      </UnauthenticatedTemplate>
    </>
  );
}

Afmeldingsgedrag in browsers

Hoe meer apps een gebruiker heeft aangemeld en zich wil afmelden, hoe meer kans op problemen optreedt, gezien de beperkte manieren om dergelijke functionaliteit in browsers te implementeren. De best practices voor internetprivacy van Microsoft raden aan dat op een gedeeld apparaat waarop een gebruiker zich kan afmelden bij een app, de gebruiker de privé-/incognitomodus van een browser moet gebruiken en alle browservensters moet sluiten voordat hij zich van het apparaat afstapt.

Op apparaten die niet worden gedeeld, moeten gebruikers gebruikmaken van een vergrendelingsscherm van het besturingssysteem, zodat ze hun volledige besturingssysteemsessie op het apparaat kunnen vergrendelen of afmelden. Microsoft gebruikt de afmeldingspagina om gebruikers te herinneren aan deze aanbevolen procedures om hun privacy en beveiliging te verbeteren.

Voor gebruikers die niet ervoor kiezen om de veilige aanpak te volgen, kan de app proberen zich voor te bereiden op beide van de volgende gevallen:

1. De gebruiker die de afmelding rechtstreeks vanuit de app heeft gestart.
2. Vanuit een andere app die de aanmeldingsstatus deelt met de nieuwe app, maar eigen sessietokens/cookies beheert.

Voor het eerste geval beschrijven de volgende secties opties voor het afmelden van de gebruiker bij een lokale app met behulp van een pop-up of omleiding.

Voor het tweede geval waarin afmelding wordt gestart vanuit een andere app, gebruikt Microsoft de OpenID-Verbinding maken Front Channel-afmelding voor federatieve afmelding. Er gelden enkele beperkingen voor deze implementatie waarbij inhoud van derden wordt geblokkeerd, bijvoorbeeld wanneer browsers cookies van derden standaard blokkeren.

Met de volgende pop-up- en omleidingsmethoden wordt de sessie van de gebruiker op het eindpunt en voor de lokale app beëindigd, maar wordt de sessie voor andere federatieve toepassingen mogelijk niet onmiddellijk gewist als communicatie via front-channel wordt geblokkeerd. Voor een gegarandeerde federatieve afmelding, ongeacht het gedrag van de browser, raden we gebruikers aan om privénavigatie of vergrendelingsschermen te gebruiken.

Afmelden met een pop-upvenster

Deze modus wordt ondersteund, maar heeft dezelfde beperkingen voor aanmelding met een pop-upvenster dat browsers beperkingen of beleidsregels kunnen uitschakelen pop-upvensters. MSAL.js v2 en hoger biedt een logoutPopup methode waarmee de cache in browseropslag wordt gewist en er een pop-upvenster wordt geopend naar de afmeldingspagina van Microsoft Entra. Nadat u zich hebt afgemeld, stuurt Microsoft Entra ID de pop-up terug naar uw toepassing. MSAL.js sluit het pop-upvenster.

U kunt de URI configureren waarnaar microsoft Entra-id moet worden omgeleid na afmelden door de instelling in te stellen postLogoutRedirectUri. Deze URI moet worden geregistreerd als een omleidings-URI in uw toepassingsregistratie.

U kunt ook configureren logoutPopup om het hoofdvenster om te leiden naar een andere pagina, zoals de startpagina of aanmeldingspagina, nadat de afmelding is voltooid door door te geven mainWindowRedirectUri als onderdeel van de aanvraag.

JavaScript (MSAL.js v2)

const config = {
  auth: {
    clientId: "your_app_id",
    redirectUri: "your_app_redirect_uri", // defaults to application start page
    postLogoutRedirectUri: "your_app_logout_redirect_uri",
  },
};

const myMsal = new PublicClientApplication(config);

// you can select which account application should sign out
const logoutRequest = {
  account: myMsal.getAccountByHomeId(homeAccountId),
  mainWindowRedirectUri: "your_app_main_window_redirect_uri",
};

await myMsal.logoutPopup(logoutRequest);

JavaScript (MSAL.js v1)

Afmelden met een pop-upvenster wordt niet ondersteund in MSAL.js v1

Angular (MSAL.js v2)

// In app.module.ts
@NgModule({
    imports: [
        MsalModule.forRoot( new PublicClientApplication({
            auth: {
                clientId: 'your_app_id',
                postLogoutRedirectUri: 'your_app_logout_redirect_uri'
            }
        }), null, null)
    ]
})

// In app.component.ts
logout() {
    this.authService.logoutPopup({
        mainWindowRedirectUri: "/"
    });
}

Angular (MSAL.js v1)

Afmelden met een pop-upvenster wordt niet ondersteund in MSAL Angular v1

React

import {
  useMsal,
  AuthenticatedTemplate,
  UnauthenticatedTemplate,
} from "@azure/msal-react";

function signOutClickHandler(instance) {
  const logoutRequest = {
    account: instance.getAccountByHomeId(homeAccountId),
    mainWindowRedirectUri: "your_app_main_window_redirect_uri",
    postLogoutRedirectUri: "your_app_logout_redirect_uri",
  };
  instance.logoutPopup(logoutRequest);
}

// SignOutButton Component returns a button that invokes a popup logout when clicked
function SignOutButton() {
  // useMsal hook will return the PublicClientApplication instance you provided to MsalProvider
  const { instance } = useMsal();

  return (
    <button onClick={() => signOutClickHandler(instance)}>Sign Out</button>
  );
}

// Remember that MsalProvider must be rendered somewhere higher up in the component tree
function App() {
  return (
    <>
      <AuthenticatedTemplate>
        <p>This will only render if a user is signed-in.</p>
        <SignOutButton />
      </AuthenticatedTemplate>
      <UnauthenticatedTemplate>
        <p>This will only render if a user is not signed-in.</p>
      </UnauthenticatedTemplate>
    </>
  );
}

Afmelden met een omleiding

MSAL.js biedt een logout methode in v1 en geïntroduceerde logoutRedirect methode in v2 waarmee de cache in browseropslag wordt gewist en het venster wordt omgeleid naar de afmeldingspagina van Microsoft Entra. Nadat u zich hebt afgemeld, wordt Microsoft Entra ID standaard teruggeleid naar de pagina die afmelding heeft aangeroepen.

Omdat de gebruiker de herinnering aan de best practices voor internetprivacy over het gebruik van een privébrowser en vergrendelingsscherm niet ziet, wil de beveiligd-WACHTWOORDVERIFICATIE-app mogelijk ook best practices beschrijven en gebruikers eraan herinneren om alle browservensters te sluiten.

U kunt de URI configureren waarnaar deze moet worden omgeleid na afmelden door de instelling in te stellen postLogoutRedirectUri. Deze URI moet worden geregistreerd als een omleidings-URI in uw toepassingsregistratie.

JavaScript (MSAL.js v2)

const config = {
  auth: {
    clientId: "your_app_id",
    redirectUri: "your_app_redirect_uri", //defaults to application start page
    postLogoutRedirectUri: "your_app_logout_redirect_uri",
  },
};

const myMsal = new PublicClientApplication(config);

// you can select which account application should sign out
const logoutRequest = {
  account: myMsal.getAccountByHomeId(homeAccountId),
};

myMsal.logoutRedirect(logoutRequest);

JavaScript (MSAL.js v1)

const config = {
  auth: {
    clientId: "your_app_id",
    redirectUri: "your_app_redirect_uri", //defaults to application start page
    postLogoutRedirectUri: "your_app_logout_redirect_uri",
  },
};

const myMsal = new UserAgentApplication(config);

myMsal.logout();

Angular (MSAL.js v2)

// In app.module.ts
@NgModule({
    imports: [
        MsalModule.forRoot( new PublicClientApplication({
            auth: {
                clientId: 'your_app_id',
                postLogoutRedirectUri: 'your_app_logout_redirect_uri'
            }
        }), null, null)
    ]
})

// In app.component.ts
logout() {
    this.authService.logoutRedirect();
}

Angular (MSAL.js v1)

//In app.module.ts
@NgModule({
    imports: [
        MsalModule.forRoot({
            auth: {
                clientId: 'your_app_id',
                postLogoutRedirectUri: "your_app_logout_redirect_uri"
            }
        })
    ]
})
// In app.component.ts
this.authService.logout();

React

import {
  useMsal,
  AuthenticatedTemplate,
  UnauthenticatedTemplate,
} from "@azure/msal-react";

function signOutClickHandler(instance) {
  const logoutRequest = {
    account: instance.getAccountByHomeId(homeAccountId),
    postLogoutRedirectUri: "your_app_logout_redirect_uri",
  };
  instance.logoutRedirect(logoutRequest);
}

// SignOutButton Component returns a button that invokes a redirect logout when clicked
function SignOutButton() {
  // useMsal hook will return the PublicClientApplication instance you provided to MsalProvider
  const { instance } = useMsal();

  return (
    <button onClick={() => signOutClickHandler(instance)}>Sign Out</button>
  );
}

// Remember that MsalProvider must be rendered somewhere higher up in the component tree
function App() {
  return (
    <>
      <AuthenticatedTemplate>
        <p>This will only render if a user is signed-in.</p>
        <SignOutButton />
      </AuthenticatedTemplate>
      <UnauthenticatedTemplate>
        <p>This will only render if a user is not signed-in.</p>
      </UnauthenticatedTemplate>
    </>
  );
}

Volgende stappen

Ga verder met het volgende artikel in dit scenario, waarbij u een token voor de app verkrijgt.