Anda dapat mengizinkan pengguna melakukan autentikasi dengan Firebase menggunakan Akun Google-nya. Anda dapat menggunakan Firebase SDK untuk menjalankan alur login dengan Google, atau menjalankan alur login secara manual menggunakan library Login dengan Google dan meneruskan token ID yang dihasilkan ke Firebase.
Sebelum memulai
- Tambahkan Firebase ke project JavaScript.
- Aktifkan Google sebagai metode login di Firebase console:
- Di Firebase console, buka bagian Auth.
- Di tab Sign-in method, aktifkan metode login dengan Google lalu klik Save.
Menangani alur login dengan Firebase SDK
Jika Anda mem-build aplikasi web, cara termudah untuk mengautentikasi pengguna dengan Firebase menggunakan Akun Google 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 Google:
import { GoogleAuthProvider } from "firebase/auth"; const provider = new GoogleAuthProvider();
var provider = new firebase.auth.GoogleAuthProvider();
- Opsional: Tentukan cakupan OAuth 2.0 tambahan yang
ingin diminta dari penyedia autentikasi. Untuk menambahkan cakupan, panggil
addScope
. Contoh:provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
- 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:
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({ 'login_hint': 'user@example.com' });
provider.setCustomParameters({ 'login_hint': 'user@example.com' });
- Lakukan autentikasi dengan Firebase menggunakan objek penyedia Google. Anda bisa meminta pengguna untuk login dengan Akun Google, 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, GoogleAuthProvider } from "firebase/auth"; const auth = getAuth(); signInWithPopup(auth, provider) .then((result) => { // This gives you a Google Access Token. You can use it to access the Google API. const credential = GoogleAuthProvider.credentialFromResult(result); const token = credential.accessToken; // 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 = GoogleAuthProvider.credentialFromError(error); // ... });
firebase.auth() .signInWithPopup(provider) .then((result) => { /** @type {firebase.auth.OAuthCredential} */ var credential = result.credential; // This gives you a Google Access Token. You can use it to access the Google API. var token = credential.accessToken; // 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, GoogleAuthProvider } from "firebase/auth"; const auth = getAuth(); getRedirectResult(auth) .then((result) => { // This gives you a Google Access Token. You can use it to access Google APIs. const credential = GoogleAuthProvider.credentialFromResult(result); const token = credential.accessToken; // 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 = GoogleAuthProvider.credentialFromError(error); // ... });
firebase.auth() .getRedirectResult() .then((result) => { if (result.credential) { /** @type {firebase.auth.OAuthCredential} */ var credential = result.credential; // This gives you a Google Access Token. You can use it to access the Google API. var token = credential.accessToken; // ... } // 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 Google) dengan email yang sudah
ada untuk penyedia pengguna Firebase lain (seperti Facebook), error
auth/account-exists-with-different-credential
akan ditampilkan beserta
objek AuthCredential
(token ID Google). Untuk menyelesaikan proses login ke
penyedia yang dimaksud, pengguna harus login terlebih dahulu ke penyedia yang ada (Facebook), lalu menautkan akunnya ke
AuthCredential
sebelumnya (token ID Google).
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, GoogleAuthProvider, } from "firebase/auth"; try { // Step 1: User tries to sign in using Google. let result = await signInWithPopup(getAuth(), new GoogleAuthProvider()); } catch (error) { // Step 2: User's email already exists. if (error.code === "auth/account-exists-with-different-credential") { // The pending Google 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 Google 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).
Lanjutan: Menangani alur login secara manual
Anda juga dapat melakukan autentikasi dengan Firebase menggunakan Akun Google, dengan cara menangani alur login menggunakan library Login dengan Google:
- Integrasikan Login dengan Google ke aplikasi Anda dengan mengikuti panduan integrasi. Pastikan untuk mengonfigurasi Login dengan Google dengan Client ID Google yang dibuat untuk project Firebase Anda. Anda dapat menemukan Client ID Google untuk project Anda di halaman Kredensial pada Konsol Developer Project.
- Dalam callback hasil login, tukar token ID dari respons autentikasi Google dengan kredensial Firebase dan gunakan untuk melakukan autentikasi dengan Firebase:
function handleCredentialResponse(response) { // Build Firebase credential with the Google ID token. const idToken = response.credential; const credential = GoogleAuthProvider.credential(idToken); // Sign in with credential from the Google user. signInWithCredential(auth, credential).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; // The credential that was used. const credential = GoogleAuthProvider.credentialFromError(error); // ... }); }
Lanjutan: Melakukan autentikasi dengan Firebase di Node.js
Untuk melakukan autentikasi dengan Firebase pada aplikasi Node.js:
- Proses login pengguna dengan Akun Google mereka dan dapatkan token ID Google pengguna tersebut. Anda dapat melakukannya dengan beberapa cara. Contoh:
- Jika aplikasi Anda memiliki front end browser, gunakan Login dengan Google seperti yang dideskripsikan di bagian Menangani alur login secara manual. Dapatkan token ID Google dari respons autentikasi:
Kemudian, kirim token ini ke aplikasi Node.js Anda.var id_token = googleUser.getAuthResponse().id_token
- Jika aplikasi Anda berjalan di perangkat dengan kemampuan input terbatas, seperti TV, Anda dapat menggunakan alur Login dengan Google untuk TV dan Perangkat.
- Jika aplikasi Anda memiliki front end browser, gunakan Login dengan Google seperti yang dideskripsikan di bagian Menangani alur login secara manual. Dapatkan token ID Google dari respons autentikasi:
- Setelah mendapatkan token ID Google pengguna, gunakan token tersebut untuk mem-build objek
Kredensial, lalu proses login pengguna dengan kredensial tersebut:
import { getAuth, signInWithCredential, GoogleAuthProvider } from "firebase/auth"; // Build Firebase credential with the Google ID token. const credential = GoogleAuthProvider.credential(id_token); // Sign in with credential from the Google user. const auth = getAuth(); signInWithCredential(auth, credential).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 = GoogleAuthProvider.credentialFromError(error); // ... });
// Build Firebase credential with the Google ID token. var credential = firebase.auth.GoogleAuthProvider.credential(id_token); // Sign in with credential from the Google user. firebase.auth().signInWithCredential(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 membuat aplikasi ekstensi Chrome, baca artikel panduan Dokumen Di Balik Layar.
Menyesuaikan domain pengalihan untuk login dengan Google
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 Google 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 Google Developer Console 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. });