Mengeluarkan pengguna

Sebelum memulai di sini, pastikan Anda memahami cara masuk, memperoleh token, dan mengelola masa pakai token.

Keluar

Proses keluar pada MSAL terdiri dari dua langkah.

1. Bersihkan cache MSAL.
2. Bersihkan sesi di server identitas.

Objek PublicClientApplication mengekspos dua API yang melakukan tindakan ini.

msalInstance.logoutRedirect();
msalInstance.logoutPopup();

API ini akan menghapus cache token dari data pengguna dan sesi apa pun, lalu menavigasi jendela browser atau jendela popup ke halaman keluar server. Server kemudian akan meminta pengguna untuk memilih akun yang ingin mereka keluari dan mengarahkan kembali ke postLogoutRedirectUri Anda selama syarat berikut terpenuhi:

1. URI terdaftar sebagai url balasan pada pendaftaran aplikasi
2. URI disediakan sebagai postLogoutRedirectUri baik pada konfigurasi PublicClientApplication maupun pada permintaan logout
3. Pengguna memiliki sesi aktif dengan penyedia identitas
4. (Skenario MSA) Url keluar saluran depan dikonfigurasi pada pendaftaran aplikasi

Jika salah satu kondisi di atas tidak terpenuhi halaman (atau jendela popup) akan tetap berada di halaman keluar Penyedia Identitas.

PENTING: Jika navigasi keluar ini terganggu dengan cara apa pun, cache MSAL Anda dapat dihapus tetapi sesi mungkin masih bertahan di server. Pastikan navigasi selesai sepenuhnya sebelum kembali ke aplikasi Anda.

const msalConfig = {
    auth: {
        clientId: 'your_client_id',
        authority: 'https://login.microsoftonline.con/{your_tenant_id}',
        redirectUri: 'https://contoso.com',
        postLogoutRedirectUri: 'https://contoso.com/homepage'
    }
};

Meminta objek

Opsi konfigurasi dapat disediakan untuk setiap API keluar untuk menyesuaikan perilaku:

• permintaan logoutRedirect
• permintaan logoutPopup

pengalihan setelah keluar

Menggunakan logoutRedirect akan menghapus cache lokal token pengguna lalu mengalihkan jendela ke halaman signout server. Janji yang dikembalikan oleh logoutRedirect tidak diharapkan untuk diselesaikan tetapi Anda dapat menunggunya jika Anda perlu memblokir kode lain agar tidak berjalan sebelum pengalihan dimulai.

Opsi konfigurasi dapat disediakan untuk menyesuaikan perilaku:

const currentAccount = msalInstance.getAccount({ homeAccountId });
await msalInstance.logoutRedirect({
    account: currentAccount,
    postLogoutRedirectUri: "https://contoso.com/loggedOut"
});

Melewati proses keluar dari server

Jika Anda ingin aplikasi Anda hanya melakukan logout lokal, Anda dapat menyediakan callback untuk parameter onRedirectNavigate pada permintaan dan membuat callback tersebut mengembalikan false.

msalInstance.logoutRedirect({
    onRedirectNavigate: (url) => {
        // Return false if you would like to stop navigation after local logout
        return false;
    }
});

logoutPopup

logoutPopup API akan membuka halaman signout server dalam popup, memungkinkan aplikasi Anda mempertahankan statusnya saat ini. Oleh karena itu, ada beberapa pertimbangan tambahan dibandingkan dengan logoutRedirect saat memilih menggunakan pop-up untuk logout:

• Janji yang dikembalikan oleh logoutPopup diharapkan untuk diselesaikan setelah popup ditutup
• postLogoutRedirectUri diperlukan agar MSAL dapat menutup popup saat signout selesai
• postLogoutRedirectUri akan dibuka di jendela popup, bukan bingkai utama. Jika Anda memerlukan aplikasi tingkat atas untuk dialihkan setelah keluar, Anda dapat menggunakan mainWindowRedirectUri parameter pada permintaan keluar.

Opsi konfigurasi dapat disediakan untuk menyesuaikan perilaku.

const currentAccount = msalInstance.getAccount({ homeAccountId });
await msalInstance.logoutPopup({
    account: currentAccount,
    postLogoutRedirectUri: "https://contoso.com/loggedOut",
    mainWindowRedirectUri: "https://contoso.com/homePage",
    popupWindowAttributes: {
        popupSize: {
            height: 100,
            width: 100
        },
        popupPosition: {
            top: 100,
            left: 100
        }
    }
});

Keluar tanpa perintah

Jika aplikasi klien Anda mengaktifkan klaim opsional login_hint untuk Token ID, Anda dapat memanfaatkan klaim Token login_hint ID untuk melakukan "senyap" atau keluar tanpa perintah saat menggunakan logoutRedirect atau logoutPopup. Ada dua cara untuk melakukan logout tanpa prompt:

