Puoi consentire ai tuoi utenti di autenticarsi con Firebase utilizzando provider OAuth come Yahoo integrando l'accesso OAuth generico nella tua app utilizzando l'SDK Firebase per eseguire il flusso di accesso end-to-end.
Prima di iniziare
Per accedere agli utenti che utilizzano account Yahoo, devi prima abilitare Yahoo come provider di accesso per il tuo progetto Firebase:
- Aggiungi Firebase al tuo progetto JavaScript .
- Nella console Firebase , apri la sezione Autenticazione .
- Nella scheda Metodo di accesso , abilita il provider Yahoo .
- Aggiungi l' ID client e il segreto client dalla console per sviluppatori di quel provider alla configurazione del provider:
Per registrare un client Yahoo OAuth, segui la documentazione per sviluppatori Yahoo sulla registrazione di un'applicazione Web con Yahoo .
Assicurati di selezionare le due autorizzazioni API OpenID Connect:
profile
edemail
.- Quando registri app con questi provider, assicurati di registrare il dominio
*.firebaseapp.com
per il tuo progetto come dominio di reindirizzamento per la tua app.
- Fare clic su Salva .
Gestisci il flusso di accesso con l'SDK Firebase
Se stai creando un'app Web, il modo più semplice per autenticare i tuoi utenti con Firebase utilizzando i loro account Yahoo è gestire l'intero flusso di accesso con Firebase JavaScript SDK.
Per gestire il flusso di accesso con l'SDK JavaScript di Firebase, procedi nel seguente modo:
Crea un'istanza di OAuthProvider utilizzando l'ID provider yahoo.com .
Web modular API
import { OAuthProvider } from "firebase/auth"; const provider = new OAuthProvider('yahoo.com');
Web namespaced API
var provider = new firebase.auth.OAuthProvider('yahoo.com');
Facoltativo : specifica parametri OAuth personalizzati aggiuntivi che desideri inviare con la richiesta OAuth.
Web modular API
provider.setCustomParameters({ // Prompt user to re-authenticate to Yahoo. prompt: 'login', // Localize to French. language: 'fr' });
Web namespaced API
provider.setCustomParameters({ // Prompt user to re-authenticate to Yahoo. prompt: 'login', // Localize to French. language: 'fr' });
Per i parametri supportati da Yahoo, consulta la documentazione di Yahoo OAuth . Tieni presente che non puoi passare i parametri richiesti da Firebase con
setCustomParameters()
. Questi parametri sono client_id , reindirizzamento_uri , risposta_tipo , ambito e stato .Facoltativo : specifica ulteriori ambiti OAuth 2.0 oltre
profile
eemail
che desideri richiedere al provider di autenticazione. Se la tua applicazione richiede l'accesso ai dati utente privati dalle API Yahoo, dovrai richiedere le autorizzazioni per le API Yahoo in Autorizzazioni API nella console per sviluppatori Yahoo. Gli ambiti OAuth richiesti devono corrispondere esattamente a quelli preconfigurati nelle autorizzazioni API dell'app. Ad esempio, se l'accesso in lettura/scrittura viene richiesto ai contatti dell'utente ed è preconfigurato nelle autorizzazioni API dell'app, è necessario passaresdct-w
anziché l'ambito OAuth di sola letturasdct-r
. In caso contrario, il flusso fallirà e verrà mostrato un errore all'utente finale.Web modular API
// 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');
Web namespaced API
// 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');
Per ulteriori informazioni, fare riferimento alla documentazione sugli ambiti Yahoo .
Autenticarsi con Firebase utilizzando l'oggetto provider OAuth. Puoi chiedere ai tuoi utenti di accedere con i loro account Yahoo aprendo una finestra pop-up o reindirizzando alla pagina di accesso. Il metodo di reindirizzamento è preferito sui dispositivi mobili.
Per accedere con una finestra pop-up, chiama
signInWithPopup
:Web modular API
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. });
Web namespaced API
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. });
Per accedere reindirizzando alla pagina di accesso, chiama
signInWithRedirect
:
Seguire le procedure consigliate quando si utilizza
signInWithRedirect
,linkWithRedirect
oreauthenticateWithRedirect
.firebase.auth().signInWithRedirect(provider);
Dopo che l'utente ha completato l'accesso ed è tornato alla pagina, è possibile ottenere il risultato dell'accesso chiamando
getRedirectResult
.Web modular API
import { getAuth, signInWithRedirect } from "firebase/auth"; const auth = getAuth(); signInWithRedirect(auth, provider);
Web namespaced API
firebase.auth().signInWithRedirect(provider);
Una volta completato con successo, il token ID OAuth e il token di accesso associati al provider possono essere recuperati dall'oggetto
firebase.auth.UserCredential
restituito.Utilizzando il token di accesso OAuth, puoi chiamare l' API Yahoo .
Ad esempio, per ottenere le informazioni di base del profilo, è possibile chiamare la seguente API REST:
curl -i -H "Authorization: Bearer ACCESS_TOKEN" https://social.yahooapis.com/v1/user/YAHOO_USER_UID/profile?format=json
Dove
YAHOO_USER_UID
è l'ID dell'utente Yahoo che può essere recuperato dal campofirebase.auth().currentUser.providerData[0].uid
o daresult.additionalUserInfo.profile
.Sebbene gli esempi precedenti si concentrino sui flussi di accesso, hai anche la possibilità di collegare un provider Yahoo a un utente esistente utilizzando
linkWithPopup
/linkWithRedirect
. Ad esempio, puoi collegare più fornitori allo stesso utente consentendo loro di accedere con entrambi.Web modular API
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. });
Web namespaced API
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. });
Lo stesso modello può essere utilizzato con
reauthenticateWithPopup
/reauthenticateWithRedirect
che può essere utilizzato per recuperare nuove credenziali per operazioni sensibili che richiedono un accesso recente.Web modular API
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. });
Web namespaced API
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. });
Autenticati con Firebase in un'estensione di Chrome
Se stai creando un'app di estensione per Chrome, consulta la guida Offscreen Documents .
Prossimi passi
Dopo che un utente accede per la prima volta, viene creato un nuovo account utente e collegato alle credenziali, ovvero nome utente e password, numero di telefono o informazioni sul provider di autenticazione, con cui l'utente ha effettuato l'accesso. Questo nuovo account viene archiviato come parte del tuo progetto Firebase e può essere utilizzato per identificare un utente in ogni app del tuo progetto, indipendentemente dalla modalità di accesso dell'utente.
Nelle tue app, il modo consigliato per conoscere lo stato di autenticazione del tuo utente è impostare un osservatore sull'oggetto
Auth
. È quindi possibile ottenere le informazioni di base del profilo dell'utente dall'oggettoUser
. Vedi Gestisci utenti .Nel tuo Firebase Realtime Database e Cloud Storage Security Rules , puoi ottenere l'ID utente univoco dell'utente che ha effettuato l'accesso dalla variabile
auth
e utilizzarlo per controllare a quali dati può accedere un utente.
Puoi consentire agli utenti di accedere alla tua app utilizzando più provider di autenticazione collegando le credenziali del provider di autenticazione a un account utente esistente.
Per disconnettere un utente, chiamare signOut
:
Web modular API
import { getAuth, signOut } from "firebase/auth"; const auth = getAuth(); signOut(auth).then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });
Web namespaced API
firebase.auth().signOut().then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });