Autenticazione tramite Yahoo con JavaScript

Puoi consentire agli 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 consentire agli utenti di accedere utilizzando gli account Yahoo, devi prima attivare Yahoo come provider di accesso per il tuo progetto Firebase:

Aggiungi Firebase al tuo progetto JavaScript.
Nella Firebaseconsole, apri la sezione Auth.
Nella scheda Metodo di accesso, attiva il provider Yahoo.
Aggiungi l'ID cliente e il client secret della console per sviluppatori del provider alla configurazione del provider:
1. Per registrare un client OAuth Yahoo, segui la documentazione per sviluppatori Yahoo su come registrare un'applicazione web con Yahoo.
  
  Assicurati di selezionare le due autorizzazioni API OpenID Connect: profile e email.
2. Quando registri le app con questi provider, assicurati di registrare il dominio *.firebaseapp.com per il tuo progetto come dominio di reindirizzamento per la tua app.
Fai clic su Salva.

Gestire il flusso di accesso con l'SDK Firebase

Se stai creando un'app web, il modo più semplice per autenticare gli utenti con Firebase utilizzando i loro account Yahoo è gestire l'intero flusso di accesso con l'SDK Firebase JavaScript.

Per gestire il flusso di accesso con l'SDK Firebase JavaScript, segui questi passaggi:

Crea un'istanza di OAuthProvider utilizzando l'ID provider yahoo.com.

Web

import { OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider('yahoo.com');auth_yahoo_provider_create.js

Web

var provider = new firebase.auth.OAuthProvider('yahoo.com');yahoo-oauth.js

(Facoltativo) Specifica parametri OAuth personalizzati aggiuntivi che vuoi inviare con la richiesta OAuth.

Web

provider.setCustomParameters({
  // Prompt user to re-authenticate to Yahoo.
  prompt: 'login',
  // Localize to French.
  language: 'fr'
});  auth_yahoo_provider_params.js

Web

provider.setCustomParameters({
  // Prompt user to re-authenticate to Yahoo.
  prompt: 'login',
  // Localize to French.
  language: 'fr'
});  yahoo-oauth.js

Per i parametri supportati da Yahoo, consulta la documentazione di Yahoo OAuth. Tieni presente che non puoi trasmettere i parametri richiesti da Firebase con setCustomParameters(). Questi parametri sono client_id, redirect_uri, response_type, scope e state.

(Facoltativo): specifica ambiti OAuth 2.0 aggiuntivi oltre a profile e email che vuoi richiedere al provider di autenticazione. Se la tua applicazione richiede l'accesso ai dati privati degli utenti 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 viene richiesto l'accesso in lettura/scrittura ai contatti dell'utente e preconfigurato nelle autorizzazioni API dell'app, deve essere passato sdct-w anziché l'ambito OAuth di sola lettura sdct-r. In caso contrario, il flusso non andrà a buon fine e all'utente finale verrà mostrato un errore.
Web
```
// 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');auth_yahoo_provider_scopes.js
```
Web
```
// 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');yahoo-oauth.js
```
Per saperne di più, consulta la documentazione sugli ambiti di Yahoo.

Esegui l'autenticazione con Firebase utilizzando l'oggetto del provider OAuth. Puoi chiedere ai tuoi utenti di accedere con i loro account Yahoo aprendo una finestra popup o reindirizzando alla pagina di accesso. Il metodo di reindirizzamento è preferibile sui dispositivi mobili.

Per accedere con una finestra popup, chiama signInWithPopup:

Web

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.
  });auth_yahoo_signin_popup.js

Web

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.
  });yahoo-oauth.js

Per accedere tramite reindirizzamento alla pagina di accesso, chiama il numero signInWithRedirect:

  firebase.auth().signInWithRedirect(provider);

Dopo che l'utente ha completato l'accesso e torna alla pagina, puoi ottenere il risultato dell'accesso chiamando getRedirectResult.

Web

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

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

Web

firebase.auth().signInWithRedirect(provider);yahoo-oauth.js

Al termine, 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 campo firebase.auth().currentUser.providerData[0].uid o da result.additionalUserInfo.profile.

Mentre gli esempi precedenti si concentrano 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ù provider allo stesso utente, consentendogli di accedere con entrambi.

Web

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.
    });auth_yahoo_link_popup.js

Web

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.
    });yahoo-oauth.js

Lo stesso pattern può essere utilizzato con reauthenticateWithPopup/reauthenticateWithRedirect, che può essere utilizzato per recuperare credenziali aggiornate per operazioni sensibili che richiedono un accesso recente.

Web

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.
    });auth_yahoo_reauth_popup.js

Web

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.
    });yahoo-oauth.js

Gestione degli errori account-exists-with-different-credential

Se hai attivato l'impostazione Un account per indirizzo email nella console Firebase, quando un utente tenta di accedere a un provider (ad esempio Yahoo) con un'email già esistente per il provider di un altro utente Firebase (ad esempio Google), viene generato l'errore auth/account-exists-with-different-credential insieme a un oggetto AuthCredential (credenziali Yahoo). Per completare l'accesso al provider previsto, l'utente deve prima accedere al provider esistente (Google) e poi collegarsi alle credenziali AuthCredential (Yahoo) precedenti.

Se utilizzi signInWithPopup, puoi gestire gli errori auth/account-exists-with-different-credential con un codice come il seguente esempio:

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) {
  // ...
}

Modalità di reindirizzamento

Questo errore viene gestito in modo simile nella modalità di reindirizzamento, con la differenza che la credenziale in attesa deve essere memorizzata nella cache tra i reindirizzamenti di pagina (ad esempio, utilizzando l'archiviazione della sessione).

A differenza di altri provider OAuth supportati da Firebase, come Google, Facebook e Twitter, in cui l'accesso può essere ottenuto direttamente con le credenziali basate sul token di accesso OAuth, Firebase Auth non supporta la stessa funzionalità per provider come Yahoo a causa dell'impossibilità del server Firebase Auth di verificare il pubblico dei token di accesso OAuth di Yahoo. Si tratta di un requisito di sicurezza fondamentale che potrebbe esporre applicazioni e siti web ad attacchi di replay in cui un token di accesso OAuth di Yahoo ottenuto per un progetto (attaccante) può essere utilizzato per accedere a un altro progetto (vittima). Firebase Auth offre invece la possibilità di gestire l'intero flusso OAuth e lo scambio del codice di autorizzazione utilizzando l'ID client e il client secret OAuth configurati nella console Firebase. Poiché il codice di autorizzazione può essere utilizzato solo in combinazione con un ID client/secret specifico, un codice di autorizzazione ottenuto per un progetto non può essere utilizzato con un altro.

Se è necessario utilizzare questi provider in ambienti non supportati, è necessario utilizzare una libreria OAuth di terze parti e l'autenticazione personalizzata di Firebase. Il primo è necessario per l'autenticazione con il fornitore e il secondo per scambiare le credenziali del fornitore con un token personalizzato.

Eseguire l'autenticazione con Firebase in un'estensione Chrome

Se stai creando un'app di estensione di Chrome, consulta la guida ai documenti off-screen.

Al momento della creazione del progetto, Firebase eseguirà il provisioning di un sottodominio univoco per il tuo progetto: https://my-app-12345.firebaseapp.com.

Verrà utilizzato anche come meccanismo di reindirizzamento per l'accesso OAuth. Questo dominio deve essere consentito per tutti i provider OAuth supportati. Tuttavia, ciò significa che gli utenti potrebbero visualizzare il dominio durante l'accesso a Yahoo prima di essere reindirizzati all'applicazione: Continua su: https://my-app-12345.firebaseapp.com.

Per evitare di mostrare il tuo sottodominio, puoi configurare un dominio personalizzato con Firebase Hosting:

Segui i passaggi da 1 a 3 in Configurare il dominio per Hosting. Quando verifichi la proprietà del dominio, Hosting esegue il provisioning di un certificato SSL per il tuo dominio personalizzato.
Aggiungi il tuo dominio personalizzato all'elenco dei domini autorizzati nella console Firebase: auth.custom.domain.com.
Nella console per sviluppatori Yahoo o nella pagina di configurazione OAuth, inserisci nella lista consentita l'URL della pagina di reindirizzamento, che sarà accessibile sul tuo dominio personalizzato: https://auth.custom.domain.com/__/auth/handler.

Quando inizializzi la libreria JavaScript, specifica il tuo dominio personalizzato con il campo 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: 'PROJECT_ID.firebasestorage.app',
  messagingSenderId: 'SENDER_ID'
};
firebase.initializeApp(config);

Passaggi successivi

Dopo che un utente ha eseguito l'accesso per la prima volta, viene creato un nuovo account utente e collegato alle credenziali, ovvero nome utente e password, numero di telefono o informazioni del fornitore di autenticazione, con cui l'utente ha eseguito l'accesso. Questo nuovo account viene memorizzato 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.

Nelle tue app, il modo consigliato per conoscere lo stato di autenticazione dell'utente è impostare un observer sull'oggetto Auth. Puoi quindi ottenere le informazioni di base del profilo dell'utente dall'oggetto User. Vedi Gestire gli utenti.
Nelle regole di sicurezza di Firebase Realtime Database e Cloud Storage, puoi ottenere l'ID utente univoco dell'utente che ha eseguito 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, chiama signOut:

Web

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

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});auth_sign_out.js

Web

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});index.js

Autenticazione tramite Yahoo con JavaScript Mantieni tutto organizzato con le raccolte Salva e classifica i contenuti in base alle tue preferenze.