Questa pagina è stata tradotta dall'API Cloud Translation.

Autenticarsi utilizzando Yahoo con JavaScript

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 utilizzando gli 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 Auth .
Nella scheda Metodo di accesso abilitare il provider Yahoo .
Aggiungi l' ID client e il segreto client dalla console per sviluppatori di quel provider alla configurazione del provider:
1. 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 dell'API OpenID Connect: profile ed email .
2. 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 l'SDK JavaScript di Firebase.

Per gestire il flusso di accesso con l'SDK JavaScript di Firebase, procedi nel seguente modo:

Crea un'istanza di un OAuthProvider utilizzando l'ID provider yahoo.com .
Web modular API
Ulteriori informazioni sull'API Web modulare tree-shakeable e sull'aggiornamento dall'API con spazio dei nomi.
```
import { OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider('yahoo.com');auth_yahoo_provider_create.js
```
Web namespaced API
```
var provider = new firebase.auth.OAuthProvider('yahoo.com');yahoo-oauth.js
```
Facoltativo : specificare parametri OAuth personalizzati aggiuntivi che si desidera inviare con la richiesta OAuth.
Web modular API
Ulteriori informazioni sull'API Web modulare tree-shakeable e sull'aggiornamento dall'API con spazio dei nomi.
```
provider.setCustomParameters({
  // Prompt user to re-authenticate to Yahoo.
  prompt: 'login',
  // Localize to French.
  language: 'fr'
});  auth_yahoo_provider_params.js
```
Web namespaced API
```
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 passare i parametri richiesti da Firebase con setCustomParameters() . Questi parametri sono client_id , redirect_uri , response_type , scope e state .
Facoltativo : specificare ambiti OAuth 2.0 aggiuntivi oltre profile e email che si desidera richiedere al provider di autenticazione. Se la tua applicazione richiede l'accesso ai dati utente privati dalle API di Yahoo, dovrai richiedere le autorizzazioni per le API di Yahoo in Autorizzazioni API nella console per gli sviluppatori di Yahoo. Gli ambiti OAuth richiesti devono corrispondere esattamente a quelli preconfigurati nelle autorizzazioni API dell'app. Ad esempio, se l'accesso in lettura/scrittura è richiesto ai contatti utente ed è preconfigurato nelle autorizzazioni API dell'app, è necessario passare sdct-w invece dell'ambito OAuth di sola lettura sdct-r . In caso contrario, il flusso avrà esito negativo e verrà visualizzato un errore all'utente finale.
Web modular API
Ulteriori informazioni sull'API Web modulare tree-shakeable e sull'aggiornamento dall'API con spazio dei nomi.
```
// 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 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');yahoo-oauth.js
```
Per ulteriori informazioni, consulta la documentazione sugli ambiti di Yahoo .
Esegui l'autenticazione con Firebase utilizzando l'oggetto provider OAuth. Puoi chiedere agli 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
  Ulteriori informazioni sull'API Web modulare tree-shakeable e sull'aggiornamento dall'API con spazio dei nomi.
```
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 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.
  });yahoo-oauth.js
```
- Per accedere reindirizzando alla pagina di accesso, chiama signInWithRedirect :
Segui le best practice quando utilizzi signInWithRedirect , linkWithRedirect o reauthenticateWithRedirect .
```
  firebase.auth().signInWithRedirect(provider);
  
```
Dopo che l'utente ha completato l'accesso ed è tornato alla pagina, puoi ottenere il risultato dell'accesso chiamando getRedirectResult .
Web modular API
Ulteriori informazioni sull'API Web modulare tree-shakeable e sull'aggiornamento dall'API con spazio dei nomi.
```
import { getAuth, signInWithRedirect } from "firebase/auth";

const auth = getAuth();
signInWithRedirect(auth, provider);auth_yahoo_signin_redirect.js
```
Web namespaced API
```
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 di Yahoo .
Ad esempio, per ottenere le informazioni di base sul 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 .

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

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

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

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

Gestione degli errori di account esistenti con credenziali diverse

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

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


// Step 1.
// User tries to sign in to Yahoo.
auth.signInWithPopup(new firebase.auth.OAuthProvider('yahoo.com')).catch(function(error) {
  // An error happened.
  if (error.code === 'auth/account-exists-with-different-credential') {
    // Step 2.
    // User's email already exists.
    // The pending Yahoo credential.
    var pendingCred = error.credential;
    // The provider account's email address.
    var email = error.email;
    // Get sign-in methods for this email.
    auth.fetchSignInMethodsForEmail(email).then(function(methods) {
      // Step 3.
      // If the user has several sign-in methods,
      // the first method in the list will be the "recommended" method to use.
      if (methods[0] === 'password') {
        // Asks the user their password.
        // In real scenario, you should handle this asynchronously.
        var password = promptUserForPassword(); // TODO: implement promptUserForPassword.
        auth.signInWithEmailAndPassword(email, password).then(function(result) {
          // Step 4a.
          return result.user.linkWithCredential(pendingCred);
        }).then(function() {
          // Yahoo account successfully linked to the existing Firebase user.
          goToApp();
        });
        return;
      }
      // All the other cases are external providers.
      // Construct provider object for that provider.
      // TODO: implement getProviderForProviderId.
      var provider = getProviderForProviderId(methods[0]);
      // At this point, you should let the user know that they already have an account
      // but with a different provider, and let them validate the fact they want to
      // sign in with this provider.
      // Sign in to provider. Note: browsers usually block popup triggered asynchronously,
      // so in real scenario you should ask the user to click on a "continue" button
      // that will trigger the signInWithPopup.
      auth.signInWithPopup(provider).then(function(result) {
        // Remember that the user may have signed in with an account that has a different email
        // address than the first one. This can happen as Firebase doesn't control the provider's
        // sign in flow and the user is free to login using whichever account they own.
        // Step 4b.
        // Link to Yahoo credential.
        // As we have access to the pending credential, we can directly call the link method.
        result.user.linkAndRetrieveDataWithCredential(pendingCred).then(function(usercred) {
          // Yahoo account successfully linked to the existing Firebase user.
          goToApp();
        });
      });
    });
  }
});

