Memproses login pengguna dengan Microsoft

Dokumen ini menunjukkan cara menggunakan Identity Platform untuk memproses login pengguna dengan Microsoft. Akun Microsoft pribadi dan akun Azure Active Directory (Azure AD) didukung.

Sebelum memulai

Tutorial ini mengasumsikan bahwa Anda telah mengaktifkan Identity Platform, dan memiliki aplikasi web dasar yang ditulis menggunakan HTML dan JavaScript. Lihat Panduan Memulai untuk mempelajari caranya.

Mengonfigurasi Microsoft sebagai penyedia

Untuk mengonfigurasi Microsoft sebagai penyedia identitas:

  1. Buka halaman Identity Provider di Konsol Google Cloud.

    Buka halaman Penyedia Identitas

  2. Klik Tambahkan Penyedia.

  3. Pilih Microsoft dari daftar.

  4. Masukkan App ID dan App Secret Microsoft Anda. Jika Anda belum memiliki ID dan rahasia, ikuti langkah-langkah di Panduan Memulai: Daftarkan aplikasi dengan endpoint Azure AD v2.0 untuk mendapatkannya.

    Endpoint ini mendukung akun Microsoft pribadi dan akun Azure AD. Lihat ringkasan platform identitas Microsoft (v2.0) untuk mempelajari Azure AD lebih lanjut.

  5. Konfigurasikan URI yang tercantum di bagian Configure Microsoft sebagai URI pengalihan OAuth yang valid untuk aplikasi Microsoft. Jika Anda mengonfigurasi domain kustom di Identity Platform, perbarui URI pengalihan di konfigurasi aplikasi Microsoft agar menggunakan domain kustom, bukan domain default. Misalnya, ubah https://myproject.firebaseapp.com/__/auth/handler menjadi https://auth.myownpersonaldomain.com/__/auth/handler.

  6. Daftarkan domain aplikasi Anda dengan mengklik Add Domain di bagian Authorized Domains. Untuk tujuan pengembangan, localhost sudah diaktifkan secara default.

  7. Di bagian bawah Konfigurasi aplikasi Anda, klik Detail Penyiapan. Salin cuplikan tersebut ke kode aplikasi Anda untuk menginisialisasi Client SDK Identity Platform.

  8. Klik Save.

Memproses login pengguna dengan SDK Klien

  1. Buat instance objek OAuthProvider, dengan meneruskan microsoft.com sebagai ID penyedia:

    JavaScript 

    var provider = new firebase.auth.OAuthProvider('microsoft.com');
    microsoft-oauth.js

  2. Opsional: Tambahkan cakupan OAuth. Ruang lingkup menentukan data apa yang Anda minta dari Microsoft. Data yang lebih sensitif mungkin memerlukan cakupan tertentu. Baca dokumentasi Microsoft untuk menentukan cakupan yang diperlukan aplikasi Anda.

    JavaScript 

    provider.addScope('mail.read');
provider.addScope('calendars.read');

  3. Opsional: Tentukan parameter OAuth kustom tambahan. Kunci ini khusus untuk Microsoft, dan biasanya digunakan untuk menyesuaikan pengalaman autentikasi.

    JavaScript 

    provider.setCustomParameters({
  // Force re-consent.
  prompt: 'consent',
  // Target specific email with login hint.
  login_hint: 'user@firstadd.onmicrosoft.com'
});

    Anda dapat menggunakan parameter mkt untuk menyesuaikan bahasa alur autentikasi. Contoh:

    provider.setCustomParameters({
  mkt: 'fr'
});

    Anda dapat menggunakan properti tenant untuk membatasi akses bagi pengguna di luar domain Azure AD tertentu. Tentukan nama domain tenant yang cocok, atau ID GUID-nya. Pengguna yang tidak berada di dalam domain ini tidak akan dapat login. Contoh:

    provider.setCustomParameters({
  // Optional "tenant" parameter in case you are using an Azure AD tenant.
  // eg. '8eaef023-2b34-4da1-9baa-8bc8c9d6a490' or 'contoso.onmicrosoft.com'
  // or "common" for tenant-independent tokens.
  // The default value is "common".
  tenant: 'TENANT_ID'
});

    Baca dokumentasi OAuth Microsoft untuk mengetahui daftar lengkap parameter yang didukung Microsoft. Perlu diperhatikan bahwa Anda tidak dapat meneruskan parameter yang dicadangkan oleh OAuth atau Identity Platform.

  4. Gunakan objek OAuthProvider untuk memproses login pengguna. Anda dapat membuka jendela pop-up, atau mengalihkan halaman saat ini. Pengalihan lebih mudah bagi pengguna di perangkat seluler.

    Untuk menampilkan pop-up, panggil signInWithPopup():

    JavaScript 

    firebase.auth().signInWithPopup(provider)
  .then((result) => {
    // IdP data available in result.additionalUserInfo.profile.
    // ...

    /** @type {firebase.auth.OAuthCredential} */
    var credential = result.credential;

    // OAuth access and id tokens can also be retrieved:
    var accessToken = credential.accessToken;
    var idToken = credential.idToken;
  })
  .catch((error) => {
    // Handle error.
  });
    microsoft-oauth.js

    Untuk mengalihkan halaman, panggil signInWithRedirect() terlebih dahulu:

    Ikuti praktik terbaik saat menggunakan signInWithRedirect, linkWithRedirect, atau reauthenticateWithRedirect.

    JavaScript 

    firebase.auth().signInWithRedirect(provider);
    microsoft-oauth.js

    Kemudian, ambil token Microsoft dengan memanggil getRedirectResult() saat halaman Anda dimuat:

    JavaScript 

    firebase.auth().getRedirectResult()
  .then((result) => {
    // IdP data available in result.additionalUserInfo.profile.
    // ...

    /** @type {firebase.auth.OAuthCredential} */
    var credential = result.credential;

    // OAuth access and id tokens can also be retrieved:
    var accessToken = credential.accessToken;
    var idToken = credential.idToken;
  })
  .catch((error) => {
    // Handle error.
  });
    microsoft-oauth.js

Setelah memiliki token akses, Anda dapat menggunakannya untuk memanggil Microsoft Graph API Misalnya:

REST 

curl -i -H "Authorization: Bearer [ACCESS_TOKEN]" https://graph.microsoft.com/v1.0/me

Tidak seperti penyedia lain yang didukung oleh Identity Platform, Microsoft tidak menyediakan URL foto untuk pengguna. Sebagai gantinya, Anda harus menggunakan Graph API untuk meminta data biner untuk foto tersebut.

Selain token akses, Anda juga dapat mengambil token ID Microsoft pengguna. Klaim oid pada token ini berisi ID unik untuk pengguna. Anda dapat membandingkannya dengan ID yang berada di user.providerData[0].uid. Jika pengguna Anda login dengan tenant Azure AD, kolom ini akan sama persis. Jika tidak, kolom akan diisi dengan angka nol (misalnya, ID gabungan 4b2eabcdefghijkl akan muncul sebagai 00000000-0000-0000-4b2e-abcdefghijkl).

Jangan gunakan klaim sub untuk membandingkan ID pengguna. Klaim sub bersifat khusus aplikasi, dan tidak akan cocok dengan ID yang digunakan oleh Microsoft.

Memproses login pengguna secara manual

Beberapa penyedia Platform Identitas lainnya, seperti Google, Facebook, dan Twitter, memungkinkan Anda membuat pengguna login secara manual dengan memanggil signInWithCredential().

Kemampuan ini tidak didukung pada Microsoft. Identity Platform tidak dapat memverifikasi audiens token akses OAuth Microsoft, yang merupakan persyaratan keamanan penting.

Jika tidak dapat menggunakan Identity Platform Client SDK untuk memproses login pengguna, Anda harus menggunakan library OAuth pihak ketiga untuk melakukan autentikasi dengan Microsoft. Anda kemudian dapat menggunakan Autentikasi kustom untuk menukar kredensial Microsoft dengan token kustom.

Langkah selanjutnya