Egyoldalas alkalmazás: bejelentkezés és kijelentkezés

Ahhoz, hogy jogkivonatokat szerezzen be az api-k eléréséhez az alkalmazásban, hitelesített felhasználói környezetre van szüksége. A felhasználók hitelesítéséhez használhat előugró ablakot és/vagy átirányítási bejelentkezési módszert.

Ha az alkalmazás rendelkezik hozzáféréssel egy hitelesített felhasználói környezethez vagy azonosító jogkivonathoz, kihagyhatja a bejelentkezési lépést, és közvetlenül szerezhet be jogkivonatokat. További részletekért lásd : Egyszeri bejelentkezés (SSO) felhasználói tippekkel.

Választás előugró vagy átirányítási felület között

Az előugró vagy az átirányítási felület közötti választás az alkalmazás folyamatától függ.

• Használjon előugró ablakot, ha nem szeretné, hogy a felhasználók a hitelesítés során elmozduljanak a fő alkalmazáslapról. Mivel a hitelesítési átirányítás egy előugró ablakban történik, a fő alkalmazás állapota megmarad.

• Akkor használjon átirányítást, ha a felhasználók böngészőkorlátokkal vagy szabályzatokkal rendelkeznek, amelyekben az előugró ablakok le vannak tiltva. Az Internet Explorer előugró ablakaival kapcsolatban például ismert problémák merülnek fel.

Bejelentkezés előugró ablakkal

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)

Ha egy adott útvonal bejelentkezési élményét szeretné meghívni, importálja @angular/router és adja hozzá MsalGuard az útvonaldefinícióhoz.

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

Az előugró ablak felületének engedélyezéséhez állítsa be a interactionType konfigurációt InteractionType.Popup a következőre: .MsalGuardConfiguration> A hozzájárulást igénylő hatóköröket is átadhatja.

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

Reagálás

Ha meg szeretné hívni a bejelentkezési élményt, ha egy felhasználó még nincs bejelentkezve, használja a MsalAuthenticationTemplate következő függvényt @azure/msal-react: . Az MSAL React burkoló az összetevőbe való burkolással védi az MsalAuthenticationTemplate egyes összetevőket.

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

Ha felhasználói beavatkozáson (például gombválasztáson) alapuló bejelentkezési élményt szeretne meghívni, használja az and/vagy UnauthenticatedTemplate függvényt a AuthenticatedTemplate következőből@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>
    </>
  );
}

Bejelentkezés átirányítással

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)

Az átirányítási élmény engedélyezéséhez állítsa be a interactionType konfigurációt InteractionType.Redirect a MsalGuardConfiguration, majd a bootstrap MsalRedirectComponent értékre az átirányítások kezeléséhez.

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

Reagálás

Ha meg szeretné hívni a bejelentkezési élményt, ha egy felhasználó nincs bejelentkezve, használja a következő függvényt@azure/msal-react: .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.Redirect}>
      <p>This will only render if a user is not signed-in.</p>
      <WelcomeUser />
    </MsalAuthenticationTemplate>
  );
}

Ha felhasználói beavatkozáson (például gombválasztáson) alapuló bejelentkezési élményt szeretne meghívni, használja az and/vagy UnauthenticatedTemplate függvényt a AuthenticatedTemplate következőből@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>
    </>
  );
}

Kijelentkezési viselkedés böngészőkben

Egy vagy több alkalmazás biztonságos kijelentkezésének biztosítása érdekében a következő módszereket javasoljuk:

• Megosztott eszközökön a felhasználóknak a böngésző privát/inkognitó üzemmódját kell használniuk, és be kell zárniuk az összes böngészőablakot, mielőtt kilépnének az eszközről.

• A nem megosztott eszközökön a felhasználóknak egy operációsrendszer-zárolási képernyőt kell használniuk a teljes operációsrendszer-munkamenet zárolásához vagy kijelentkezéséhez az eszközön. A Microsoft a bejelentkezési oldalával emlékezteti a felhasználókat ezekre az adatvédelmi és biztonsági ajánlott eljárásokra.

További információkért tekintse meg a Microsoft internetes adatvédelmi ajánlott eljárásait.

Ha egy felhasználó úgy dönt, hogy nem jelentkezik ki a javaslatok használatával, a következő módszerek teszik lehetővé a kijelentkezési funkciót:

• A Microsoft OpenID Csatlakozás front channel logout for összevont kijelentkezés. Ezt a lehetőséget akkor használhatja, ha egy alkalmazás új alkalmazással oszt meg bejelentkezési állapotot, de saját munkamenet-jogkivonatokat/cookie-kat kezel. Bizonyos korlátozások vonatkoznak erre a megvalósításra, ahol a tartalom le van tiltva, például ha a böngészők letiltják a külső cookie-kat.

• Előugró ablak és/vagy helyi alkalmazás átirányítása kijelentkezik. Az előugró és átirányítási metódusok befejezik a felhasználó munkamenetét a végponton és a helyi alkalmazásban. Előfordulhat azonban, hogy ezek a metódusok nem törlik azonnal a munkamenetet más összevont alkalmazások esetében, ha az előtérbeli kommunikáció le van tiltva.

Kijelentkezés előugró ablakkal

MSAL.js v2 és újabb verziók olyan logoutPopup módszert biztosítanak, amely törli a gyorsítótárat a böngésző tárterületében, és megnyit egy előugró ablakot a Microsoft Entra kijelentkezési oldalára. A kijelentkezés után az átirányítás alapértelmezés szerint a bejelentkezési kezdőlapra kerül, és az előugró ablak bezárul.

A kijelentkezés utáni felület beállításával átirányíthatja a postLogoutRedirectUri felhasználót egy adott URI-ba. Ezt az URI-t átirányítási URI-ként kell regisztrálni az alkalmazásregisztrációban. Úgy is konfigurálhatja logoutPopup , hogy a főablakot egy másik lapra, például a kezdőlapra irányítsa át, vagy a kérés részeként adja át mainWindowRedirectUri a bejelentkezési lapot.

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

Reagálás

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

Kijelentkezés átirányítással

MSAL.js egy metódust logout biztosít az 1- és a logoutRedirect 2-ben, amely törli a gyorsítótárat a böngészőtárolóban, és átirányítja a Microsoft Entra kijelentkezési oldalára. A kijelentkezés után az átirányítás alapértelmezés szerint a bejelentkezési kezdőlapra kerül.

A kijelentkezés utáni felület beállításával átirányíthatja a postLogoutRedirectUri felhasználót egy adott URI-ba. Ezt az URI-t átirányítási URI-ként kell regisztrálni az alkalmazásregisztrációban.

Mivel ebben a módszerben nem jelenik meg a Microsoftnak a privát böngésző és a zárolási képernyő használatára vonatkozó ajánlott internetes adatvédelmi eljárásokra vonatkozó emlékeztetője, érdemes lehet leírni az ajánlott eljárásokat, és emlékeztetni a felhasználókat az összes böngészőablak bezárására.

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

Reagálás

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

Következő lépések

Lépjen tovább a következő cikkre ebben a forgatókönyvben, és szerezzen be egy jogkivonatot az alkalmazáshoz.