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
- Tambahkan Firebase ke project JavaScript.
- Di Firebase console, buka bagian Auth.
- Di tab Sign-in method, aktifkan penyedia Twitter.
- Tambahkan API key dan API secret dari konsol developer penyedia tersebut ke konfigurasi penyedia:
- Daftarkan aplikasi Anda sebagai aplikasi developer di Twitter, lalu dapatkan API key dan API secret OAuth aplikasi Anda.
- 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.
- 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:
- Buat instance objek penyedia Twitter:
import { TwitterAuthProvider } from "firebase/auth"; const provider = new TwitterAuthProvider();
var provider = new firebase.auth.TwitterAuthProvider();
- Opsional: Untuk melokalkan alur OAuth penyedia ke bahasa yang dipilih
pengguna tanpa meneruskan parameter OAuth kustom yang relevan secara eksplisit, perbarui kode
bahasa di instance Auth sebelum memulai alur OAuth. Contoh:
import { getAuth } from "firebase/auth"; const auth = getAuth(); auth.languageCode = 'it'; // To apply the default browser preference instead of explicitly setting it. // auth.useDeviceLanguage();
firebase.auth().languageCode = 'it'; // To apply the default browser preference instead of explicitly setting it. // firebase.auth().useDeviceLanguage();
- 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:provider.setCustomParameters({ 'lang': 'es' });
provider.setCustomParameters({ 'lang': 'es' });
- 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
: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); // ... });
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; // ... });
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`.import { getAuth, signInWithRedirect } from "firebase/auth"; const auth = getAuth(); signInWithRedirect(auth, provider);
firebase.auth().signInWithRedirect(provider);
getRedirectResult
saat halaman dimuat: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); // ... });
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; // ... });
- Untuk login dengan jendela pop-up, panggil
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 Twitter) dengan email yang sudah ada
untuk penyedia pengguna Firebase lain (seperti Google), error
auth/account-exists-with-different-credential
akan ditampilkan beserta
objek AuthCredential
(rahasia dan token oauth Twitter). Untuk menyelesaikan proses login ke
penyedia yang dimaksud, pengguna harus login terlebih dahulu ke penyedia yang ada (Google), lalu menautkan
akunnya ke AuthCredential
sebelumnya (rahasia dan token oauth Twitter).
Mode pop-up
Jika menggunakan signInWithPopup
, Anda dapat menangani error auth/account-exists-with-different-credential
dengan kode seperti pada contoh berikut:
import { getAuth, linkWithCredential, signInWithPopup, TwitterAuthProvider, } from "firebase/auth"; try { // Step 1: User tries to sign in using Twitter. let result = await signInWithPopup(getAuth(), new TwitterAuthProvider()); } catch (error) { // Step 2: User's email already exists. if (error.code === "auth/account-exists-with-different-credential") { // The pending Twitter credential. let pendingCred = error.credential; // Step 3: Save the pending credential in temporary storage, // Step 4: Let the user know that they already have an account // but with a different provider, and let them choose another // sign-in method. } } // ... try { // Step 5: Sign the user in using their chosen method. let result = await signInWithPopup(getAuth(), userSelectedProvider); // Step 6: Link to the Twitter credential. // TODO: implement `retrievePendingCred` for your app. let pendingCred = retrievePendingCred(); if (pendingCred !== null) { // As you have access to the pending credential, you can directly call the // link method. let user = await linkWithCredential(result.user, pendingCred); } // Step 7: Continue to app. } catch (error) { // ... }
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).
Menangani alur login secara manual
Anda juga bisa melakukan autentikasi dengan Firebase menggunakan akun Twitter. Caranya, tangani alur login dengan memanggil endpoint OAuth Twitter:
- Integrasikan autentikasi Twitter ke dalam aplikasi dengan mengikuti dokumentasi developer. Pada akhir alur login Twitter, Anda akan menerima token akses OAuth dan rahasia OAuth.
- Jika harus login ke aplikasi Node.js, kirim token akses OAuth dan rahasia OAuth ke aplikasi Node.js.
- Setelah pengguna berhasil login dengan Twitter, tukar token akses OAuth dan rahasia OAuth dengan kredensial Firebase:
var credential = firebase.auth.TwitterAuthProvider.credential(token, secret);
- Melakukan autentikasi dengan Firebase menggunakan kredensial Firebase:
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); // ... });
// 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 Anda membangun aplikasi ekstensi Chrome, baca artikel Panduan Dokumen di Luar Layar.
Menyesuaikan domain pengalihan untuk login dengan Twitter
Saat membuat 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 Twitter sebelum dialihkan kembali ke aplikasi: Lanjutkan ke: 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 Twitter 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 kolom
authDomain
:var config = { apiKey: '...', // Changed from '
PROJECT_ID .firebaseapp.com'. authDomain: 'auth.custom.domain.com', databaseURL: 'https://PROJECT_ID .firebaseio.com', projectId: 'PROJECT_ID ', storageBucket: ' ', messagingSenderId: 'PROJECT_ID .firebasestorage.appSENDER_ID ' }; 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 objekUser
. 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
:
import { getAuth, signOut } from "firebase/auth"; const auth = getAuth(); signOut(auth).then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });
firebase.auth().signOut().then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });