Questa pagina è stata tradotta dall'API Cloud Translation.

Autenticazione tramite Yahoo con JavaScript

Puoi consentire ai tuoi utenti di eseguire l'autenticazione con Firebase utilizzando provider OAuth come Yahoo integrando l'accesso OAuth generico nell'app utilizzando l'SDK Firebase per di eseguire il flusso di accesso end-to-end.

Prima di iniziare

Per far accedere gli utenti utilizzando gli account Yahoo, devi prima abilitare Yahoo per le credenziali di accesso per il tuo progetto Firebase:

Aggiungi Firebase al tuo progetto JavaScript.
Nella console Firebase, apri la sezione Autorizzazione.
Nella scheda Metodo di accesso, attiva il provider Yahoo.
Aggiungi al campo l'ID client e il client secret dalla console per gli sviluppatori del provider. configurazione del provider:
1. Per registrare un client OAuth di Yahoo, 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 e email.
2. Quando registri app con questi fornitori, assicurati di registrare il dominio *.firebaseapp.com per il tuo progetto come dominio di reindirizzamento per dell'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 i tuoi 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:

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 i parametri OAuth aggiuntivi che vuoi personalizzare. da inviare con la richiesta OAuth.
Web

Impara Scopri di più sull'API web modulare con gestione ad albero e eseguire l'upgrade 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
```
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 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: specifica ambiti OAuth 2.0 aggiuntivi oltre a profile e email che vuoi richiedere al provider di autenticazione. Se le tue richiede l'accesso a dati utente privati dalle API di Yahoo, dovrai devi richiedere le autorizzazioni alle API di Yahoo nella sezione Autorizzazioni API della Developer Console Yahoo. Gli ambiti OAuth richiesti devono essere corrispondenze esatte quelli preconfigurati nelle autorizzazioni API dell'app. Ad esempio, se, in lettura/scrittura l'accesso è richiesto ai contatti degli utenti e preconfigurato nell'API dell'app autorizzazioni, è necessario trasmettere sdct-w anziché l'ambito OAuth di sola lettura sdct-r. In caso contrario, il flusso non andrà a buon fine e verrà mostrato un errore al prompt per l'utente finale.
Web

Impara Scopri di più sull'API web modulare con gestione ad albero e eseguire l'upgrade 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
```
// 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 Yahoo.

Esegui l'autenticazione con Firebase utilizzando l'oggetto provider OAuth. Puoi richiedere ai tuoi utenti di accedere con i propri account Yahoo aprendo un o reindirizzando alla pagina di accesso. Il metodo di reindirizzamento è preferito 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 reindirizzando alla pagina di accesso, chiama 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 dell'operazione, 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, la seguente API REST può essere chiamato:

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 è possibile recuperare da il campo firebase.auth().currentUser.providerData[0].uid o da result.additionalUserInfo.profile.

Sebbene gli esempi precedenti si concentrino sui flussi di accesso, sono disponibili anche di collegare un provider Yahoo a un utente esistente utilizzando linkWithPopup/linkWithRedirect. Ad esempio, puoi collegare più provider allo stesso utente consentendo loro di accedere con uno dei due.

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 usato reauthenticateWithPopup/reauthenticateWithRedirect che può essere utilizzata per recuperare nuove credenziali per le operazioni sensibili che richiedono .

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-esistenti-con-credenziali-diverse

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 indirizzo email che esiste già 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 (credenziale Yahoo). Per completare l'accesso al il fornitore previsto, l'utente deve prima accedere al fornitore esistente (Google) e poi collegarsi al precedente AuthCredential (credenziale Yahoo).

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

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 il valore la credenziale deve essere memorizzata nella cache tra reindirizzamenti di pagina (ad esempio, usando la memoria di sessione).

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

Se è necessario utilizzare questi provider in ambienti non supportati, libreria OAuth di terze parti Autenticazione personalizzata Firebase deve essere usato. Il primo è necessario per l'autenticazione con il provider e la seconda per scambiare la credenziale del fornitore con un token personalizzato.

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

Se stai sviluppando un'app di estensione di Chrome, consulta la Guida ai documenti fuori schermo.

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. Quel dominio dovrebbe essere consentito per tutti i provider OAuth supportati. Tuttavia, gli utenti potrebbero notare che dominio durante l'accesso a Yahoo prima del reindirizzamento all'applicazione: Continua su: https://my-app-12345.firebaseapp.com.

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

Segui i passaggi da 1 a 3 in Configura il dominio per Hosting. Quando esegui la verifica 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 gli sviluppatori di Yahoo o nella pagina di configurazione di OAuth, autorizza l'URL della pagina di reindirizzamento. che saranno accessibili sul tuo dominio personalizzato: https://auth.custom.domain.com/__/auth/handler.

Quando inizializza la libreria JavaScript, specifica il 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);

Passaggi successivi

Dopo che un utente ha eseguito l'accesso per la prima volta, viene creato un nuovo account utente e collegati alle credenziali, ovvero nome utente, password, numero o informazioni del provider di autenticazione, ovvero l'utente con cui ha eseguito l'accesso. Questo nuovo viene archiviato come parte del progetto Firebase e può essere utilizzato per identificare a un utente in ogni app del progetto, a prescindere da come esegue l'accesso.

Nelle tue app, il modo consigliato per conoscere lo stato di autenticazione dell'utente è imposta un osservatore sull'oggetto Auth. Puoi quindi ottenere l'input dell'utente informazioni di base del profilo dall'oggetto User. Consulta Gestire gli utenti.
In Firebase Realtime Database e Cloud Storage Regole di sicurezza, puoi ottieni l'ID utente unico dell'utente che ha eseguito l'accesso dalla variabile auth, e usarli per controllare i dati a cui un utente può accedere.

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

Prima di iniziare

Gestire il flusso di accesso con l'SDK Firebase

Web

Web

Web

Web

Web

Web

Web

Web

Web

Web

Web

Web

Web

Web

Gestione degli errori account-esistenti-con-credenziali-diverse

Modalità popup

Modalità di reindirizzamento

Impostazioni avanzate: gestire manualmente il flusso di accesso

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

Personalizzazione del dominio di reindirizzamento per l'accesso a Yahoo

Passaggi successivi

Web

Web