Aplikasi satu halaman: masuk dan keluar

Sebelum Anda bisa mendapatkan token untuk mengakses API di aplikasi, Anda memerlukan konteks pengguna yang diautentikasi. Untuk mengautentikasi pengguna, Anda dapat menggunakan jendela Pop-up dan/atau metode masuk Pengalihan .

Jika aplikasi Anda memiliki akses ke konteks pengguna atau token ID yang diautentikasi, Anda dapat melewati langkah masuk, dan langsung memperoleh token. Untuk detailnya, lihat Akses menyeluruh (SSO) dengan petunjuk pengguna.

Memilih antara pengalaman pop-up atau pengalihan

Pilihan antara pengalaman pop-up atau pengalihan tergantung pada alur aplikasi Anda.

• Gunakan jendela pop-up jika Anda tidak ingin pengguna menjauh dari halaman aplikasi utama Anda selama autentikasi. Karena pengalihan autentikasi terjadi di jendela pop-up, status aplikasi utama dipertahankan.

• Gunakan pengalihan jika pengguna memiliki batasan atau kebijakan browser di mana jendela pop-up dinonaktifkan. Misalnya, ada masalah yang diketahui dengan jendela pop-up di Internet Explorer.

Masuk dengan jendela pop-up

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)

Untuk memanggil pengalaman masuk untuk rute tertentu, impor @angular/router dan tambahkan MsalGuard ke definisi rute.

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

Untuk mengaktifkan pengalaman jendela pop-up, atur konfigurasi ke interactionTypeInteractionType.PopupMsalGuardConfigurationdi . Anda juga dapat meneruskan cakupan yang memerlukan persetujuan.

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

Untuk memanggil pengalaman masuk saat pengguna belum masuk, gunakan MsalAuthenticationTemplate fungsi dari @azure/msal-react. Pembungkus MSAL React melindungi komponen tertentu dengan membungkusnya dalam MsalAuthenticationTemplate komponen.

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

Untuk memanggil pengalaman masuk tertentu berdasarkan interaksi pengguna (misalnya, pilih tombol), gunakan AuthenticatedTemplate fungsi dan/atau UnauthenticatedTemplate dari @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>
    </>
  );
}

Masuk dengan pengalihan

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)

Untuk mengaktifkan pengalaman pengalihan, atur interactionType konfigurasi ke InteractionType.Redirect di MsalGuardConfiguration, lalu bootstrap MsalRedirectComponent untuk menangani pengalihan.

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

Untuk memanggil pengalaman masuk saat pengguna tidak masuk, gunakan MsalAuthenticationTemplate fungsi dari @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>
  );
}

Untuk memanggil pengalaman masuk tertentu berdasarkan interaksi pengguna (misalnya, pilih tombol), gunakan AuthenticatedTemplate fungsi dan/atau UnauthenticatedTemplate dari @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>
    </>
  );
}

Perilaku keluar di browser

Untuk memastikan keluar yang aman dari satu atau beberapa aplikasi, metode berikut disarankan:

• Pada perangkat bersama, pengguna harus menggunakan mode privat/penyamaran browser dan menutup semua jendela browser sebelum mereka menjauh dari perangkat.

• Pada perangkat yang tidak dibagikan, pengguna harus menggunakan layar kunci sistem operasi untuk mengunci atau keluar dari seluruh sesi sistem operasi mereka di perangkat. Microsoft menggunakan halaman keluarnya untuk mengingatkan pengguna tentang praktik terbaik privasi dan keamanan ini.

Untuk informasi selengkapnya, lihat Praktik terbaik privasi internet Microsoft.

Jika pengguna memilih untuk tidak keluar menggunakan rekomendasi, berikut ini adalah metode lain untuk mengaktifkan fungsionalitas keluar:

• Logout Saluran Depan OpenID Koneksi Microsoft untuk keluar federasi. Anda dapat menggunakan opsi ini saat aplikasi berbagi status masuk dengan aplikasi baru, tetapi mengelola token/cookie sesinya sendiri. Ada beberapa batasan untuk implementasi ini di mana konten diblokir, misalnya ketika browser memblokir cookie pihak ketiga.

• Jendela pop-up dan/atau Pengalihan untuk keluar aplikasi lokal. Metode pop-up dan pengalihan mengakhiri sesi pengguna di titik akhir dan untuk aplikasi lokal. Tetapi, metode ini mungkin tidak segera menghapus sesi untuk aplikasi federasi lainnya jika komunikasi saluran depan diblokir.

Keluar dengan jendela pop-up

MSAL.js v2 dan yang lebih tinggi menyediakan logoutPopup metode yang menghapus cache di penyimpanan browser dan membuka jendela pop-up ke halaman keluar Microsoft Entra. Setelah keluar, pengalihan default ke halaman mulai masuk, dan pop-up ditutup.

Untuk pengalaman setelah keluar, Anda dapat mengatur postLogoutRedirectUri untuk mengalihkan pengguna ke URI tertentu. URI ini harus didaftarkan sebagai URI redirect dalam pendaftaran aplikasi Anda. Anda juga dapat mengonfigurasi logoutPopup untuk mengalihkan jendela utama ke halaman yang berbeda, seperti halaman beranda atau halaman masuk dengan meneruskan mainWindowRedirectUri sebagai bagian dari permintaan.

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

Keluar dengan pengalihan

MSAL.js menyediakan logout metode di v1, dan logoutRedirect metode di v2 yang menghapus cache di penyimpanan browser dan mengalihkan ke halaman keluar Microsoft Entra. Setelah keluar, pengalihan default ke halaman mulai masuk.

Untuk pengalaman setelah keluar, Anda dapat mengatur postLogoutRedirectUri untuk mengalihkan pengguna ke URI tertentu. URI ini harus didaftarkan sebagai URI redirect dalam pendaftaran aplikasi Anda.

Karena pengingat Microsoft tentang praktik terbaik privasi internet tentang menggunakan browser privat dan layar kunci tidak ditampilkan dalam metode ini, Anda mungkin ingin menjelaskan praktik terbaik dan mengingatkan pengguna untuk menutup semua jendela browser.

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

Langkah berikutnya

Beralih ke artikel berikutnya dalam skenario ini, Memperoleh token untuk aplikasi.