Modalità reindirizzamento

Questo errore viene gestito in modo simile nella modalità di reindirizzamento, con la differenza che la credenziale in sospeso 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, dove l'accesso può essere ottenuto direttamente con credenziali basate su token di accesso OAuth, Firebase Auth non supporta la stessa funzionalità per provider come Yahoo a causa dell'impossibilità del Server Firebase Auth per verificare il pubblico dei token di accesso Yahoo OAuth. Questo è un requisito di sicurezza critico e potrebbe esporre applicazioni e siti Web a ripetere gli attacchi in cui un token di accesso OAuth di Yahoo ottenuto per un progetto (aggressore) può essere utilizzato per accedere a un altro progetto (vittima). Invece, Firebase Auth offre la possibilità di gestire l'intero flusso OAuth e lo scambio del codice di autorizzazione utilizzando l'ID client e il segreto OAuth configurati nella console Firebase. Poiché il codice di autorizzazione può essere utilizzato solo in combinazione con uno specifico ID cliente/segreto, 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 un'autenticazione personalizzata Firebase . Il primo è necessario per l'autenticazione con il provider e il secondo per scambiare le credenziali del provider con un token personalizzato.

Esegui l'autenticazione con Firebase in un'estensione di Chrome

Se stai creando un'app di estensione di Chrome, devi aggiungere il tuo ID estensione di Chrome:

Apri il tuo progetto nella console Firebase .
Nella sezione Autenticazione , apri la pagina Metodo di accesso .
Aggiungere un URI come il seguente all'elenco dei domini autorizzati:
```
chrome-extension://CHROME_EXTENSION_ID
```

Solo le operazioni popup ( signInWithPopup , linkWithPopup e reauthenticateWithPopup ) sono disponibili per le estensioni di Chrome, poiché le estensioni di Chrome non possono utilizzare i reindirizzamenti HTTP. Dovresti chiamare questi metodi da uno script di una pagina in background piuttosto che da un popup di azione del browser, poiché il popup di autenticazione annullerà il popup di azione del browser. I metodi popup possono essere utilizzati solo nelle estensioni che utilizzano Manifest V2 . Il più recente Manifest V3 consente solo script in background sotto forma di service worker, che non possono eseguire affatto le operazioni popup.

Nel file manifest dell'estensione di Chrome assicurati di aggiungere l'URL https://apis.google.com alla lista consentita content_security_policy .

Alla creazione del progetto, Firebase fornirà un sottodominio univoco per il tuo progetto: https://my-app-12345.firebaseapp.com .

Questo verrà utilizzato anche come meccanismo di reindirizzamento per l'accesso OAuth. Tale dominio dovrebbe essere consentito per tutti i provider OAuth supportati. Tuttavia, ciò significa che gli utenti potrebbero vedere quel dominio durante l'accesso a Yahoo prima di reindirizzare nuovamente all'applicazione: Continua su: https://my-app-12345.firebaseapp.com .

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

Segui i passaggi da 1 a 3 in Configurare il tuo dominio per l'hosting . Quando verifichi la proprietà del tuo dominio, Hosting fornisce 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 di Yahoo o nella pagina di configurazione di OAuth, autorizza 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 'my-app-12345.firebaseapp.com'.
  authDomain: 'auth.custom.domain.com',
  databaseURL: 'https://my-app-12345.firebaseio.com',
  projectId: 'my-app-12345',
  storageBucket: 'my-app-12345.appspot.com',
  messagingSenderId: '1234567890'
};
firebase.initializeApp(config);

Prossimi passi

Dopo che un utente ha effettuato 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 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 sul profilo dell'utente dall'oggetto User . Vedere Gestire gli utenti .
In Firebase Realtime Database and Cloud Storage Security Rules , 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 modular API

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 namespaced API

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

Autenticarsi utilizzando Yahoo con JavaScript

Prima di iniziare

Gestisci il flusso di accesso con l'SDK Firebase

Web modular API

Web namespaced API

Web modular API

Web namespaced API

Web modular API

Web namespaced API

Web modular API

Web namespaced API

Web modular API

Web namespaced API

Web modular API

Web namespaced API

Web modular API

Web namespaced API

Gestione degli errori di account esistenti con credenziali diverse

Modalità pop-up

Modalità reindirizzamento

Avanzate: gestisci il flusso di accesso manualmente

Esegui l'autenticazione con Firebase in un'estensione di Chrome

Personalizzazione del dominio di reindirizzamento per l'accesso a Yahoo

Prossimi passi

Web modular API

Web namespaced API