Questa pagina è stata tradotta dall'API Cloud Translation.

Autenticarsi utilizzando Twitter in JavaScript

Puoi consentire ai tuoi utenti di autenticarsi con Firebase utilizzando i loro account Twitter integrando l'autenticazione Twitter nella tua app. Puoi integrare l'autenticazione di Twitter utilizzando l'SDK di Firebase per eseguire il flusso di accesso oppure eseguendo manualmente il flusso OAuth di Twitter e passando il token di accesso e il segreto risultanti a Firebase.

Prima di iniziare

Aggiungi Firebase al tuo progetto JavaScript .
Nella console Firebase , apri la sezione Autenticazione .
Nella scheda Metodo di accesso , abilita il provider Twitter .
Aggiungi la chiave API e il segreto API dalla console per sviluppatori di quel provider alla configurazione del provider:
1. Registra la tua app come applicazione per sviluppatori su Twitter e ottieni la chiave API OAuth e il segreto API della tua app.
2. Assicurati che l'URI di reindirizzamento OAuth Firebase (ad esempio my-app-12345.firebaseapp.com/__/auth/handler ) sia impostato come URL di richiamata di autorizzazione nella pagina delle impostazioni dell'app nella configurazione dell'app Twitter .
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 Twitter è gestire il flusso di accesso con Firebase JavaScript SDK. (Se desideri autenticare un utente in Node.js o in un altro ambiente diverso dal browser, devi gestire manualmente il flusso di accesso.)

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

Crea un'istanza dell'oggetto provider Twitter:

Web modular API

import { TwitterAuthProvider } from "firebase/auth";

const provider = new TwitterAuthProvider();auth_twitter_provider_create.js

Web namespaced API

var provider = new firebase.auth.TwitterAuthProvider();twitter.js

Facoltativo : per localizzare il flusso OAuth del provider nella lingua preferita dell'utente senza passare esplicitamente i parametri OAuth personalizzati pertinenti, aggiorna il codice della lingua sull'istanza Auth prima di avviare il flusso OAuth. Per esempio:
Web modular API
Scopri di più sull'API Web modulare modificabile ad albero e sull'aggiornamento dall'API con spazio dei nomi.
```
import { getAuth } from "firebase/auth";

const auth = getAuth();
auth.languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// auth.useDeviceLanguage();auth_set_language_code.js
```
Web namespaced API
```
firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();index.js
```
Facoltativo : specifica parametri aggiuntivi del provider OAuth personalizzati che desideri inviare con la richiesta OAuth. Per aggiungere un parametro personalizzato, chiama setCustomParameters sul provider inizializzato con un oggetto contenente la chiave come specificato dalla documentazione del provider OAuth e il valore corrispondente. Per esempio:
Web modular API
Scopri di più sull'API Web modulare modificabile ad albero e sull'aggiornamento dall'API con spazio dei nomi.
```
provider.setCustomParameters({
  'lang': 'es'
});auth_twitter_provider_params.js
```
Web namespaced API
```
provider.setCustomParameters({
  'lang': 'es'
});twitter.js
```
I parametri OAuth obbligatori e riservati non sono consentiti e verranno ignorati. Per ulteriori dettagli, vedere il riferimento al provider di autenticazione .

Autenticarsi con Firebase utilizzando l'oggetto provider Twitter. Puoi chiedere ai tuoi utenti di accedere con i loro account Twitter 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, TwitterAuthProvider } from "firebase/auth";

const auth = getAuth();
signInWithPopup(auth, provider)
  .then((result) => {
    // This gives you a the Twitter OAuth 1.0 Access Token and Secret.
    // You can use these server side with your app's credentials to access the Twitter API.
    const credential = TwitterAuthProvider.credentialFromResult(result);
    const token = credential.accessToken;
    const secret = credential.secret;

    // The signed-in user info.
    const user = result.user;
    // IdP data available using getAdditionalUserInfo(result)
    // ...
  }).catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.customData.email;
    // The AuthCredential type that was used.
    const credential = TwitterAuthProvider.credentialFromError(error);
    // ...
  });auth_twitter_signin_popup.js

Web namespaced API

firebase
  .auth()
  .signInWithPopup(provider)
  .then((result) => {
    /** @type {firebase.auth.OAuthCredential} */
    var credential = result.credential;

    // This gives you a the Twitter OAuth 1.0 Access Token and Secret.
    // You can use these server side with your app's credentials to access the Twitter API.
    var token = credential.accessToken;
    var secret = credential.secret;

    // The signed-in user info.
    var user = result.user;
    // IdP data available in result.additionalUserInfo.profile.
      // ...
  }).catch((error) => {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    // The email of the user's account used.
    var email = error.email;
    // The firebase.auth.AuthCredential type that was used.
    var credential = error.credential;
    // ...
  });twitter.js

Tieni inoltre presente che puoi recuperare il token OAuth del provider Twitter che può essere utilizzato per recuperare dati aggiuntivi utilizzando le API di Twitter.

Qui è anche possibile rilevare e gestire gli errori. Per un elenco dei codici di errore, dai un'occhiata ai documenti di riferimento sull'autenticazione .

Per accedere reindirizzando alla pagina di accesso, chiama signInWithRedirect : segui le best practice quando utilizzi "signInWithRedirect".

Web modular API

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

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

Web namespaced API

firebase.auth().signInWithRedirect(provider);index.js

Quindi, puoi anche recuperare il token OAuth del provider Twitter chiamando getRedirectResult quando viene caricata la pagina:

Web modular API

import { getAuth, getRedirectResult, TwitterAuthProvider } from "firebase/auth";

const auth = getAuth();
getRedirectResult(auth)
  .then((result) => {
    // This gives you a the Twitter OAuth 1.0 Access Token and Secret.
    // You can use these server side with your app's credentials to access the Twitter API.
    const credential = TwitterAuthProvider.credentialFromResult(result);
    const token = credential.accessToken;
    const secret = credential.secret;
    // ...

    // The signed-in user info.
    const user = result.user;
    // IdP data available using getAdditionalUserInfo(result)
    // ...
  }).catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.customData.email;
    // The AuthCredential type that was used.
    const credential = TwitterAuthProvider.credentialFromError(error);
    // ...
  });auth_twitter_signin_redirect_result.js

Web namespaced API

firebase.auth()
  .getRedirectResult()
  .then((result) => {
    if (result.credential) {
      /** @type {firebase.auth.OAuthCredential} */
      var credential = result.credential;

      // This gives you a the Twitter OAuth 1.0 Access Token and Secret.
      // You can use these server side with your app's credentials to access the Twitter API.
      var token = credential.accessToken;
      var secret = credential.secret;
      // ...
    }

    // The signed-in user info.
    var user = result.user;
    // IdP data available in result.additionalUserInfo.profile.
      // ...
  }).catch((error) => {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    // The email of the user's account used.
    var email = error.email;
    // The firebase.auth.AuthCredential type that was used.
    var credential = error.credential;
    // ...
  });twitter.js

Qui è anche possibile rilevare e gestire gli errori. Per un elenco dei codici di errore, dai un'occhiata ai documenti di riferimento sull'autenticazione .

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 Twitter) con un indirizzo email già esistente per il provider di un altro utente Firebase (come Google), viene visualizzato l'errore auth/account-exists-with-different-credential viene generato insieme a un oggetto AuthCredential (token e segreto oauth di Twitter). Per completare l'accesso al provider desiderato, l'utente deve prima accedere al provider esistente (Google) e quindi collegarsi AuthCredential precedente (token e segreto oauth di Twitter).

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

import {
  getAuth,
  linkWithCredential,
  signInWithPopup,
  TwitterAuthProvider,
} from "firebase/auth";

try {
  // Step 1: User tries to sign in using Twitter.
  let result = await signInWithPopup(getAuth(), new TwitterAuthProvider());
} catch (error) {
  // Step 2: User's email already exists.
  if (error.code === "auth/account-exists-with-different-credential") {
    // The pending Twitter 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 Twitter 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à 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 della pagina (ad esempio, utilizzando l'archiviazione della sessione).

Gestire manualmente il flusso di accesso

Puoi anche autenticarti con Firebase utilizzando un account Twitter gestendo il flusso di accesso chiamando gli endpoint OAuth di Twitter:

Integra l'autenticazione Twitter nella tua app seguendo la documentazione dello sviluppatore . Al termine del flusso di accesso a Twitter, riceverai un token di accesso OAuth e un segreto OAuth.
Se devi accedere a un'applicazione Node.js, invia il token di accesso OAuth e il segreto OAuth all'applicazione Node.js.
Dopo che un utente ha effettuato l'accesso con Twitter, scambia il token di accesso OAuth e il segreto OAuth con una credenziale Firebase:
```
var credential = firebase.auth.TwitterAuthProvider.credential(token, secret);
```

Autenticarsi con Firebase utilizzando le credenziali Firebase:

Web modular API

import { getAuth, signInWithCredential, FacebookAuthProvider } from "firebase/auth";

// Sign in with the credential from the Facebook user.
const auth = getAuth();
signInWithCredential(auth, credential)
  .then((result) => {
    // Signed in 
    const credential = FacebookAuthProvider.credentialFromResult(result);
  })
  .catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.customData.email;
    // The AuthCredential type that was used.
    const credential = FacebookAuthProvider.credentialFromError(error);
    // ...
  });auth_facebook_signin_credential.js

Web namespaced API

// Sign in with the credential from the Facebook user.
firebase.auth().signInWithCredential(credential)
  .then((result) => {
    // Signed in       
    var credential = result.credential;
    // ...
  })
  .catch((error) => {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    // The email of the user's account used.
    var email = error.email;
    // The firebase.auth.AuthCredential type that was used.
    var credential = error.credential;
    // ...
  });facebook.js

Autenticati con Firebase in un'estensione di Chrome

Se stai creando un'app di estensione per Chrome, consulta la guida Offscreen Documents .

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

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

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

Segui i passaggi da 1 a 3 in Configura 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 Twitter o nella pagina di configurazione di OAuth, inserisci nella whitelist 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 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'oggetto User . 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.
});auth_sign_out.js

Web namespaced API

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

Prima di iniziare

Aggiungi Firebase al tuo progetto JavaScript .
Nella console Firebase , apri la sezione Autenticazione .
Nella scheda Metodo di accesso , abilita il provider Twitter .
Aggiungi la chiave API e il segreto API dalla console per sviluppatori di quel provider alla configurazione del provider:
1. Registra la tua app come applicazione per sviluppatori su Twitter e ottieni la chiave API OAuth e il segreto API della tua app.
2. Assicurati che l'URI di reindirizzamento OAuth Firebase (ad esempio my-app-12345.firebaseapp.com/__/auth/handler ) sia impostato come URL di richiamata di autorizzazione nella pagina delle impostazioni dell'app nella configurazione dell'app Twitter .
Fare clic su Salva .

Gestisci il flusso di accesso con l'SDK Firebase

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

Crea un'istanza dell'oggetto provider Twitter:

Web modular API

import { TwitterAuthProvider } from "firebase/auth";

const provider = new TwitterAuthProvider();auth_twitter_provider_create.js

Web namespaced API

var provider = new firebase.auth.TwitterAuthProvider();twitter.js

Facoltativo : per localizzare il flusso OAuth del provider nella lingua preferita dell'utente senza passare esplicitamente i parametri OAuth personalizzati pertinenti, aggiorna il codice della lingua sull'istanza Auth prima di avviare il flusso OAuth. Per esempio:
Web modular API
Scopri di più sull'API Web modulare modificabile ad albero e sull'aggiornamento dall'API con spazio dei nomi.
```
import { getAuth } from "firebase/auth";

const auth = getAuth();
auth.languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// auth.useDeviceLanguage();auth_set_language_code.js
```
Web namespaced API
```
firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();index.js
```
Facoltativo : specifica parametri aggiuntivi del provider OAuth personalizzati che desideri inviare con la richiesta OAuth. Per aggiungere un parametro personalizzato, chiama setCustomParameters sul provider inizializzato con un oggetto contenente la chiave come specificato dalla documentazione del provider OAuth e il valore corrispondente. Per esempio:
Web modular API
Scopri di più sull'API Web modulare modificabile ad albero e sull'aggiornamento dall'API con spazio dei nomi.
```
provider.setCustomParameters({
  'lang': 'es'
});auth_twitter_provider_params.js
```
Web namespaced API
```
provider.setCustomParameters({
  'lang': 'es'
});twitter.js
```
I parametri OAuth obbligatori e riservati non sono consentiti e verranno ignorati. Per ulteriori dettagli, vedere il riferimento al provider di autenticazione .

Per accedere con una finestra pop-up, chiama signInWithPopup :

Web modular API

import { getAuth, signInWithPopup, TwitterAuthProvider } from "firebase/auth";

const auth = getAuth();
signInWithPopup(auth, provider)
  .then((result) => {
    // This gives you a the Twitter OAuth 1.0 Access Token and Secret.
    // You can use these server side with your app's credentials to access the Twitter API.
    const credential = TwitterAuthProvider.credentialFromResult(result);
    const token = credential.accessToken;
    const secret = credential.secret;

    // The signed-in user info.
    const user = result.user;
    // IdP data available using getAdditionalUserInfo(result)
    // ...
  }).catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.customData.email;
    // The AuthCredential type that was used.
    const credential = TwitterAuthProvider.credentialFromError(error);
    // ...
  });auth_twitter_signin_popup.js

Web namespaced API

firebase
  .auth()
  .signInWithPopup(provider)
  .then((result) => {
    /** @type {firebase.auth.OAuthCredential} */
    var credential = result.credential;

    // This gives you a the Twitter OAuth 1.0 Access Token and Secret.
    // You can use these server side with your app's credentials to access the Twitter API.
    var token = credential.accessToken;
    var secret = credential.secret;

    // The signed-in user info.
    var user = result.user;
    // IdP data available in result.additionalUserInfo.profile.
      // ...
  }).catch((error) => {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    // The email of the user's account used.
    var email = error.email;
    // The firebase.auth.AuthCredential type that was used.
    var credential = error.credential;
    // ...
  });twitter.js

Tieni inoltre presente che puoi recuperare il token OAuth del provider Twitter che può essere utilizzato per recuperare dati aggiuntivi utilizzando le API di Twitter.

Qui è anche possibile rilevare e gestire gli errori. Per un elenco dei codici di errore, dai un'occhiata ai documenti di riferimento sull'autenticazione .

Per accedere reindirizzando alla pagina di accesso, chiama signInWithRedirect : segui le best practice quando utilizzi "signInWithRedirect".

Web modular API

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

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

Web namespaced API

firebase.auth().signInWithRedirect(provider);index.js

Quindi, puoi anche recuperare il token OAuth del provider Twitter chiamando getRedirectResult quando viene caricata la pagina:

Web modular API

import { getAuth, getRedirectResult, TwitterAuthProvider } from "firebase/auth";

const auth = getAuth();
getRedirectResult(auth)
  .then((result) => {
    // This gives you a the Twitter OAuth 1.0 Access Token and Secret.
    // You can use these server side with your app's credentials to access the Twitter API.
    const credential = TwitterAuthProvider.credentialFromResult(result);
    const token = credential.accessToken;
    const secret = credential.secret;
    // ...

    // The signed-in user info.
    const user = result.user;
    // IdP data available using getAdditionalUserInfo(result)
    // ...
  }).catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.customData.email;
    // The AuthCredential type that was used.
    const credential = TwitterAuthProvider.credentialFromError(error);
    // ...
  });auth_twitter_signin_redirect_result.js

Web namespaced API

firebase.auth()
  .getRedirectResult()
  .then((result) => {
    if (result.credential) {
      /** @type {firebase.auth.OAuthCredential} */
      var credential = result.credential;

      // This gives you a the Twitter OAuth 1.0 Access Token and Secret.
      // You can use these server side with your app's credentials to access the Twitter API.
      var token = credential.accessToken;
      var secret = credential.secret;
      // ...
    }

    // The signed-in user info.
    var user = result.user;
    // IdP data available in result.additionalUserInfo.profile.
      // ...
  }).catch((error) => {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    // The email of the user's account used.
    var email = error.email;
    // The firebase.auth.AuthCredential type that was used.
    var credential = error.credential;
    // ...
  });twitter.js

Qui è anche possibile rilevare e gestire gli errori. Per un elenco dei codici di errore, dai un'occhiata ai documenti di riferimento sull'autenticazione .

Gestione degli errori di account esistenti con credenziali diverse

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

import {
  getAuth,
  linkWithCredential,
  signInWithPopup,
  TwitterAuthProvider,
} from "firebase/auth";

try {
  // Step 1: User tries to sign in using Twitter.
  let result = await signInWithPopup(getAuth(), new TwitterAuthProvider());
} catch (error) {
  // Step 2: User's email already exists.
  if (error.code === "auth/account-exists-with-different-credential") {
    // The pending Twitter 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 Twitter 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à reindirizzamento

Gestire manualmente il flusso di accesso

Puoi anche autenticarti con Firebase utilizzando un account Twitter gestendo il flusso di accesso chiamando gli endpoint OAuth di Twitter:

Integra l'autenticazione Twitter nella tua app seguendo la documentazione dello sviluppatore . Al termine del flusso di accesso a Twitter, riceverai un token di accesso OAuth e un segreto OAuth.
Se devi accedere a un'applicazione Node.js, invia il token di accesso OAuth e il segreto OAuth all'applicazione Node.js.
Dopo che un utente ha effettuato l'accesso con Twitter, scambia il token di accesso OAuth e il segreto OAuth con una credenziale Firebase:
```
var credential = firebase.auth.TwitterAuthProvider.credential(token, secret);
```

Autenticarsi con Firebase utilizzando le credenziali Firebase:

Web modular API

import { getAuth, signInWithCredential, FacebookAuthProvider } from "firebase/auth";

// Sign in with the credential from the Facebook user.
const auth = getAuth();
signInWithCredential(auth, credential)
  .then((result) => {
    // Signed in 
    const credential = FacebookAuthProvider.credentialFromResult(result);
  })
  .catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.customData.email;
    // The AuthCredential type that was used.
    const credential = FacebookAuthProvider.credentialFromError(error);
    // ...
  });auth_facebook_signin_credential.js

Web namespaced API

// Sign in with the credential from the Facebook user.
firebase.auth().signInWithCredential(credential)
  .then((result) => {
    // Signed in       
    var credential = result.credential;
    // ...
  })
  .catch((error) => {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    // The email of the user's account used.
    var email = error.email;
    // The firebase.auth.AuthCredential type that was used.
    var credential = error.credential;
    // ...
  });facebook.js

Autenticati con Firebase in un'estensione di Chrome

Se stai creando un'app di estensione per Chrome, consulta la guida Offscreen Documents .

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

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

Segui i passaggi da 1 a 3 in Configura 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 Twitter o nella pagina di configurazione di OAuth, inserisci nella whitelist 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

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'oggetto User . 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.
});auth_sign_out.js

Web namespaced API

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

Prima di iniziare

Aggiungi Firebase al tuo progetto JavaScript .
Nella console Firebase , apri la sezione Autenticazione .
Nella scheda Metodo di accesso , abilita il provider Twitter .
Aggiungi la chiave API e il segreto API dalla console per sviluppatori di quel provider alla configurazione del provider:
1. Registra la tua app come applicazione per sviluppatori su Twitter e ottieni la chiave API OAuth e il segreto API della tua app.
2. Assicurati che l'URI di reindirizzamento OAuth Firebase (ad esempio my-app-12345.firebaseapp.com/__/auth/handler ) sia impostato come URL di richiamata di autorizzazione nella pagina delle impostazioni dell'app nella configurazione dell'app Twitter .
Fare clic su Salva .

Gestisci il flusso di accesso con l'SDK Firebase

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

Crea un'istanza dell'oggetto provider Twitter:

Web modular API

import { TwitterAuthProvider } from "firebase/auth";

const provider = new TwitterAuthProvider();auth_twitter_provider_create.js

Web namespaced API

var provider = new firebase.auth.TwitterAuthProvider();twitter.js

Facoltativo : per localizzare il flusso OAuth del provider nella lingua preferita dell'utente senza passare esplicitamente i parametri OAuth personalizzati pertinenti, aggiorna il codice della lingua sull'istanza Auth prima di avviare il flusso OAuth. Per esempio:
Web modular API
Scopri di più sull'API Web modulare modificabile ad albero e sull'aggiornamento dall'API con spazio dei nomi.
```
import { getAuth } from "firebase/auth";

const auth = getAuth();
auth.languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// auth.useDeviceLanguage();auth_set_language_code.js
```
Web namespaced API
```
firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();index.js
```
Facoltativo : specifica parametri aggiuntivi del provider OAuth personalizzati che desideri inviare con la richiesta OAuth. Per aggiungere un parametro personalizzato, chiama setCustomParameters sul provider inizializzato con un oggetto contenente la chiave come specificato dalla documentazione del provider OAuth e il valore corrispondente. Per esempio:
Web modular API
Scopri di più sull'API Web modulare modificabile ad albero e sull'aggiornamento dall'API con spazio dei nomi.
```
provider.setCustomParameters({
  'lang': 'es'
});auth_twitter_provider_params.js
```
Web namespaced API
```
provider.setCustomParameters({
  'lang': 'es'
});twitter.js
```
I parametri OAuth obbligatori e riservati non sono consentiti e verranno ignorati. Per ulteriori dettagli, vedere il riferimento al provider di autenticazione .

Per accedere con una finestra pop-up, chiama signInWithPopup :

Web modular API

import { getAuth, signInWithPopup, TwitterAuthProvider } from "firebase/auth";

const auth = getAuth();
signInWithPopup(auth, provider)
  .then((result) => {
    // This gives you a the Twitter OAuth 1.0 Access Token and Secret.
    // You can use these server side with your app's credentials to access the Twitter API.
    const credential = TwitterAuthProvider.credentialFromResult(result);
    const token = credential.accessToken;
    const secret = credential.secret;

    // The signed-in user info.
    const user = result.user;
    // IdP data available using getAdditionalUserInfo(result)
    // ...
  }).catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.customData.email;
    // The AuthCredential type that was used.
    const credential = TwitterAuthProvider.credentialFromError(error);
    // ...
  });auth_twitter_signin_popup.js

Web namespaced API

firebase
  .auth()
  .signInWithPopup(provider)
  .then((result) => {
    /** @type {firebase.auth.OAuthCredential} */
    var credential = result.credential;

    // This gives you a the Twitter OAuth 1.0 Access Token and Secret.
    // You can use these server side with your app's credentials to access the Twitter API.
    var token = credential.accessToken;
    var secret = credential.secret;

    // The signed-in user info.
    var user = result.user;
    // IdP data available in result.additionalUserInfo.profile.
      // ...
  }).catch((error) => {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    // The email of the user's account used.
    var email = error.email;
    // The firebase.auth.AuthCredential type that was used.
    var credential = error.credential;
    // ...
  });twitter.js

Tieni inoltre presente che puoi recuperare il token OAuth del provider Twitter che può essere utilizzato per recuperare dati aggiuntivi utilizzando le API di Twitter.

Qui è anche possibile rilevare e gestire gli errori. Per un elenco dei codici di errore, dai un'occhiata ai documenti di riferimento sull'autenticazione .

Per accedere reindirizzando alla pagina di accesso, chiama signInWithRedirect : segui le best practice quando utilizzi "signInWithRedirect".

Web modular API

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

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

Web namespaced API

firebase.auth().signInWithRedirect(provider);index.js

Quindi, puoi anche recuperare il token OAuth del provider Twitter chiamando getRedirectResult quando viene caricata la pagina:

Web modular API

import { getAuth, getRedirectResult, TwitterAuthProvider } from "firebase/auth";

const auth = getAuth();
getRedirectResult(auth)
  .then((result) => {
    // This gives you a the Twitter OAuth 1.0 Access Token and Secret.
    // You can use these server side with your app's credentials to access the Twitter API.
    const credential = TwitterAuthProvider.credentialFromResult(result);
    const token = credential.accessToken;
    const secret = credential.secret;
    // ...

    // The signed-in user info.
    const user = result.user;
    // IdP data available using getAdditionalUserInfo(result)
    // ...
  }).catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.customData.email;
    // The AuthCredential type that was used.
    const credential = TwitterAuthProvider.credentialFromError(error);
    // ...
  });auth_twitter_signin_redirect_result.js

Web namespaced API

firebase.auth()
  .getRedirectResult()
  .then((result) => {
    if (result.credential) {
      /** @type {firebase.auth.OAuthCredential} */
      var credential = result.credential;

      // This gives you a the Twitter OAuth 1.0 Access Token and Secret.
      // You can use these server side with your app's credentials to access the Twitter API.
      var token = credential.accessToken;
      var secret = credential.secret;
      // ...
    }

    // The signed-in user info.
    var user = result.user;
    // IdP data available in result.additionalUserInfo.profile.
      // ...
  }).catch((error) => {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    // The email of the user's account used.
    var email = error.email;
    // The firebase.auth.AuthCredential type that was used.
    var credential = error.credential;
    // ...
  });twitter.js

Qui è anche possibile rilevare e gestire gli errori. Per un elenco dei codici di errore, dai un'occhiata ai documenti di riferimento sull'autenticazione .

Gestione degli errori di account esistenti con credenziali diverse

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

import {
  getAuth,
  linkWithCredential,
  signInWithPopup,
  TwitterAuthProvider,
} from "firebase/auth";

try {
  // Step 1: User tries to sign in using Twitter.
  let result = await signInWithPopup(getAuth(), new TwitterAuthProvider());
} catch (error) {
  // Step 2: User's email already exists.
  if (error.code === "auth/account-exists-with-different-credential") {
    // The pending Twitter 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 Twitter 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à reindirizzamento

Gestire manualmente il flusso di accesso

Puoi anche autenticarti con Firebase utilizzando un account Twitter gestendo il flusso di accesso chiamando gli endpoint OAuth di Twitter:

Integra l'autenticazione Twitter nella tua app seguendo la documentazione dello sviluppatore . Al termine del flusso di accesso a Twitter, riceverai un token di accesso OAuth e un segreto OAuth.
Se devi accedere a un'applicazione Node.js, invia il token di accesso OAuth e il segreto OAuth all'applicazione Node.js.
Dopo che un utente ha effettuato l'accesso con Twitter, scambia il token di accesso OAuth e il segreto OAuth con una credenziale Firebase:
```
var credential = firebase.auth.TwitterAuthProvider.credential(token, secret);
```

Autenticarsi con Firebase utilizzando le credenziali Firebase:

Web modular API

import { getAuth, signInWithCredential, FacebookAuthProvider } from "firebase/auth";

// Sign in with the credential from the Facebook user.
const auth = getAuth();
signInWithCredential(auth, credential)
  .then((result) => {
    // Signed in 
    const credential = FacebookAuthProvider.credentialFromResult(result);
  })
  .catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.customData.email;
    // The AuthCredential type that was used.
    const credential = FacebookAuthProvider.credentialFromError(error);
    // ...
  });auth_facebook_signin_credential.js

Web namespaced API

// Sign in with the credential from the Facebook user.
firebase.auth().signInWithCredential(credential)
  .then((result) => {
    // Signed in       
    var credential = result.credential;
    // ...
  })
  .catch((error) => {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    // The email of the user's account used.
    var email = error.email;
    // The firebase.auth.AuthCredential type that was used.
    var credential = error.credential;
    // ...
  });facebook.js

Autenticati con Firebase in un'estensione di Chrome

Se stai creando un'app di estensione per Chrome, consulta la guida Offscreen Documents .

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

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

Segui i passaggi da 1 a 3 in Configura 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 Twitter o nella pagina di configurazione di OAuth, inserisci nella whitelist 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

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'oggetto User . 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.
});auth_sign_out.js

Web namespaced API

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

Autenticarsi utilizzando Twitter in 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

Gestione degli errori di account esistenti con credenziali diverse

Modalità popup

Modalità reindirizzamento

Gestire manualmente il flusso di accesso

Web modular API

Web namespaced API

Autenticati con Firebase in un'estensione di Chrome

Personalizzazione del dominio di reindirizzamento per l'accesso a Twitter

Prossimi passi

Web modular API

Web namespaced API

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

Gestione degli errori di account esistenti con credenziali diverse

Modalità popup

Modalità reindirizzamento

Gestire manualmente il flusso di accesso

Web modular API

Web namespaced API

Autenticati con Firebase in un'estensione di Chrome

Personalizzazione del dominio di reindirizzamento per l'accesso a Twitter

Prossimi passi

Web modular API

Web namespaced API

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

Gestione degli errori di account esistenti con credenziali diverse

Modalità popup

Modalità reindirizzamento

Gestire manualmente il flusso di accesso

Web modular API

Web namespaced API

Autenticati con Firebase in un'estensione di Chrome

Personalizzazione del dominio di reindirizzamento per l'accesso a Twitter

Prossimi passi

Web modular API

Web namespaced API