Melakukan Autentikasi Menggunakan Twitter di JavaScript

Anda dapat mengizinkan pengguna melakukan autentikasi dengan Firebase menggunakan akun Twitter mereka dengan mengintegrasikan autentikasi Twitter ke aplikasi. Integrasi autentikasi dengan Twitter dapat dilakukan dengan menggunakan Firebase SDK untuk menjalankan alur login, atau menerapkan alur OAuth Twitter secara manual dan meneruskan token akses dan rahasia yang dihasilkan ke Firebase.

Sebelum memulai

  1. Tambahkan Firebase ke project JavaScript.
  2. Di Firebase console, buka bagian Auth.
  3. Di tab Sign-in method, aktifkan penyedia Twitter.
  4. Tambahkan API key dan API secret dari konsol developer penyedia tersebut ke konfigurasi penyedia:
    1. Daftarkan aplikasi Anda sebagai aplikasi developer di Twitter, lalu dapatkan API key dan API secret OAuth aplikasi Anda.
    2. Pastikan OAuth redirect URI Firebase Anda (misalnya my-app-12345.firebaseapp.com/__/auth/handler) ditetapkan sebagai Authorization callback URL di halaman setelan aplikasi di konfigurasi aplikasi Twitter.
  5. Klik Save.

Menangani alur login dengan Firebase SDK

Jika Anda mem-build aplikasi web, cara termudah untuk mengautentikasi pengguna dengan Firebase menggunakan akun Twitter mereka adalah dengan menangani alur login dengan Firebase JavaScript SDK. (Jika ingin mengautentikasi pengguna dalam Node.js atau lingkungan non-browser lain, Anda harus menangani alur login secara manual.)

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

  1. Buat instance objek penyedia Twitter:

    API modular web

    import { TwitterAuthProvider } from "firebase/auth";
    
    const provider = new TwitterAuthProvider();

    API dengan namespace web

    var provider = new firebase.auth.TwitterAuthProvider();
  2. Opsional: Untuk melokalkan alur OAuth penyedia ke bahasa yang dipilih pengguna tanpa secara eksplisit meneruskan parameter OAuth kustom yang relevan, ubah kode bahasa di instance Auth sebelum memulai alur OAuth. Contoh:

    API modular web

    import { getAuth } from "firebase/auth";
    
    const auth = getAuth();
    auth.languageCode = 'it';
    // To apply the default browser preference instead of explicitly setting it.
    // auth.useDeviceLanguage();

    API dengan namespace web

    firebase.auth().languageCode = 'it';
    // To apply the default browser preference instead of explicitly setting it.
    // firebase.auth().useDeviceLanguage();
  3. Opsional: Tentukan parameter penyedia OAuth kustom tambahan yang akan dikirim dengan permintaan OAuth. Untuk menambahkan parameter kustom, panggil setCustomParameters di penyedia yang diinisialisasi beserta objek berisi kunci seperti yang ditentukan dalam dokumentasi penyedia OAuth dan nilainya yang terkait. Sebagai contoh:

    API modular web

    provider.setCustomParameters({
      'lang': 'es'
    });

    API dengan namespace web

    provider.setCustomParameters({
      'lang': 'es'
    });
    Parameter OAuth wajib yang dicadangkan tidak boleh digunakan dan akan diabaikan. Lihat referensi penyedia autentikasi untuk mengetahui detail lebih lanjut.
  4. Lakukan autentikasi dengan Firebase menggunakan objek penyedia Twitter. Anda bisa meminta pengguna untuk login dengan akun Twitter mereka, baik dengan membuka jendela pop-up maupun dengan mengalihkannya ke halaman login. Metode pengalihan lebih disukai pada perangkat seluler.
    • Untuk login dengan jendela pop-up, panggil signInWithPopup:

      API modular web

      import { getAuth, signInWithPopup, TwitterAuthProvider } from "firebase/auth";
      
      const auth = getAuth();
      signInWithPopup(auth, provider)
        .then((result) => {
          // This gives you a the Twitter OAuth 1.0 Access Token and Secret.
          // You can use these server side with your app's credentials to access the Twitter API.
          const credential = TwitterAuthProvider.credentialFromResult(result);
          const token = credential.accessToken;
          const secret = credential.secret;
      
          // The signed-in user info.
          const user = result.user;
          // IdP data available using getAdditionalUserInfo(result)
          // ...
        }).catch((error) => {
          // Handle Errors here.
          const errorCode = error.code;
          const errorMessage = error.message;
          // The email of the user's account used.
          const email = error.customData.email;
          // The AuthCredential type that was used.
          const credential = TwitterAuthProvider.credentialFromError(error);
          // ...
        });

      API dengan namespace web

      firebase
        .auth()
        .signInWithPopup(provider)
        .then((result) => {
          /** @type {firebase.auth.OAuthCredential} */
          var credential = result.credential;
      
          // This gives you a the Twitter OAuth 1.0 Access Token and Secret.
          // You can use these server side with your app's credentials to access the Twitter API.
          var token = credential.accessToken;
          var secret = credential.secret;
      
          // The signed-in user info.
          var user = result.user;
          // IdP data available in result.additionalUserInfo.profile.
            // ...
        }).catch((error) => {
          // Handle Errors here.
          var errorCode = error.code;
          var errorMessage = error.message;
          // The email of the user's account used.
          var email = error.email;
          // The firebase.auth.AuthCredential type that was used.
          var credential = error.credential;
          // ...
        });
      Perlu diingat juga bahwa Anda bisa mengambil token OAuth penyedia Twitter yang dapat digunakan untuk mengambil data tambahan menggunakan Twitter API.

      Di sini juga Anda dapat menemukan dan menangani error. Untuk mengetahui daftar kode error, baca Dokumentasi Referensi Auth.

    • Untuk login dengan mengalihkan pengguna ke halaman login penyedia, panggil signInWithRedirect: Ikuti praktik terbaik saat menggunakan `signInWithRedirect`.

      API modular web

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

      API dengan namespace web

      firebase.auth().signInWithRedirect(provider);
      Kemudian, Anda juga bisa mengambil token OAuth penyedia Twitter dengan memanggil getRedirectResult saat halaman dimuat:

      API modular web

      import { getAuth, getRedirectResult, TwitterAuthProvider } from "firebase/auth";
      
      const auth = getAuth();
      getRedirectResult(auth)
        .then((result) => {
          // This gives you a the Twitter OAuth 1.0 Access Token and Secret.
          // You can use these server side with your app's credentials to access the Twitter API.
          const credential = TwitterAuthProvider.credentialFromResult(result);
          const token = credential.accessToken;
          const secret = credential.secret;
          // ...
      
          // The signed-in user info.
          const user = result.user;
          // IdP data available using getAdditionalUserInfo(result)
          // ...
        }).catch((error) => {
          // Handle Errors here.
          const errorCode = error.code;
          const errorMessage = error.message;
          // The email of the user's account used.
          const email = error.customData.email;
          // The AuthCredential type that was used.
          const credential = TwitterAuthProvider.credentialFromError(error);
          // ...
        });

      API dengan namespace web

      firebase.auth()
        .getRedirectResult()
        .then((result) => {
          if (result.credential) {
            /** @type {firebase.auth.OAuthCredential} */
            var credential = result.credential;
      
            // This gives you a the Twitter OAuth 1.0 Access Token and Secret.
            // You can use these server side with your app's credentials to access the Twitter API.
            var token = credential.accessToken;
            var secret = credential.secret;
            // ...
          }
      
          // The signed-in user info.
          var user = result.user;
          // IdP data available in result.additionalUserInfo.profile.
            // ...
        }).catch((error) => {
          // Handle Errors here.
          var errorCode = error.code;
          var errorMessage = error.message;
          // The email of the user's account used.
          var email = error.email;
          // The firebase.auth.AuthCredential type that was used.
          var credential = error.credential;
          // ...
        });
      Di sini juga Anda dapat menemukan dan menangani error. Untuk mengetahui daftar kode error, baca Dokumentasi Referensi Auth.

