Melakukan Autentikasi Menggunakan Yahoo dengan JavaScript

Anda dapat mengizinkan pengguna untuk melakukan autentikasi dengan Firebase menggunakan penyedia OAuth, seperti Yahoo, dengan mengintegrasikan Login OAuth umum ke aplikasi Anda menggunakan Firebase SDK agar alur login dapat dijalankan secara menyeluruh.

Sebelum memulai

Untuk membuat pengguna login menggunakan akun Yahoo, Anda harus terlebih dahulu mengaktifkan Yahoo sebagai penyedia login untuk project Firebase:

  1. Tambahkan Firebase ke project JavaScript.
  2. Di Firebase console, buka bagian Authentication.
  3. Pada tab Sign in method, aktifkan penyedia Yahoo.
  4. Tambahkan Client ID dan Client Secret dari konsol developer penyedia tersebut ke konfigurasi penyedia:
    1. Untuk mendaftarkan klien OAuth Yahoo, baca dokumentasi developer Yahoo tentang mendaftarkan aplikasi web ke Yahoo.

      Pastikan untuk memilih kedua izin OpenID Connect API: profile dan email.

    2. Saat mendaftarkan aplikasi ke penyedia ini, pastikan untuk mendaftarkan domain *.firebaseapp.com untuk project Anda sebagai domain pengalihan untuk aplikasi Anda.
  5. Klik Save.

Menangani alur login dengan Firebase SDK

Jika Anda mem-build aplikasi web, cara termudah untuk mengautentikasi pengguna dengan Firebase menggunakan akun Yahoo-nya adalah dengan menangani seluruh alur login dengan Firebase JavaScript SDK.

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

  1. Buat instance OAuthProvider menggunakan ID penyedia yahoo.com.

    API modular web

    import { OAuthProvider } from "firebase/auth";
    
    const provider = new OAuthProvider('yahoo.com');

    API dengan namespace web

    var provider = new firebase.auth.OAuthProvider('yahoo.com');
  2. Opsional: Tentukan parameter OAuth kustom tambahan yang ingin dikirim dengan permintaan OAuth.

    API modular web

    provider.setCustomParameters({
      // Prompt user to re-authenticate to Yahoo.
      prompt: 'login',
      // Localize to French.
      language: 'fr'
    });  

    API dengan namespace web

    provider.setCustomParameters({
      // Prompt user to re-authenticate to Yahoo.
      prompt: 'login',
      // Localize to French.
      language: 'fr'
    });  

    Untuk parameter yang didukung Yahoo, baca dokumentasi OAuth Yahoo. Perlu diperhatikan bahwa Anda tidak dapat meneruskan parameter yang diperlukan Firebase dengan setCustomParameters(). Parameter tersebut adalah client_id, redirect_uri, response_type, scope, dan state.

  3. Opsional: Tentukan cakupan OAuth 2.0 tambahan selain profile dan email yang ingin diminta dari penyedia autentikasi. Jika aplikasi Anda memerlukan akses ke data pengguna pribadi dari Yahoo API, Anda harus meminta izin ke Yahoo API di bagian API Permissions di konsol developer Yahoo. Cakupan OAuth yang diminta harus sama persis dengan yang sudah dikonfigurasi sebelumnya dalam izin API aplikasi. Misalnya, jika permintaan akses baca/tulis diajukan ke kontak pengguna dan telah dikonfigurasi sebelumnya dalam izin API aplikasi, sdct-w harus diteruskan sebagai ganti dari cakupan OAuth hanya baca sdct-r. Jika tidak, alur akan gagal dan error akan ditampilkan kepada pengguna akhir.

    API modular web

    // Request access to Yahoo Mail API.
    provider.addScope('mail-r');
    // Request read/write access to user contacts.
    // This must be preconfigured in the app's API permissions.
    provider.addScope('sdct-w');

    API dengan namespace web

    // Request access to Yahoo Mail API.
    provider.addScope('mail-r');
    // Request read/write access to user contacts.
    // This must be preconfigured in the app's API permissions.
    provider.addScope('sdct-w');

    Untuk mempelajari lebih lanjut, baca dokumentasi cakupan Yahoo.

  4. Lakukan autentikasi dengan Firebase menggunakan objek penyedia OAuth. Anda bisa meminta pengguna untuk login dengan Akun Yahoo mereka, baik dengan membuka jendela pop-up maupun dengan mengalihkan mereka 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) => {
          // IdP data available in result.additionalUserInfo.profile
          // ...
      
          // Yahoo OAuth access token and ID token can be retrieved by calling:
          const credential = OAuthProvider.credentialFromResult(result);
          const accessToken = credential.accessToken;
          const idToken = credential.idToken;
        })
        .catch((error) => {
          // Handle error.
        });

      API dengan namespace web

      firebase.auth().signInWithPopup(provider)
        .then((result) => {
          // IdP data available in result.additionalUserInfo.profile
          // ...
      
          /** @type {firebase.auth.OAuthCredential} */
          const credential = result.credential;
      
          // Yahoo OAuth access token and ID token can be retrieved by calling:
          var accessToken = credential.accessToken;
          var idToken = credential.idToken;
        })
        .catch((error) => {
          // Handle error.
        });
    • Untuk login dengan beralih ke halaman login, panggil signInWithRedirect:

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

      firebase.auth().signInWithRedirect(provider);
      

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

    API modular web

    import { getAuth, signInWithRedirect } from "firebase/auth";
    
    const auth = getAuth();
    signInWithRedirect(auth, provider);

    API dengan namespace web

    firebase.auth().signInWithRedirect(provider);

    Setelah berhasil diselesaikan, token ID OAuth dan token akses yang terkait dengan penyedia dapat diambil dari objek firebase.auth.UserCredential yang ditampilkan.

    Dengan token akses OAuth, Anda dapat memanggil Yahoo API.

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

    curl -i -H "Authorization: Bearer ACCESS_TOKEN" https://social.yahooapis.com/v1/user/YAHOO_USER_UID/profile?format=json
    

    YAHOO_USER_UID adalah ID pengguna Yahoo yang dapat diambil dari kolom firebase.auth().currentUser.providerData[0].uid atau dari result.additionalUserInfo.profile.

  5. Meskipun contoh di atas berfokus pada alur login, Anda juga dapat menautkan penyedia Yahoo 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('yahoo.com');
    const auth = getAuth();
    linkWithPopup(auth.currentUser, provider)
        .then((result) => {
          // Yahoo 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.
        });

    API dengan namespace web

    var provider = new firebase.auth.OAuthProvider('yahoo.com');
    firebase.auth().currentUser.linkWithPopup(provider)
        .then((result) => {
          // Yahoo credential is linked to the current user.
          // IdP data available in result.additionalUserInfo.profile.
          // Yahoo OAuth access token can be retrieved by calling:
          // result.credential.accessToken
          // Yahoo OAuth ID token can be retrieved by calling:
          // result.credential.idToken
        })
        .catch((error) => {
          // Handle error.
        });
  6. 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('yahoo.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.
        });

    API dengan namespace web

    var provider = new firebase.auth.OAuthProvider('yahoo.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.
          // Yahoo OAuth access token can be retrieved by calling:
          // result.credential.accessToken
          // Yahoo OAuth ID token can be retrieved by calling:
          // result.credential.idToken
        })
        .catch((error) => {
          // Handle error.
        });

Melakukan autentikasi dengan Firebase di ekstensi Chrome

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

  1. Buka project Anda di Firebase console.
  2. Di bagian Autentikasi, buka halaman Metode login.
  3. 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.

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

API dengan namespace web

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