Google berkomitmen untuk mendorong terwujudnya keadilan ras bagi komunitas Kulit Hitam. Lihat caranya.

Otentikasi Menggunakan Twitter di JavaScript

Anda dapat mengizinkan pengguna mengautentikasi dengan Firebase menggunakan akun Twitter mereka dengan mengintegrasikan autentikasi Twitter ke dalam aplikasi Anda. Anda dapat mengintegrasikan autentikasi Twitter dengan menggunakan SDK Firebase untuk menjalankan alur masuk, atau dengan menjalankan alur OAuth Twitter secara manual dan meneruskan token akses dan rahasia yang dihasilkan ke Firebase.

Sebelum kamu memulai

  1. Tambahkan Firebase ke proyek JavaScript Anda .
  2. Di Firebase console , buka bagian Auth .
  3. Pada tab Metode masuk , aktifkan penyedia Twitter .
  4. Tambahkan kunci API dan rahasia API dari konsol pengembang penyedia itu ke konfigurasi penyedia:
    1. Daftarkan aplikasi Anda sebagai aplikasi pengembang di Twitter dan dapatkan kunci API OAuth dan rahasia API aplikasi Anda .
    2. Pastikan URI pengalihan OAuth Firebase Anda (mis my-app-12345.firebaseapp.com/__/auth/handler ) disetel sebagai URL panggilan balik Otorisasi di halaman setelan aplikasi pada konfigurasi aplikasi Twitter Anda.
  5. Klik Simpan .

Tangani alur masuk dengan Firebase SDK

Jika Anda membuat aplikasi web, cara termudah untuk mengautentikasi pengguna Anda dengan Firebase menggunakan akun Twitter mereka adalah dengan menangani alur masuk dengan Firebase JavaScript SDK. (Jika Anda ingin mengautentikasi pengguna di Node.js atau lingkungan non-browser lainnya, Anda harus menangani alur masuk secara manual.)

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

  1. Buat instance objek penyedia Twitter:

    Web version 9

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

    Web version 8

    var provider = new firebase.auth.TwitterAuthProvider();
  2. Opsional : Untuk melokalkan aliran OAuth penyedia ke bahasa pilihan pengguna tanpa secara eksplisit meneruskan parameter OAuth kustom yang relevan, perbarui kode bahasa pada instance Auth sebelum memulai aliran OAuth. Sebagai contoh:

    Web version 9

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

    Web version 8

    firebase.auth().languageCode = 'it';
    // To apply the default browser preference instead of explicitly setting it.
    // firebase.auth().useDeviceLanguage();
  3. Opsional : Tentukan parameter penyedia OAuth khusus tambahan yang ingin Anda kirim dengan permintaan OAuth. Untuk menambahkan parameter khusus, panggil setCustomParameters pada penyedia yang diinisialisasi dengan objek yang berisi kunci seperti yang ditentukan oleh dokumentasi penyedia OAuth dan nilai yang sesuai. Sebagai contoh:

    Web version 9

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

    Web version 8

    provider.setCustomParameters({
      'lang': 'es'
    });
    Parameter OAuth wajib yang dicadangkan tidak diizinkan dan akan diabaikan. Lihat referensi penyedia otentikasi untuk lebih jelasnya.
  4. Otentikasi dengan Firebase menggunakan objek penyedia Twitter. Anda dapat meminta pengguna Anda untuk masuk dengan akun Twitter mereka baik dengan membuka jendela pop-up atau dengan mengarahkan ulang ke halaman masuk. Metode pengalihan lebih disukai pada perangkat seluler.
    • Untuk masuk dengan jendela pop-up, panggil signInWithPopup :

      Web version 9

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

      Web version 8

      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;
          // ...
        }).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;
          // ...
        });
      Perhatikan juga bahwa Anda dapat mengambil token OAuth penyedia Twitter yang dapat digunakan untuk mengambil data tambahan menggunakan API Twitter.

      Ini juga tempat Anda dapat menangkap dan menangani kesalahan. Untuk daftar kode kesalahan, lihat Dokumen Referensi Auth .

    • Untuk masuk dengan mengalihkan ke halaman masuk, panggil signInWithRedirect :

      Web version 9

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

      Web version 8

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

      Web version 9

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

      Web version 8

      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;
        }).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;
          // ...
        });
      Ini juga tempat Anda dapat menangkap dan menangani kesalahan. Untuk daftar kode kesalahan, lihat Dokumen Referensi Auth .

Tangani alur masuk secara manual

Anda juga dapat mengautentikasi dengan Firebase menggunakan akun Twitter dengan menangani alur masuk dengan memanggil titik akhir OAuth Twitter:

  1. Integrasikan autentikasi Twitter ke dalam aplikasi Anda dengan mengikuti dokumentasi pengembang . Di akhir alur masuk Twitter, Anda akan menerima token akses OAuth dan rahasia OAuth.
  2. Jika Anda perlu masuk ke aplikasi Node.js, kirim token akses OAuth dan rahasia OAuth ke aplikasi Node.js.
  3. Setelah pengguna berhasil masuk dengan Twitter, tukarkan token akses OAuth dan rahasia OAuth dengan kredensial Firebase:
    var credential = firebase.auth.TwitterAuthProvider.credential(token, secret);
    
  4. Mengautentikasi dengan Firebase menggunakan kredensial Firebase:

    Web version 9

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

    Web version 8

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

Otentikasi dengan Firebase di ekstensi Chrome

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

  1. Buka proyek Anda di konsol Firebase .
  2. Di bagian Otentikasi , buka halaman Metode masuk .
  3. Tambahkan URI seperti berikut ini ke daftar Domain Resmi:
    chrome-extension://CHROME_EXTENSION_ID

Hanya operasi popup ( 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 daripada popup tindakan browser, karena popup otentikasi akan membatalkan popup tindakan browser. Metode popup hanya dapat digunakan dalam ekstensi yang menggunakan Manifest V2 . Manifest V3 yang lebih baru hanya mengizinkan skrip latar belakang dalam bentuk pekerja layanan, yang tidak dapat melakukan operasi popup sama sekali.

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

Langkah selanjutnya

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

  • Di aplikasi Anda, cara yang disarankan untuk mengetahui status autentikasi pengguna Anda adalah dengan menyetel pengamat pada objek Auth . Anda kemudian bisa mendapatkan informasi profil dasar pengguna dari objek User . Lihat Kelola Pengguna .

  • Dalam Aturan Keamanan Firebase Realtime Database dan Cloud Storage , Anda bisa mendapatkan ID pengguna unik pengguna yang masuk dari variabel auth , dan menggunakannya untuk mengontrol data apa yang dapat diakses pengguna.

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

Untuk mengeluarkan pengguna, panggil signOut :

Web version 9

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

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

Web version 8

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