Enkelsidigt program: Inloggning och utloggning

Lär dig hur du lägger till inloggning i koden för ditt ensidesprogram.

Innan du kan hämta token för att komma åt API:er i ditt program behöver du en autentiserad användarkontext. Du kan logga in användare i ditt program på MSAL.js på två sätt:

• Popup-fönster med hjälp loginPopup av metoden
• Omdirigering med hjälp loginRedirect av metoden

Du kan också skicka omfången för de API:er som du behöver användaren för att godkänna vid tidpunkten för inloggningen.

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

Välja mellan en popup- eller omdirigeringsupplevelse för inloggning

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

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

• Om användarna har webbläsarbegränsningar eller principer där popup-fönster är inaktiverade kan du använda omdirigeringsmetoden. Använd omdirigeringsmetoden med Webbläsaren Internet Explorer eftersom det finns 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);
  });

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)

Med MSAL Angular-omslutningen kan du skydda specifika vägar i ditt program genom att lägga MsalGuard till i routningsdefinitionen. Den här vakten anropar metoden för att logga in när den vägen används.

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

För en popup-fönsterupplevelse anger du konfigurationen interactionType till InteractionType.Popup i Guard-konfigurationen. Du kan också skicka de omfång som kräver medgivande enligt följande:

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

Med MSAL Angular-omslutningen kan du skydda specifika vägar i ditt program genom att lägga MsalGuard till i routningsdefinitionen. Den här vakten anropar metoden för att logga in när den vägen används.

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

Aktivera konfigurationsalternativet popUp för en popup-fönsterupplevelse. Du kan också skicka de omfång som kräver medgivande enligt följande:

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

React

Med MSAL React-omslutningen kan du skydda specifika komponenter genom att omsluta dem i komponenten MsalAuthenticationTemplate . Den här komponenten anropar inloggning om en användare inte redan är inloggad eller renderar underordnade komponenter på annat sätt.

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

Du kan också använda API:erna @azure/msal-browser direkt för att anropa en inloggning som är kopplad till komponenterna AuthenticatedTemplate och/eller UnauthenticatedTemplate för att återge specifikt innehåll till inloggade respektive utloggade användare. Detta är den rekommenderade metoden om du behöver anropa inloggning som ett resultat av användarinteraktion, till exempel ett knappklick.

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

Logga in med 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);

JavaScript (MSAL.js v1)

Omdirigeringsmetoderna returnerar inte något löfte på grund av flytten från huvudappen. Om du vill bearbeta och komma åt de returnerade token registrerar du lyckade och felåteranrop innan du anropar omdirigeringsmetoderna.

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)

Koden här är samma som beskrevs tidigare i avsnittet om inloggning med ett popup-fönster, förutom att interactionType är inställt på InteractionType.Redirect för MsalGuard-konfigurationen och MsalRedirectComponent är bootstrapped 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 {}

Angular (MSAL.js v1)

Koden här är samma som beskrevs tidigare i avsnittet om inloggning med ett popup-fönster. Standardflödet är omdirigering.

React

Med MSAL React-omslutningen kan du skydda specifika komponenter genom att omsluta dem i komponenten MsalAuthenticationTemplate . Den här komponenten anropar inloggning om en användare inte redan är inloggad eller renderar underordnade komponenter på annat sätt.

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

Du kan också använda API:erna @azure/msal-browser direkt för att anropa en inloggning som är kopplad till komponenterna AuthenticatedTemplate och/eller UnauthenticatedTemplate för att återge specifikt innehåll till inloggade respektive utloggade användare. Detta är den rekommenderade metoden om du behöver anropa inloggning som ett resultat av användarinteraktion, till exempel ett knappklick.

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

Utloggningsbeteende i webbläsare

Ju fler appar en användare har loggat in på och vill logga ut från, desto större risk för problem med tanke på de begränsade sätten att implementera sådana funktioner i webbläsare. Microsofts metodtips för internetsekretess rekommenderar att användaren på en delad enhet där en användare kanske vill logga ut från en app använder en webbläsares privata/inkognitoläge och stänger alla webbläsarfönster innan de lämnar enheten.

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

För användare som inte väljer att följa den säkra metoden kan appen försöka förbereda sig för båda följande fall:

1. Användaren har initierat utloggningen direkt från appen.
2. Från en annan app som delar inloggningstillståndet med den nya appen, men hanterar sina egna sessionstoken/cookies.

I det första fallet beskriver följande avsnitt alternativ för hur du loggar ut användaren från en lokal app med hjälp av ett popup-fönster eller en omdirigering.

För det andra fallet där inloggning initieras från en annan app använder Microsoft OpenID-Anslut Front Channel-utloggning för federerad utloggning. Det finns vissa begränsningar för den här implementeringen där innehåll från tredje part blockeras, till exempel när webbläsare blockerar cookies från tredje part som standard.

Följande popup- och omdirigeringsmetoder avslutar användarens session vid slutpunkten och för den lokala appen, men kanske inte omedelbart rensar sessionen för andra federerade program, om frontkanalkommunikationen blockeras. För en garanterad federerad utloggning oavsett webbläsarens beteende rekommenderar vi bästa praxis för användare att använda antingen privat surfning eller låsskärmar.

Logga ut med ett popup-fönster

Det här läget stöds, men har samma begränsningar för inloggning med ett popup-fönster som webbläsarbegränsningar eller principer kan inaktivera 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-inloggningssidan. Efter utloggningen omdirigerar Microsoft Entra-ID popup-fönstret tillbaka till ditt program och MSAL.js stänger popup-fönstret.

Du kan konfigurera den URI som Microsoft Entra-ID ska omdirigeras till efter utloggning genom att ange postLogoutRedirectUri. 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, när utloggningen har slutförts 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);

JavaScript (MSAL.js v1)

Det går inte att logga ut med ett popup-fönster i 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)

Utloggning med ett popup-fönster stöds inte i 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>
    </>
  );
}

Logga ut med en omdirigering

MSAL.js tillhandahåller en logout metod i v1 och introducerade logoutRedirect metoden i v2 som rensar cacheminnet i webbläsarlagringen och omdirigerar fönstret till Microsoft Entra-utloggningssidan. Efter utloggningen omdirigeras som standard Microsoft Entra-ID tillbaka till sidan som anropade utloggningen.

Eftersom användaren inte kommer att se Microsofts påminnelse om bästa praxis för internetsekretess om att använda en privat webbläsare och låsskärm, kan SPA-appen också vilja beskriva metodtips och påminna användarna om att stänga alla webbläsarfönster.

Du kan konfigurera den URI som den ska omdirigeras till efter utloggning genom att ange postLogoutRedirectUri. Den här URI:n bör registreras som en omdirigerings-URI i din programregistrering.

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

Nästa steg

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