Menangani alur login secara manual

Anda juga bisa melakukan autentikasi dengan Firebase menggunakan akun Twitter. Caranya, tangani alur login dengan memanggil endpoint OAuth Twitter:

  1. Integrasikan autentikasi Twitter ke dalam aplikasi dengan mengikuti dokumentasi developer. Pada akhir alur login Twitter, Anda akan menerima token akses OAuth dan rahasia OAuth.
  2. Jika harus login ke aplikasi Node.js, kirim token akses OAuth dan rahasia OAuth ke aplikasi Node.js.
  3. Setelah pengguna berhasil login dengan Twitter, tukar token akses OAuth dan rahasia OAuth dengan kredensial Firebase:
    var credential = firebase.auth.TwitterAuthProvider.credential(token, secret);
    
  4. Melakukan autentikasi dengan Firebase menggunakan kredensial Firebase:

    API modular web

    import { getAuth, signInWithCredential, FacebookAuthProvider } from "firebase/auth";
    
    // Sign in with the credential from the Facebook user.
    const auth = getAuth();
    signInWithCredential(auth, credential)
      .then((result) => {
        // Signed in 
        const credential = FacebookAuthProvider.credentialFromResult(result);
      })
      .catch((error) => {
        // Handle Errors here.
        const errorCode = error.code;
        const errorMessage = error.message;
        // The email of the user's account used.
        const email = error.customData.email;
        // The AuthCredential type that was used.
        const credential = FacebookAuthProvider.credentialFromError(error);
        // ...
      });

    API dengan namespace web

    // Sign in with the credential from the Facebook user.
    firebase.auth().signInWithCredential(credential)
      .then((result) => {
        // Signed in       
        var credential = result.credential;
        // ...
      })
      .catch((error) => {
        // Handle Errors here.
        var errorCode = error.code;
        var errorMessage = error.message;
        // The email of the user's account used.
        var email = error.email;
        // The firebase.auth.AuthCredential type that was used.
        var credential = error.credential;
        // ...
      });

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