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 Providers di Google Cloud console.

    Buka halaman Penyedia Identitas

  2. Klik Tambahkan Penyedia.

  3. Pilih Microsoft dari daftar.

  4. Masukkan ID Aplikasi dan Secret Aplikasi Microsoft Anda. Jika Anda belum memiliki ID dan secret, ikuti langkah-langkah di Panduan memulai: Mendaftarkan 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 Mengonfigurasi Microsoft sebagai URI pengalihan OAuth yang valid untuk aplikasi Microsoft Anda. Jika Anda mengonfigurasi domain kustom di Identity Platform, perbarui URI pengalihan di konfigurasi aplikasi Microsoft Anda untuk 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 ke dalam kode aplikasi Anda untuk melakukan inisialisasi SDK klien Identity Platform.

  8. Klik Simpan.

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. Cakupan menentukan data yang Anda minta dari Microsoft. Data yang lebih sensitif mungkin memerlukan cakupan tertentu. Lihat 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. 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 ke pengguna di luar domain Azure AD tertentu. Tentukan nama domain sederhana tenant, atau ID GUID-nya. Pengguna yang tidak berada 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'
});

    Lihat dokumentasi OAuth Microsoft untuk mengetahui daftar lengkap parameter yang didukung Microsoft. Perhatikan 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 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.

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 terletak di user.providerData[0].uid. Jika pengguna Anda login dengan tenant Azure AD, kolom ini akan cocok persis. Jika tidak, kolom akan diisi dengan angka nol (misalnya, ID federasi 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 Identity Platform lainnya, seperti Google, Facebook, dan Twitter, memungkinkan Anda memproses login pengguna secara manual dengan memanggil signInWithCredential().

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

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

Langkah berikutnya