Melakukan Autentikasi Menggunakan Microsoft dengan JavaScript

Anda dapat mengizinkan pengguna untuk melakukan autentikasi dengan Firebase menggunakan penyedia OAuth seperti Microsoft Azure Active Directory, dengan mengintegrasikan Login OAuth umum ke aplikasi Anda menggunakan Firebase SDK untuk menjalankan alur login secara menyeluruh.

Sebelum memulai

Untuk memproses login pengguna menggunakan akun Microsoft (akun Azure Active Directory dan akun Microsoft pribadi), Anda harus terlebih dahulu mengaktifkan Microsoft sebagai penyedia login untuk project Firebase:

Tambahkan Firebase ke project JavaScript.
Di Firebase console, buka bagian Auth.
Pada tab Sign-in method, aktifkan penyedia Microsoft.
Tambahkan Client ID dan Client Secret dari konsol developer penyedia tersebut ke konfigurasi penyedia:
1. Untuk mendaftarkan klien OAuth Microsoft, ikuti petunjuk di Quickstart: Register an app with the Azure Active Directory v2.0 endpoint. Perlu diperhatikan bahwa endpoint ini mendukung login menggunakan akun pribadi Microsoft dan akun Azure Active Directory. Pelajari lebih lanjut Azure Active Directory v2.0.
2. Saat mendaftarkan aplikasi ke penyedia ini, pastikan untuk mendaftarkan domain *.firebaseapp.com untuk project Anda sebagai domain pengalihan untuk aplikasi Anda.
Klik Save.

Menangani alur login dengan Firebase SDK

Jika Anda membangun aplikasi web, cara termudah untuk mengautentikasi pengguna dengan Firebase menggunakan akun Microsoft mereka adalah dengan menangani seluruh alur login dengan Firebase JavaScript SDK.

Untuk menangani alur login dengan Firebase JavaScript SDK, ikuti langkah-langkah berikut:

Buat instance OAuthProvider menggunakan ID penyedia microsoft.com.

API modular web

import { OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider('microsoft.com');auth_msft_create_provider.js

API dengan namespace web

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

Opsional: Tentukan parameter OAuth kustom tambahan yang ingin dikirim dengan permintaan OAuth.

API modular web

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

API dengan namespace web

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

Untuk parameter yang didukung Microsoft, baca dokumentasi OAuth Microsoft. Perlu diperhatikan bahwa Anda tidak dapat meneruskan parameter yang diperlukan Firebase dengan setCustomParameters(). Beberapa parameter tersebut antara lain client_id, response_type, redirect_uri, state, scope, dan response_mode.

Untuk mengizinkan hanya pengguna dari tenant Azure AD tertentu login ke aplikasi, nama domain sederhana tenant Azure AD atau ID GUID tenant dapat digunakan. Hal ini dapat dilakukan dengan menentukan kolom "tenant" di objek parameter kustom.

API modular web

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'
});auth_msft_provider_params_tenant.js

API dengan namespace web

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'
});microsoft-oauth.js

Opsional: Tentukan cakupan OAuth 2.0 tambahan di luar profil dasar yang ingin diminta dari penyedia autentikasi.
```
provider.addScope('mail.read');
provider.addScope('calendars.read');
```
Untuk mempelajari lebih lanjut, baca dokumentasi izin dan persetujuan Microsoft.

Lakukan autentikasi dengan Firebase menggunakan objek penyedia OAuth. Anda dapat meminta pengguna untuk login dengan Akun Microsoft, baik dengan menampilkan jendela pop-up maupun dengan mengalihkannya ke halaman login. Untuk perangkat seluler, sebaiknya gunakan metode pengalihan.

Untuk login dengan jendela pop-up, panggil signInWithPopup:

API modular web

import { getAuth, signInWithPopup, OAuthProvider } from "firebase/auth";

const auth = getAuth();
signInWithPopup(auth, provider)
  .then((result) => {
    // User is signed in.
    // IdP data available in result.additionalUserInfo.profile.

    // Get the OAuth access token and ID Token
    const credential = OAuthProvider.credentialFromResult(result);
    const accessToken = credential.accessToken;
    const idToken = credential.idToken;
  })
  .catch((error) => {
    // Handle error.
  });auth_msft_signin_popup.js

API dengan namespace web

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 login dengan beralih ke halaman login, panggil signInWithRedirect:

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

API modular web

import { getAuth, signInWithRedirect } from "firebase/auth";

const auth = getAuth();
signInWithRedirect(auth, provider);auth_msft_signin_redirect.js

API dengan namespace web

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

Setelah pengguna menyelesaikan proses login dan kembali ke halaman, Anda dapat mengambil hasil login dengan memanggil getRedirectResult.

API modular web

import { getAuth, getRedirectResult, OAuthProvider } from "firebase/auth";

