Toepassing met één pagina: aanmelden en afmelden

Voordat u tokens kunt verkrijgen voor toegang tot API's in uw toepassing, hebt u een geverifieerde gebruikerscontext nodig. Als u een gebruiker wilt verifiëren, kunt u een pop-upvenster en/of een aanmeldingsmethode omleiden gebruiken.

Als uw toepassing toegang heeft tot een geverifieerde gebruikerscontext of id-token, kunt u de aanmeldingsstap overslaan en tokens rechtstreeks verkrijgen. Zie Eenmalige aanmelding (SSO) met hint van de gebruiker voor meer informatie.

Kiezen tussen een pop-up- of omleidingservaring

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

• Gebruik een pop-upvenster als u niet wilt dat gebruikers tijdens de verificatie van uw hoofdtoepassingspagina weggaan. Omdat de verificatieomleiding plaatsvindt in een pop-upvenster, blijft de status van de hoofdtoepassing behouden.

• Gebruik een omleiding als gebruikers browserbeperkingen of beleidsregels hebben waarbij pop-upvensters zijn uitgeschakeld. Er zijn bijvoorbeeld bekende problemen 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);
  });

Angular (MSAL.js v2)

Als u een aanmeldingservaring wilt aanroepen voor een specifieke route, importeert @angular/router en voegt u deze toe MsalGuard aan de routedefinitie.

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

Als u een pop-upvenster wilt inschakelen, stelt u de interactionType configuratie InteractionType.Popup in op het MsalGuardConfigurationvenster. 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: "your_app_id",
        },
        cache: {
          cacheLocation: "localStorage",
          storeAuthStateInCookie: isIE,
        },
      }),
      {
        interactionType: InteractionType.Popup, // MsalGuard Configuration
        authRequest: {
          scopes: ["User.Read"],
        },
      },
      null
    ),
  ],
})
export class AppModule {}

React

Als u een aanmeldingservaring wilt aanroepen wanneer een gebruiker nog niet is aangemeld, gebruikt u de MsalAuthenticationTemplate functie van @azure/msal-react. De MSAL React-wrapper beveiligt specifieke onderdelen door ze in het MsalAuthenticationTemplate onderdeel te verpakken.

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 not signed-in.</p>
      <WelcomeUser />
    </MsalAuthenticationTemplate>
  );
}

Als u een specifieke aanmeldingservaring wilt aanroepen op basis van gebruikersinteractie (bijvoorbeeld knop selecteren), gebruikt u de AuthenticatedTemplate en/of UnauthenticatedTemplate functie van @azure/msal-react.

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

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

// SignInButton Component returns a button that invokes a popup sign in 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 een 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);

Angular (MSAL.js v2)

Als u een omleidingservaring wilt inschakelen, stelt u de interactionType configuratie InteractionType.Redirect in op de MsalGuardConfigurationen bootstrap MsalRedirectComponent om omleidingen te verwerken.

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

React

Als u een aanmeldingservaring wilt aanroepen wanneer een gebruiker niet is aangemeld, gebruikt u de MsalAuthenticationTemplate functie van @azure/msal-react.

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 not signed-in.</p>
      <WelcomeUser />
    </MsalAuthenticationTemplate>
  );
}

Als u een specifieke aanmeldingservaring wilt aanroepen op basis van gebruikersinteractie (bijvoorbeeld knop selecteren), gebruikt u de AuthenticatedTemplate en/of UnauthenticatedTemplate functie van @azure/msal-react.

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

Gedrag afmelden bij browsers

Om ervoor te zorgen dat u zich veilig afmeldt bij een of meer apps, worden de volgende methoden aanbevolen:

• Op gedeelde apparaten moeten gebruikers de privé-/incognitomodus van een browser gebruiken en alle browservensters sluiten voordat ze van het apparaat afstappen.

• Op apparaten die niet worden gedeeld, moeten gebruikers een vergrendelingsscherm van het besturingssysteem gebruiken om hun hele besturingssysteemsessie op het apparaat te vergrendelen of af te melden. Microsoft gebruikt de afmeldingspagina om gebruikers te herinneren aan deze aanbevolen procedures voor privacy en beveiliging.

Zie de best practices voor internetprivacy van Microsoft voor meer informatie.

Als een gebruiker ervoor kiest zich niet af te melden met behulp van de aanbevelingen, zijn de volgende methoden om afmeldingsfunctionaliteit in te schakelen:

• OpenID Verbinding maken's Front Channel Logout van Microsoft voor federatieve afmelding. U kunt deze optie gebruiken wanneer een app een aanmeldingsstatus deelt met een nieuwe app, maar eigen sessietokens/cookies beheert. Er gelden enkele beperkingen voor deze implementatie waarbij inhoud wordt geblokkeerd, bijvoorbeeld wanneer browsers cookies van derden blokkeren.

• Pop-upvenster en/of omleidingvoor lokale app-afmelding. De pop-up- en omleidingsmethoden beëindigen de sessie van de gebruiker op het eindpunt en voor de lokale app. Maar deze methoden kunnen de sessie voor andere federatieve toepassingen mogelijk niet onmiddellijk wissen als front-channelcommunicatie wordt geblokkeerd.

Afmelden met een pop-upvenster

MSAL.js v2 en hoger biedt een logoutPopup methode waarmee de cache in browseropslag wordt gewist en er een pop-upvenster wordt geopend op de aanmeldingspagina van Microsoft Entra. Nadat u zich hebt afgemeld, wordt de omleiding standaard ingesteld op de aanmeldingspagina en wordt het pop-upvenster gesloten.

Voor de ervaring na afmelden kunt u instellen postLogoutRedirectUri dat de gebruiker wordt omgeleid naar een specifieke URI. Deze URI moet worden geregistreerd als een omleidings-URI in uw toepassingsregistratie. U kunt het hoofdvenster ook omleiden logoutPopup naar een andere pagina, zoals de startpagina of aanmeldingspagina 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);

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: "/"
    });
}

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 pop-up sign out 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 een logoutRedirect methode in v2 waarmee de cache in browseropslag wordt gewist en wordt omgeleid naar de afmeldingspagina van Microsoft Entra. Nadat u zich hebt afgemeld, wordt de omleiding standaard ingesteld op de startpagina voor aanmelden.

Voor de ervaring na afmelden kunt u instellen postLogoutRedirectUri dat de gebruiker wordt omgeleid naar een specifieke URI. Deze URI moet worden geregistreerd als een omleidings-URI in uw toepassingsregistratie.

Omdat de herinnering van microsoft aan best practices voor internetprivacy over het gebruik van een privébrowser en vergrendelingsscherm niet wordt weergegeven in deze methode, kunt u best practices beschrijven en gebruikers eraan herinneren om alle browservensters te sluiten.

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

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

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.