Memproses login pengguna dengan Twitter

Dokumen ini menunjukkan cara menggunakan Identity Platform untuk membuat pengguna login dengan Twitter.

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 Twitter sebagai penyedia

Untuk mengonfigurasi Twitter sebagai penyedia identitas:

  1. Buka halaman Identity Provider di Konsol Google Cloud.

    Buka halaman Penyedia Identitas

  2. Klik Tambahkan Penyedia.

  3. Pilih Twitter dari daftar.

  4. Masukkan ID Aplikasi dan Rahasia Aplikasi Twitter Anda. Jika belum memiliki ID dan rahasia, Anda dapat memperolehnya dari halaman Aplikasi Twitter.

  5. Konfigurasikan URI yang tercantum di bagian Konfigurasikan Twitter sebagai URI pengalihan OAuth yang valid untuk aplikasi Twitter Anda. Jika Anda mengonfigurasi domain kustom di Identity Platform, perbarui URI pengalihan di konfigurasi aplikasi Twitter agar 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 tersebut ke kode aplikasi Anda untuk menginisialisasi Client SDK Identity Platform.

  8. Klik Save.

Memproses login pengguna dengan SDK Klien

  1. Buat instance objek penyedia Twitter:

    Web versi 9

    import { TwitterAuthProvider } from "firebase/auth";

const provider = new TwitterAuthProvider();
    auth_twitter_provider_create.js

    Web versi 8

    var provider = new firebase.auth.TwitterAuthProvider();
    twitter.js

  1. Opsional: Lokalkan alur autentikasi. Anda dapat menentukan bahasa, atau menggunakan bahasa default perangkat:

    Web versi 9

    import { getAuth } from "firebase/auth";

const auth = getAuth();
auth.languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// auth.useDeviceLanguage();
    auth_set_language_code.js

    Web versi 8

    firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();
    index.js

  2. Opsional: Tentukan parameter OAuth kustom tambahan. Kunci ini khusus untuk Twitter, dan biasanya digunakan untuk menyesuaikan pengalaman autentikasi. Anda tidak dapat meneruskan parameter yang dicadangkan oleh OAuth atau Identity Platform.

Web versi 9

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

Web versi 8

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

  1. Gunakan objek penyedia Twitter 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():

    Web versi 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;
    // 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);
    // ...
  });
    auth_twitter_signin_popup.js

    Web versi 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;
    // 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;
    // ...
  });
    twitter.js

    Untuk mengalihkan halaman, panggil signInWithRedirect() terlebih dahulu.

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

    Web versi 9

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

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

    Web versi 8

    firebase.auth().signInWithRedirect(provider);
    index.js

    Kemudian, ambil token Twitter dengan memanggil getRedirectResult() saat halaman Anda dimuat:

    Web versi 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;
    // 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);
    // ...
  });
    auth_twitter_signin_redirect_result.js

    Web versi 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;
    // 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;
    // ...
  });
    twitter.js

Setelah memiliki token akses, Anda dapat menggunakannya untuk memanggil Twitter API. Contoh:

REST

curl --request POST
  --url 'https://api.twitter.com/1.1/statuses/update.json?status=Hello%20world'
  --header 'authorization: OAuth oauth_consumer_key="CONSUMER_API_KEY",
  oauth_nonce="OAUTH_NONCE", oauth_signature="OAUTH_SIGNATURE",
  oauth_signature_method="HMAC-SHA1", oauth_timestamp="OAUTH_TIMESTAMP",
  oauth_token="ACCESS_TOKEN", oauth_version="1.0"'

Memproses login pengguna secara manual

Jika tidak ingin menggunakan Client SDK, Anda juga dapat menangani alur login secara manual:

  1. Integrasikan autentikasi Twitter ke dalam aplikasi Anda dengan mengikuti langkah-langkah dalam dokumentasi developer mereka.

  2. Buat pengguna login dengan Twitter menggunakan alur yang Anda terapkan pada langkah sebelumnya.

  3. Tukarkan token yang Anda terima dari Twitter dengan kredensial Identity Platform:

    Web versi 9

    import { TwitterAuthProvider } from "firebase/auth";

const credential = TwitterAuthProvider.credential(accessToken, secret);
    auth_twitter_provider_credential.js

    Web versi 8

    var credential = firebase.auth.TwitterAuthProvider.credential(accessToken, secret);
    twitter.js

  4. Gunakan kredensial untuk memproses login pengguna dengan Identity Platform:

    Web versi 9

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

// Sign in with the credential from the user.
const auth = getAuth();
signInWithCredential(auth, credential)
  .then((result) => {
    // Signed in
    // ...
  })
  .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;
    // ...
  });
    auth_signin_credential.js

    Web versi 8

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

Langkah selanjutnya