Opsi 1: Biarkan MSAL secara otomatis mengurai login_hint dari klaim token ID akun

Opsi pertama dan paling sederhana adalah menyediakan objek akun yang ingin Anda akhiri sesinya ke API keluar. MSAL akan memeriksa apakah klaim login_hint tersedia dalam token ID akun dan secara otomatis menambahkannya ke permintaan end session sebagai logout_hint untuk melewati prompt pemilih akun.

const currentAccount = msalInstance.getAccount({ homeAccountId });
// The account's ID Token must contain the login_hint optional claim to avoid the account picker
await msalInstance.logoutRedirect({ account: currentAccount});

Opsi 2: Atur opsi logoutHint secara manual dalam permintaan keluar

Atau, jika Anda lebih suka mengatur logoutHint, Anda dapat mengekstrak login_hint klaim secara manual di aplikasi Anda dan mengaturnya sebagai logoutHint dalam permintaan keluar:

const currentAccount = msalInstance.getAccount({ homeAccountId });

// Extract login hint to use as logout hint
const logoutHint = currentAccount.idTokenClaims.login_hint;
await msalInstance.logoutPopup({ logoutHint: logoutHint });

Catatan: Bergantung pada API yang Anda pilih (pengalihan/popup), aplikasi akan tetap mengalihkan atau membuka popup untuk mengakhiri sesi server. Perbedaannya adalah bahwa pengguna tidak akan melihat atau harus berinteraksi dengan permintaan pemilih akun server.

Keluar saluran depan

Microsoft Entra ID dan Azure AD B2C mendukung fitur logout front-channel OAuth, yang memungkinkan logout tunggal di semua aplikasi saat pengguna memulai proses logout. Untuk memanfaatkan fitur ini dengan MSAL.js, lakukan langkah-langkah berikut:

1. Di aplikasi Anda, buat halaman keluar khusus. Halaman ini tidak boleh melakukan fungsi lain, seperti memperoleh token pada pemuatan halaman (lihat di bawah ini untuk detailnya). Perlu diketahui, halaman ini akan dimuat dalam iframe tersembunyi, dan untuk pengguna Microsoft Entra ID dan MSA, akan menyertakan parameter kueri iss dan sid.
2. Di dalam pusat admin Microsoft Entra, navigasikan ke halaman Autentikasi untuk aplikasi Anda, dan daftarkan halaman dari langkah pertama di bawah URL keluar saluran depan. Catatan, halaman ini harus dimuat melalui https.

Persyaratan untuk halaman keluar saluran depan

Halaman untuk logout front-channel harus dibuat sebagai berikut:

1. Pada pemuatan halaman, secara otomatis memanggil API MSAL logoutRedirect .
2. Dalam konfigurasi PublicClientApplication, atur system.allowRedirectInIframe ke true.
3. Saat memanggil logout, sebaiknya cegah pengalihan di iframe ke halaman keluar (lihat di atas).

Contoh:

const msal = new PublicClientApplication({
    auth: {
        clientId: "my-client-id"
    },
    system: {
        allowRedirectInIframe: true
    }
})

// Automatically on page load
msal.logoutRedirect({
    onRedirectNavigate: () => {
        // Return false to stop navigation after local logout
        return false;
    }
});

Sekarang, ketika pengguna keluar dari aplikasi lain, URL logout front-channel aplikasi Anda akan dimuat dalam iframe tersembunyi, dan MSAL.js akan membersihkan cache-nya untuk menyelesaikan proses single sign-out.

Contoh log keluar kanal depan

Contoh berikut menunjukkan cara menerapkan logout front-channel menggunakan MSAL.js:

• MSAL Angular v2: Sampel Angular 11
• MSAL React: Sampel React Router

Acara

Jika bagian-bagian berbeda dari aplikasi Anda perlu merespons status logout tanpa akses langsung ke promise yang dikembalikan oleh logoutRedirect atau logoutPopup, Anda dapat menggunakan API event.

Kejadian akan dipicu saat logout berhasil atau gagal dan saat pop-up dibuka ketika menggunakan logoutPopup.

Catatan Penting

• Jika tidak ada akun yang diteruskan ke API keluar, atau tidak ada objek EndSessionRequest, akun tersebut akan keluar dari semua akun.
• Jika akun diteruskan ke API keluar, MSAL hanya akan menghapus token yang terkait dengan akun tersebut.
• Proses keluar dari server adalah fitur untuk kemudahan dan, karena itu, dilakukan semaksimal mungkin. API Keluar akan berhasil diselesaikan selama cache aplikasi lokal berhasil dihapus, terlepas dari apakah proses keluar server berhasil atau tidak.

Langkah Selanjutnya

Gali topik yang lebih canggih, seperti:

• Caching
• Opsi Konfigurasi Tingkat Lanjut