Ensidesprogram: inloggning och utloggning

Innan du kan hämta token för att komma åt API:er i ditt program behöver du en autentiserad användarkontext. Om du vill autentisera en användare kan du använda ett popup-fönster och/eller en omdirigeringsmetod .

Om ditt program har åtkomst till en autentiserad användarkontext eller ID-token kan du hoppa över inloggningssteget och hämta token direkt. Mer information finns i Enkel inloggning (SSO) med användartips.

Välja mellan en popup- eller omdirigeringsupplevelse

Valet mellan en popup- eller omdirigeringsupplevelse beror på ditt programflöde.

• Använd ett popup-fönster om du inte vill att användarna ska flytta från huvudprogramsidan under autentiseringen. Eftersom omdirigeringen av autentisering sker i ett popup-fönster bevaras huvudprogrammets tillstånd.

• Använd en omdirigering om användarna har webbläsarbegränsningar eller principer där popup-fönster är inaktiverade. Det finns till exempel kända problem med popup-fönster i Internet Explorer.

Logga in med ett popup-fönster

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)

Om du vill anropa en inloggningsupplevelse för en specifik väg importerar @angular/router du och lägger till MsalGuard i routningsdefinitionen.

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

Om du vill aktivera en popup-fönsterupplevelse anger du konfigurationen interactionType till InteractionType.Popup i MsalGuardConfiguration. Du kan också skicka de omfång som kräver medgivande.

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

Om du vill anropa en inloggningsupplevelse när en användare inte redan är inloggad använder du MsalAuthenticationTemplate funktionen från @azure/msal-react. MSAL React-omslutningen skyddar specifika komponenter genom att omsluta dem i komponenten MsalAuthenticationTemplate .

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

Om du vill anropa en specifik inloggningsupplevelse baserat på användarinteraktion (till exempel knappval) använder AuthenticatedTemplate du funktionen och/eller UnauthenticatedTemplate från @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>
    </>
  );
}

Logga in med en omdirigering

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)

Om du vill aktivera en omdirigeringsupplevelse anger du konfigurationen interactionTypeMsalGuardConfigurationtill InteractionType.Redirect i och sedan bootstrap MsalRedirectComponent för att hantera omdirigeringar.

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

Om du vill anropa en inloggningsupplevelse när en användare inte är inloggad använder du MsalAuthenticationTemplate funktionen från @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>
  );
}

Om du vill anropa en specifik inloggningsupplevelse baserat på användarinteraktion (till exempel knappval) använder AuthenticatedTemplate du funktionen och/eller UnauthenticatedTemplate från @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>
    </>
  );
}

Logga ut-beteende i webbläsare

För att säkerställa säker utloggning av en eller flera appar rekommenderas följande metoder:

• På delade enheter bör användarna använda en webbläsares privata/inkognitoläge och stänga alla webbläsarfönster innan de går bort från enheten.

• På enheter som inte delas bör användarna använda en låsskärm för operativsystemet för att låsa eller logga ut från hela operativsystemsessionen på enheten. Microsoft använder sin utloggningssida för att påminna användarna om dessa metodtips för sekretess och säkerhet.

Mer information finns i Microsofts metodtips för internetsekretess.

Om en användare väljer att inte logga ut med hjälp av rekommendationerna är följande andra metoder för att aktivera utloggningsfunktioner:

• Microsofts OpenID-Anslut Front Channel-utloggning för federerad utloggning. Du kan använda det här alternativet när en app delar ett inloggningstillstånd med en ny app, men hanterar sina egna sessionstoken/cookies. Det finns vissa begränsningar för den här implementeringen där innehåll blockeras, till exempel när webbläsare blockerar cookies från tredje part.

• Popup-fönster och/eller en omdirigering för lokal app-utloggning. Popup- och omdirigeringsmetoderna avslutar användarens session vid slutpunkten och för den lokala appen. Men de här metoderna kanske inte omedelbart rensar sessionen för andra federerade program om kommunikationen i frontkanalen blockeras.

Logga ut med ett popup-fönster

MSAL.js v2 och senare tillhandahåller en logoutPopup metod som rensar cacheminnet i webbläsarlagringen och öppnar ett popup-fönster till microsoft Entra-utloggningssidan. När du har loggat ut kommer omdirigeringen som standard till startsidan för inloggning och popup-fönstret stängs.

För funktionen efter utloggning kan du ange postLogoutRedirectUri att användaren ska omdirigeras till en specifik URI. Den här URI:n bör registreras som en omdirigerings-URI i din programregistrering. Du kan också konfigurera logoutPopup att omdirigera huvudfönstret till en annan sida, till exempel startsidan eller inloggningssidan genom att skicka mainWindowRedirectUri som en del av begäran.

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

Logga ut med en omdirigering

MSAL.js tillhandahåller en logout metod i v1 och en logoutRedirect metod i v2 som rensar cacheminnet i webbläsarens lagring och omdirigerar till microsoft Entra-utloggningssidan. När du har loggat ut kommer omdirigeringen som standard till inloggningsstartsidan.

För funktionen efter utloggning kan du ange postLogoutRedirectUri att användaren ska omdirigeras till en specifik URI. Den här URI:n bör registreras som en omdirigerings-URI i din programregistrering.

Eftersom Microsofts påminnelse om bästa praxis för internetsekretess om att använda en privat webbläsare och låsskärm inte visas i den här metoden kanske du vill beskriva metodtips och påminna användarna om att stänga alla webbläsarfönster.

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

Nästa steg

Gå vidare till nästa artikel i det här scenariot, Hämta en token för appen.