const auth = getAuth();
getRedirectResult(auth)
  .then((result) => {
    // User is signed in.
    // IdP data available in result.additionalUserInfo.profile.

    // Get the OAuth access token and ID Token
    const credential = OAuthProvider.credentialFromResult(result);
    const accessToken = credential.accessToken;
    const idToken = credential.idToken;
  })
  .catch((error) => {
    // Handle error.
  });auth_msft_signin_redirect_result.js

API dengan namespace web

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 berhasil, token akses OAuth yang dikaitkan dengan penyedia dapat diambil dari firebase.auth.UserCredential objek yang ditampilkan.

Dengan token akses OAuth, Anda dapat memanggil Microsoft Graph API.

Misalnya, untuk mendapatkan informasi profil dasar, REST API berikut dapat dipanggil:

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

Tidak seperti penyedia lain yang didukung oleh Firebase Auth, Microsoft tidak menyediakan URL foto. Sebagai gantinya, data biner untuk foto profil harus diminta melalui Microsoft Graph API.

Selain token akses OAuth, token ID OAuth pengguna juga dapat diambil dari objek firebase.auth.UserCredential. Klaim sub dalam token ID adalah khusus aplikasi dan tidak akan cocok dengan ID pengguna gabungan yang digunakan oleh Firebase Auth dan dapat diakses melalui user.providerData[0].uid. Sebagai gantinya, kolom klaim oid harus digunakan. Saat menggunakan tenant Azure AD untuk login, klaim oid akan berupa pencocokan persis. Namun, untuk kasus non-tenant, kolom oid akan diberi padding. Untuk ID gabungan 4b2eabcdefghijkl, oid akan memiliki format 00000000-0000-0000-4b2e-abcdefghijkl.

Meskipun contoh di atas berfokus pada alur login, Anda juga dapat menautkan penyedia Microsoft ke pengguna yang ada menggunakan linkWithPopup/linkWithRedirect. Misalnya, Anda dapat menautkan beberapa penyedia ke pengguna yang sama agar dapat login dengan salah satu penyedia tersebut.

API modular web

import { getAuth, linkWithPopup, OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider('microsoft.com');
const auth = getAuth();

linkWithPopup(auth.currentUser, provider)
    .then((result) => {
      // Microsoft credential is linked to the current user.
      // IdP data available in result.additionalUserInfo.profile.

      // Get the OAuth access token and ID Token
      const credential = OAuthProvider.credentialFromResult(result);
      const accessToken = credential.accessToken;
      const idToken = credential.idToken;
    })
    .catch((error) => {
      // Handle error.
    });auth_msft_link_popup.js

API dengan namespace web

var provider = new firebase.auth.OAuthProvider('microsoft.com');
firebase.auth().currentUser.linkWithPopup(provider)
    .then((result) => {
      // Microsoft credential is linked to the current user.
      // IdP data available in result.additionalUserInfo.profile.
      // OAuth access token can also be retrieved:
      // result.credential.accessToken
      // OAuth ID token can also be retrieved:
      // result.credential.idToken
    })
    .catch((error) => {
      // Handle error.
    });microsoft-oauth.js

Pola yang sama dapat digunakan dengan reauthenticateWithPopup/reauthenticateWithRedirect, yang dapat digunakan untuk mengambil kredensial baru untuk operasi sensitif yang memerlukan login terbaru.

API modular web

import { getAuth, reauthenticateWithPopup, OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider('microsoft.com');
const auth = getAuth();
reauthenticateWithPopup(auth.currentUser, provider)
    .then((result) => {
      // User is re-authenticated with fresh tokens minted and
      // should be able to perform sensitive operations like account
      // deletion and email or password update.
      // IdP data available in result.additionalUserInfo.profile.

      // Get the OAuth access token and ID Token
      const credential = OAuthProvider.credentialFromResult(result);
      const accessToken = credential.accessToken;
      const idToken = credential.idToken;
    })
    .catch((error) => {
      // Handle error.
    });auth_msft_reauth_popup.js

API dengan namespace web

var provider = new firebase.auth.OAuthProvider('microsoft.com');
firebase.auth().currentUser.reauthenticateWithPopup(provider)
    .then((result) => {
      // User is re-authenticated with fresh tokens minted and
      // should be able to perform sensitive operations like account
      // deletion and email or password update.
      // IdP data available in result.additionalUserInfo.profile.
      // OAuth access token can also be retrieved:
      // result.credential.accessToken
      // OAuth ID token can also be retrieved:
      // result.credential.idToken
    })
    .catch((error) => {
      // Handle error.
    });microsoft-oauth.js

Menangani Error account-exists-with-different-credential

Jika Anda mengaktifkan setelan One account per email address di Firebase console, saat pengguna mencoba login ke penyedia (seperti Microsoft) dengan email yang sudah ada untuk penyedia pengguna Firebase lain (seperti Google), error auth/account-exists-with-different-credential akan ditampilkan beserta objek AuthCredential (kredensial Microsoft). Untuk menyelesaikan proses login ke penyedia yang dimaksud, pengguna harus login terlebih dahulu ke penyedia yang sudah ada (Google) lalu menautkan akunnya ke AuthCredential sebelumnya (kredensial Microsoft).

Jika menggunakan signInWithPopup, Anda dapat menangani error auth/account-exists-with-different-credential dengan kode seperti pada contoh berikut:


// Step 1.
// User tries to sign in to Microsoft.
auth.signInWithPopup(new firebase.auth.OAuthProvider('microsoft.com')).catch(function(error) {
  // An error happened.
  if (error.code === 'auth/account-exists-with-different-credential') {
    // Step 2.
    // User's email already exists.
    // The pending Microsoft credential.
    var pendingCred = error.credential;
    // The provider account's email address.
    var email = error.email;
    // Get sign-in methods for this email.
    auth.fetchSignInMethodsForEmail(email).then(function(methods) {
      // Step 3.
      // If the user has several sign-in methods,
      // the first method in the list will be the "recommended" method to use.
      if (methods[0] === 'password') {
        // Asks the user their password.
        // In real scenario, you should handle this asynchronously.
        var password = promptUserForPassword(); // TODO: implement promptUserForPassword.
        auth.signInWithEmailAndPassword(email, password).then(function(result) {
          // Step 4a.
          return result.user.linkWithCredential(pendingCred);
        }).then(function() {
          // Microsoft account successfully linked to the existing Firebase user.
          goToApp();
        });
        return;
      }
      // All the other cases are external providers.
      // Construct provider object for that provider.
      // TODO: implement getProviderForProviderId.
      var provider = getProviderForProviderId(methods[0]);
      // At this point, you should let the user know that they already have an account
      // but with a different provider, and let them validate the fact they want to
      // sign in with this provider.
      // Sign in to provider. Note: browsers usually block popup triggered asynchronously,
      // so in real scenario you should ask the user to click on a "continue" button
      // that will trigger the signInWithPopup.
      auth.signInWithPopup(provider).then(function(result) {
        // Remember that the user may have signed in with an account that has a different email
        // address than the first one. This can happen as Firebase doesn't control the provider's
        // sign in flow and the user is free to login using whichever account they own.
        // Step 4b.
        // Link to Microsoft credential.
        // As we have access to the pending credential, we can directly call the link method.
        result.user.linkAndRetrieveDataWithCredential(pendingCred).then(function(usercred) {
          // Microsoft account successfully linked to the existing Firebase user.
          goToApp();
        });
      });
    });
  }
});

Mode pengalihan

Error ini ditangani dengan cara yang mirip di mode pengalihan, tetapi perbedaannya, kredensial yang tertunda harus dimasukkan ke cache di antara pengalihan halaman (misalnya, menggunakan penyimpanan sesi).

Tidak seperti penyedia OAuth lain yang didukung oleh Firebase, seperti Google, Facebook, dan Twitter, yang proses loginnya dapat langsung dilakukan dengan kredensial berbasis token akses OAuth, Firebase Auth tidak mendukung kemampuan yang sama untuk penyedia seperti Microsoft karena server Firebase Auth tidak dapat memverifikasi audience token akses OAuth Microsoft. Ini adalah persyaratan keamanan yang penting karena dapat membuat situs dan aplikasi rentan terkena serangan replay, yaitu ketika token akses OAuth Microsoft yang diperoleh untuk satu project (penyerang) dapat digunakan untuk login ke project lain (korban). Sebagai gantinya, Firebase Auth menyediakan kemampuan untuk menangani seluruh alur OAuth dan pertukaran kode otorisasi menggunakan client ID dan secret klien OAuth yang dikonfigurasi dalam Firebase Console. Karena kode otorisasi hanya dapat digunakan bersama dengan client ID atau secret klien tertentu, kode otorisasi yang diperoleh untuk satu project tidak dapat digunakan dengan project lain.

Jika penyedia ini harus digunakan di lingkungan yang tidak didukung, library OAuth pihak ketiga dan autentikasi kustom Firebase perlu digunakan. Library OAuth pihak ketiga diperlukan untuk mengautentikasi penyedia, sedangkan autentikasi kustom Firebase diperlukan untuk menukar kredensial penyedia dengan token kustom.

Melakukan autentikasi dengan Firebase di ekstensi Chrome

Jika membangun aplikasi ekstensi Chrome, Anda harus menambahkan ID ekstensi Chrome:

Buka project Anda di Firebase console.
Di bagian Autentikasi, buka halaman Metode login.
Tambahkan URI seperti berikut ke daftar Domain yang Diotorisasi:
```
chrome-extension://CHROME_EXTENSION_ID
```

Hanya operasi pop-up (signInWithPopup, linkWithPopup, dan reauthenticateWithPopup) yang tersedia untuk ekstensi Chrome, karena ekstensi Chrome tidak dapat menggunakan pengalihan HTTP. Anda harus memanggil metode ini dari skrip halaman latar belakang, bukan dari pop-up tindakan browser, karena pop-up autentikasi akan membatalkan pop-up tindakan browser. Metode pop-up hanya dapat digunakan dalam ekstensi yang menggunakan Manifest V2. Manifest V3 yang lebih baru hanya mengizinkan skrip latar belakang dalam bentuk pekerja layanan, yang sama sekali tidak dapat menjalankan operasi pop-up.

Di file manifes ekstensi Chrome, pastikan Anda menambahkan URL https://apis.google.com ke daftar yang diizinkan content_security_policy.

Saat pembuatan project, Firebase akan menyediakan subdomain unik untuk project Anda: https://my-app-12345.firebaseapp.com.

Domain ini juga akan digunakan sebagai mekanisme pengalihan untuk login dengan OAuth. Domain tersebut harus diizinkan untuk semua penyedia OAuth yang didukung. Namun, hal ini berarti pengguna mungkin akan melihat domain tersebut saat login ke Microsoft sebelum dialihkan kembali ke aplikasi: Continue to: https://my-app-12345.firebaseapp.com.

Agar subdomain tidak ditampilkan, Anda dapat menyiapkan domain kustom dengan Firebase Hosting:

Ikuti langkah 1 sampai 3 seperti yang tertera di artikel Menyiapkan domain Anda untuk Hosting. Saat Anda memverifikasi kepemilikan domain, Hosting akan menyediakan sertifikat SSL untuk domain kustom Anda.
Tambahkan domain kustom ke daftar domain yang diizinkan di Firebase console: auth.custom.domain.com.
Pada konsol developer Microsoft atau halaman penyiapan OAuth, berikan izin pada URL halaman pengalihan, yang akan dapat diakses di domain kustom Anda: https://auth.custom.domain.com/__/auth/handler.

Saat menginisialisasi library JavaScript, tentukan domain kustom Anda dengan authDomain kolom:

var config = {
  apiKey: '...',
  // Changed from 'my-app-12345.firebaseapp.com'.
  authDomain: 'auth.custom.domain.com',
  databaseURL: 'https://my-app-12345.firebaseio.com',
  projectId: 'my-app-12345',
  storageBucket: 'my-app-12345.appspot.com',
  messagingSenderId: '1234567890'
};
firebase.initializeApp(config);

Langkah berikutnya

Setelah pengguna login untuk pertama kalinya, akun pengguna baru akan dibuat dan ditautkan ke kredensial, yaitu nama pengguna dan sandi, nomor telepon, atau informasi penyedia autentikasi, yang digunakan pengguna tersebut untuk login. Akun baru ini disimpan sebagai bagian dari project Firebase Anda, dan dapat digunakan untuk mengidentifikasi pengguna di setiap aplikasi dalam project, terlepas dari cara pengguna login.

Di aplikasi Anda, cara yang direkomendasikan untuk mengetahui status autentikasi pengguna adalah dengan menetapkan observer pada objek Auth. Selanjutnya, Anda bisa mendapatkan informasi profil dasar pengguna dari objek User. Baca bagian Mengelola Pengguna.
Di Aturan Keamanan Firebase Realtime Database dan Cloud Storage, Anda bisa mendapatkan ID pengguna unik milik pengguna yang login dari variabel auth, dan menggunakannya untuk mengontrol data yang dapat diakses oleh pengguna.

Anda dapat mengizinkan pengguna untuk login ke aplikasi menggunakan beberapa penyedia autentikasi dengan menautkan kredensial penyedia autentikasi ke akun pengguna yang ada.

Untuk memproses logout pengguna, panggil signOut:

API modular web

import { getAuth, signOut } from "firebase/auth";

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});auth_sign_out.js

API dengan namespace web

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});index.js

Melakukan Autentikasi Menggunakan Microsoft dengan JavaScript

Sebelum memulai

Menangani alur login dengan Firebase SDK

API modular web

API dengan namespace web

API modular web

API dengan namespace web

API modular web

API dengan namespace web

API modular web

API dengan namespace web

API modular web

API dengan namespace web

API modular web

API dengan namespace web

API modular web

API dengan namespace web

API modular web

API dengan namespace web

Menangani Error account-exists-with-different-credential

Mode pop-up

Mode pengalihan

Lanjutan: Menangani alur login secara manual

Melakukan autentikasi dengan Firebase di ekstensi Chrome

Menyesuaikan domain pengalihan untuk login dengan Microsoft

Langkah berikutnya

API modular web

API dengan namespace web