Tek sayfalı uygulama oturum açma ve oturumu kapatma - Microsoft identity platform

Makale
05/09/2024

Uygulamanızdaki API'lere erişmek için belirteçleri alabilmeniz için önce kimliği doğrulanmış bir kullanıcı bağlamı gerekir. Kullanıcının kimliğini doğrulamak için Açılır pencere ve/veya Yeniden yönlendirme oturum açma yöntemi kullanabilirsiniz.

Uygulamanızın kimliği doğrulanmış bir kullanıcı bağlamı veya kimlik belirtecine erişimi varsa oturum açma adımını atlayabilir ve belirteçleri doğrudan alabilirsiniz. Ayrıntılar için bkz . Kullanıcı ipucuyla çoklu oturum açma (SSO).

Açılır pencere veya yeniden yönlendirme deneyimi arasında seçim

Açılır pencere veya yeniden yönlendirme deneyimi arasındaki seçim, uygulama akışınıza bağlıdır.

Kullanıcıların kimlik doğrulaması sırasında ana uygulama sayfanızdan uzaklaşmasını istemiyorsanız bir açılır pencere kullanın. Kimlik doğrulama yeniden yönlendirmesi bir açılır pencerede gerçekleştiğinden, ana uygulamanın durumu korunur.
Kullanıcıların açılır pencerelerin devre dışı bırakıldığı tarayıcı kısıtlamaları veya ilkeleri varsa yeniden yönlendirme kullanın. Örneğin, Internet Explorer'da açılır pencerelerle ilgili bilinen sorunlar vardır.

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

Belirli bir yol için oturum açma deneyimini çağırmak için içeri aktarın @angular/router ve yol tanımına ekleyin MsalGuard .

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

Bir açılır pencere deneyimini etkinleştirmek için, içinde yapılandırmasını olarak InteractionType.PopupMsalGuardConfigurationayarlayıninteractionType. Onay gerektiren kapsamları da geçirebilirsiniz.

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

Kullanıcı henüz oturum açmamışken oturum açma deneyimini çağırmak için işlevinden @azure/msal-reactkullanınMsalAuthenticationTemplate. MSAL React sarmalayıcı, belirli bileşenleri bileşene MsalAuthenticationTemplate sarmalayarak korur.

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

Kullanıcı etkileşimi temelinde belirli bir oturum açma deneyimini çağırmak için (örneğin, düğme seçimi), ve@azure/msal-react/veya UnauthenticatedTemplate işlevini kullanınAuthenticatedTemplate.

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

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

Yeniden yönlendirme deneyimini etkinleştirmek için, içinde yapılandırmasını InteractionType.RedirectMsalGuardConfigurationolarak ayarlayın interactionType ve ardından yeniden yönlendirmeleri işlemek için bootstrap MsalRedirectComponent yapın.

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

Kullanıcı oturum açmadığında oturum açma deneyimini çağırmak için işlevinden @azure/msal-reactkullanınMsalAuthenticationTemplate.

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

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

Tarayıcılarda oturumu kapatma davranışı

Bir veya daha fazla uygulamada güvenli oturum kapatma sağlamak için aşağıdaki yöntemler önerilir:

Paylaşılan cihazlarda, kullanıcılar cihazdan uzaklaşmadan önce tarayıcının özel/gizli modunu kullanmalı ve tüm tarayıcı pencerelerini kapatmalıdır.
Paylaşılmayan cihazlarda kullanıcılar, cihazdaki tüm işletim sistemi oturumlarını kilitlemek veya oturumu kapatmak için bir işletim sistemi kilit ekranı kullanmalıdır. Microsoft, kullanıcılara bu en iyi gizlilik ve güvenlik uygulamalarını anımsatmak için oturum kapatma sayfasını kullanır.

Daha fazla bilgi için bkz. Microsoft'un internet gizliliği en iyi yöntemleri.

Bir kullanıcı önerileri kullanarak oturumu kapatmamayı seçerse, oturumu kapatma işlevini etkinleştirmek için aşağıdaki diğer yöntemler şunlardır:

Federasyon oturumu kapatmak için Microsoft'un OpenID Bağlan Ön Kanal Oturumu Kapatma. Bir uygulama yeni bir uygulamayla oturum açma durumunu paylaştığında ancak kendi oturum belirteçlerini/tanımlama bilgilerini yönettiğinde bu seçeneği kullanabilirsiniz. Bu uygulamada, örneğin tarayıcılar üçüncü taraf tanımlama bilgilerini engellediğinde içeriğin engellendiği bazı sınırlamalar vardır.
Açılır pencere ve/veya Yerel uygulama için yeniden yönlendirme oturumu kapatın. Açılır pencere ve yeniden yönlendirme yöntemleri, uç noktada ve yerel uygulama için kullanıcının oturumunu sonlar. Ancak, ön kanal iletişimi engellenirse bu yöntemler diğer federasyon uygulamaları için oturumu hemen temizlemeyebilir.

Açılır pencereyle oturumu kapatma

v2 ve üzeri MSAL.js, tarayıcı depolama alanında önbelleği temizleyen ve Microsoft Entra oturumu kapatma sayfasına açılan bir pencere açan bir yöntem sağlar logoutPopup . Oturumu kapattıktan sonra yeniden yönlendirme varsayılan olarak oturum açma başlangıç sayfasına yönlendirilir ve açılır pencere kapatılır.

Oturumu kapatıldıktan sonra deneyimi için, kullanıcı belirli bir URI'ye yeniden yönlendirilecek şekilde ayarlayabilirsiniz postLogoutRedirectUri . Bu URI, uygulama kaydınızda yeniden yönlendirme URI'si olarak kaydedilmelidir. Ana pencereyi, isteğin bir parçası olarak geçirerek mainWindowRedirectUri giriş sayfası veya oturum açma sayfası gibi farklı bir sayfaya yeniden yönlendirmek için de yapılandırabilirsinizlogoutPopup.

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

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

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

Yeniden yönlendirme ile oturumu kapatma

MSAL.js, v1'de bir logout yöntem ve v2'de tarayıcı depolamasında önbelleği temizleyen ve Microsoft Entra oturumu kapatma sayfasına yönlendiren bir logoutRedirect yöntem sağlar. Oturumu kapatıldıktan sonra yeniden yönlendirme varsayılan olarak oturum açma başlangıç sayfasına yönlendirilir.

Microsoft'un özel tarayıcı ve kilit ekranı kullanımıyla ilgili en iyi İnternet gizliliği uygulamalarını hatırlatması bu yöntemde gösterilmediğinden, en iyi yöntemleri açıklamak ve kullanıcılara tüm tarayıcı pencerelerini kapatmalarını anımsatmak isteyebilirsiniz.

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

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

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

Sonraki adımlar

Bu senaryoda uygulama için belirteç alma başlıklı sonraki makaleye geçin.

Share via

Açılır pencere veya yeniden yönlendirme deneyimi arasında seçim

Tarayıcılarda oturumu kapatma davranışı

Açılır pencereyle oturumu kapatma

Yeniden yönlendirme ile oturumu kapatma

Sonraki adımlar

Ek kaynaklar

Share via

Tek sayfalı uygulama: oturum açma ve oturumu kapatma

Açılır pencere veya yeniden yönlendirme deneyimi arasında seçim

Açılır pencereyle oturum açma

Yeniden yönlendirme ile oturum açma

Tarayıcılarda oturumu kapatma davranışı

Açılır pencereyle oturumu kapatma

Yeniden yönlendirme ile oturumu kapatma

Sonraki adımlar

Ek kaynaklar