Anda dapat mengizinkan pengguna melakukan autentikasi dengan Firebase menggunakan penyedia OAuth, seperti Yahoo, dengan mengintegrasikan Login OAuth umum ke aplikasi Anda menggunakan Firebase SDK untuk menjalankan alur login secara menyeluruh.
Sebelum memulai
Untuk membuat pengguna login menggunakan akun Yahoo, Anda harus terlebih dahulu mengaktifkan Yahoo sebagai penyedia login untuk project Firebase:
- Tambahkan Firebase ke project JavaScript.
- Di Firebase console, buka bagian Auth.
- Pada tab Sign in method, aktifkan penyedia Yahoo.
- Tambahkan Client ID dan Client Secret dari konsol developer penyedia tersebut ke konfigurasi penyedia:
-
Untuk mendaftarkan klien OAuth Yahoo, baca dokumentasi developer Yahoo tentang mendaftarkan aplikasi web ke Yahoo.
Pastikan untuk memilih kedua izin OpenID Connect API:
profile
danemail
. - Saat mendaftarkan aplikasi ke penyedia ini, pastikan untuk mendaftarkan domain
*.firebaseapp.com
untuk project Anda sebagai domain pengalihan untuk aplikasi Anda.
-
- Klik Save.
Menangani alur login dengan Firebase SDK
Jika Anda mem-build aplikasi web, cara termudah untuk mengautentikasi pengguna dengan Firebase menggunakan akun Yahoo-nya adalah dengan menangani seluruh alur login dengan Firebase JavaScript SDK.
Untuk menangani alur login dengan Firebase JavaScript SDK, ikuti langkah-langkah berikut:
Buat instance OAuthProvider menggunakan ID penyedia yahoo.com.
import { OAuthProvider } from "firebase/auth"; const provider = new OAuthProvider('yahoo.com');
var provider = new firebase.auth.OAuthProvider('yahoo.com');
Opsional: Tentukan parameter OAuth kustom tambahan yang ingin dikirim dengan permintaan OAuth.
provider.setCustomParameters({ // Prompt user to re-authenticate to Yahoo. prompt: 'login', // Localize to French. language: 'fr' });
provider.setCustomParameters({ // Prompt user to re-authenticate to Yahoo. prompt: 'login', // Localize to French. language: 'fr' });
Untuk parameter yang didukung Yahoo, baca artikel dokumentasi OAuth Yahoo. Perlu diperhatikan bahwa Anda tidak dapat meneruskan parameter yang diperlukan Firebase dengan
setCustomParameters()
. Parameter tersebut adalah client_id, redirect_uri, response_type, scope, dan state.Opsional: Tentukan cakupan OAuth 2.0 tambahan selain
profile
danemail
yang ingin diminta dari penyedia autentikasi. Jika aplikasi Anda memerlukan akses ke data pengguna pribadi dari Yahoo API, Anda harus meminta izin ke Yahoo API di bagian API Permissions di konsol developer Yahoo. Cakupan OAuth yang diminta harus sama persis dengan yang sudah dikonfigurasi sebelumnya dalam izin API aplikasi. Misalnya, jika permintaan akses baca/tulis diajukan ke kontak pengguna dan telah dikonfigurasi sebelumnya dalam izin API aplikasi,sdct-w
harus diteruskan sebagai ganti dari cakupan OAuth hanya bacasdct-r
. Jika tidak, alur akan gagal dan error akan ditampilkan kepada pengguna akhir.// Request access to Yahoo Mail API. provider.addScope('mail-r'); // Request read/write access to user contacts. // This must be preconfigured in the app's API permissions. provider.addScope('sdct-w');
// Request access to Yahoo Mail API. provider.addScope('mail-r'); // Request read/write access to user contacts. // This must be preconfigured in the app's API permissions. provider.addScope('sdct-w');
Untuk mempelajari lebih lanjut, baca artikel dokumentasi cakupan Yahoo.
Lakukan autentikasi dengan Firebase menggunakan objek penyedia OAuth. Anda bisa meminta pengguna untuk login dengan Akun Yahoo mereka, baik dengan membuka jendela pop-up maupun dengan mengalihkan mereka ke halaman login. Untuk perangkat seluler, sebaiknya gunakan metode pengalihan.
Untuk login dengan jendela pop-up, panggil
signInWithPopup
:import { getAuth, signInWithPopup, OAuthProvider } from "firebase/auth"; const auth = getAuth(); signInWithPopup(auth, provider) .then((result) => { // IdP data available in result.additionalUserInfo.profile // ... // Yahoo OAuth access token and ID token can be retrieved by calling: const credential = OAuthProvider.credentialFromResult(result); const accessToken = credential.accessToken; const idToken = credential.idToken; }) .catch((error) => { // Handle error. });
firebase.auth().signInWithPopup(provider) .then((result) => { // IdP data available in result.additionalUserInfo.profile // ... /** @type {firebase.auth.OAuthCredential} */ const credential = result.credential; // Yahoo OAuth access token and ID token can be retrieved by calling: var accessToken = credential.accessToken; var idToken = credential.idToken; }) .catch((error) => { // Handle error. });
Untuk login dengan beralih ke halaman login, panggil
signInWithRedirect
:
Ikuti praktik terbaik saat menggunakan
signInWithRedirect
,linkWithRedirect
, ataureauthenticateWithRedirect
.firebase.auth().signInWithRedirect(provider);
Setelah pengguna menyelesaikan proses login dan kembali ke halaman, Anda dapat mengambil hasil login dengan memanggil
getRedirectResult
.import { getAuth, signInWithRedirect } from "firebase/auth"; const auth = getAuth(); signInWithRedirect(auth, provider);
firebase.auth().signInWithRedirect(provider);
Setelah berhasil diselesaikan, token ID OAuth dan token akses yang terkait dengan penyedia dapat diambil dari objek
firebase.auth.UserCredential
yang ditampilkan.Dengan token akses OAuth, Anda dapat memanggil Yahoo API.
Misalnya, untuk mendapatkan informasi profil dasar, REST API berikut dapat dipanggil:
curl -i -H "Authorization: Bearer ACCESS_TOKEN" https://social.yahooapis.com/v1/user/YAHOO_USER_UID/profile?format=json
YAHOO_USER_UID
adalah ID pengguna Yahoo yang dapat diambil dari kolomfirebase.auth().currentUser.providerData[0].uid
atau dariresult.additionalUserInfo.profile
.Meskipun contoh di atas berfokus pada alur login, Anda juga dapat menautkan penyedia Yahoo ke pengguna yang ada menggunakan
linkWithPopup
/linkWithRedirect
. Misalnya, Anda dapat menautkan beberapa penyedia ke pengguna yang sama agar dapat login dengan salah satu penyedia tersebut.import { getAuth, linkWithPopup, OAuthProvider } from "firebase/auth"; const provider = new OAuthProvider('yahoo.com'); const auth = getAuth(); linkWithPopup(auth.currentUser, provider) .then((result) => { // Yahoo credential is linked to the current user. // IdP data available in result.additionalUserInfo.profile. // Get the OAuth access token and ID Token const credential = OAuthProvider.credentialFromResult(result); const accessToken = credential.accessToken; const idToken = credential.idToken; }) .catch((error) => { // Handle error. });
var provider = new firebase.auth.OAuthProvider('yahoo.com'); firebase.auth().currentUser.linkWithPopup(provider) .then((result) => { // Yahoo credential is linked to the current user. // IdP data available in result.additionalUserInfo.profile. // Yahoo OAuth access token can be retrieved by calling: // result.credential.accessToken // Yahoo OAuth ID token can be retrieved by calling: // result.credential.idToken }) .catch((error) => { // Handle error. });
Pola yang sama dapat digunakan dengan
reauthenticateWithPopup
/reauthenticateWithRedirect
, yang dapat digunakan untuk mengambil kredensial baru untuk operasi sensitif yang memerlukan login terbaru.import { getAuth, reauthenticateWithPopup, OAuthProvider } from "firebase/auth"; const provider = new OAuthProvider('yahoo.com'); const auth = getAuth(); reauthenticateWithPopup(auth.currentUser, provider) .then((result) => { // User is re-authenticated with fresh tokens minted and // should be able to perform sensitive operations like account // deletion and email or password update. // IdP data available in result.additionalUserInfo.profile. // Get the OAuth access token and ID Token const credential = OAuthProvider.credentialFromResult(result); const accessToken = credential.accessToken; const idToken = credential.idToken; }) .catch((error) => { // Handle error. });
var provider = new firebase.auth.OAuthProvider('yahoo.com'); firebase.auth().currentUser.reauthenticateWithPopup(provider) .then((result) => { // User is re-authenticated with fresh tokens minted and // should be able to perform sensitive operations like account // deletion and email or password update. // IdP data available in result.additionalUserInfo.profile. // Yahoo OAuth access token can be retrieved by calling: // result.credential.accessToken // Yahoo OAuth ID token can be retrieved by calling: // result.credential.idToken }) .catch((error) => { // Handle error. });
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 Yahoo) dengan email yang sudah
ada untuk penyedia pengguna Firebase lain (seperti Google), error
auth/account-exists-with-different-credential
akan ditampilkan beserta
objek AuthCredential
(kredensial Yahoo). Untuk menyelesaikan login ke
penyedia yang dimaksud, pengguna harus login terlebih dahulu ke penyedia yang ada (Google), lalu menautkan akunnya ke
AuthCredential
sebelumnya (kredensial Yahoo).
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, OAuthProvider, } from "firebase/auth"; try { // Step 1: User tries to sign in using Yahoo. let result = await signInWithPopup(getAuth(), new OAuthProvider()); } catch (error) { // Step 2: User's email already exists. if (error.code === "auth/account-exists-with-different-credential") { // The pending Yahoo 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 Yahoo 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
Tidak seperti penyedia OAuth lain yang didukung oleh Firebase, seperti Google, Facebook, dan Twitter, yang proses loginnya dapat langsung dilakukan dengan kredensial berbasis token akses OAuth, Firebase Auth tidak mendukung kemampuan yang sama untuk penyedia seperti Yahoo, karena server Firebase Auth tidak dapat memverifikasi audience token akses OAuth Yahoo. Ini adalah persyaratan keamanan yang penting serta dapat membuat situs dan aplikasi rentan terkena serangan replay, yaitu ketika token akses OAuth Yahoo yang diperoleh untuk satu project (penyerang) dapat digunakan untuk login ke project lain (korban). Sebagai gantinya, Firebase Auth menyediakan kemampuan untuk menangani seluruh alur OAuth dan pertukaran kode otorisasi menggunakan client ID dan rahasia klien OAuth yang dikonfigurasi dalam Firebase Console. Karena kode otorisasi hanya dapat digunakan bersama dengan client ID atau secret klien tertentu, kode otorisasi yang diperoleh untuk satu project tidak dapat digunakan dengan project lain.
Jika penyedia ini harus digunakan di lingkungan yang tidak didukung, library OAuth pihak ketiga dan autentikasi kustom Firebase perlu digunakan. Library OAuth pihak ketiga diperlukan untuk mengautentikasi penyedia, sedangkan autentikasi kustom Firebase diperlukan untuk menukar kredensial penyedia dengan token kustom.
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 Yahoo
Saat pembuatan 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 Yahoo 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 Yahoo 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. });