Accesso degli utenti con Facebook

Questo documento mostra come utilizzare Identity Platform per consentire agli utenti di accedere con Facebook.

Prima di iniziare

Questo tutorial presuppone che tu abbia già attivato Identity Platform e che tu abbia un'app web di base scritta utilizzando HTML e JavaScript. Per scoprire come, consulta la guida rapida.

Configurare Facebook come provider

Per configurare Facebook come provider di identità:

  1. Vai alla pagina Provider di identità nella Google Cloud console.

    Vai alla pagina Provider di identità

  2. Fai clic su Aggiungi un provider.

  3. Seleziona Facebook dall'elenco.

  4. Inserisci l'ID app e l'App Secret di Facebook. Se non hai ancora un ID e un segreto, puoi ottenerne uno dalla pagina Facebook for Developers.

  5. Configura l'URI elencato in Configura Facebook come URI di reindirizzamento OAuth valido per la tua app Facebook. Se hai configurato un dominio personalizzato in Identity Platform, aggiornate l'URI di reindirizzamento nella configurazione dell'app Facebook in modo da utilizzare il dominio personalizzato anziché il dominio predefinito. Ad esempio, cambia https://myproject.firebaseapp.com/__/auth/handler in https://auth.myownpersonaldomain.com/__/auth/handler.

  6. Registra i domini della tua app facendo clic su Aggiungi dominio in Domini autorizzati. Per scopi di sviluppo, localhost è già attivato per impostazione predefinita.

  7. In Configura l'applicazione, fai clic su Dettagli di configurazione. Copia lo snippet nel codice dell'app per inizializzare l'SDK client di Identity Platform.

  8. Fai clic su Salva.

Accesso degli utenti con l'SDK client

  1. Crea un'istanza dell'oggetto provider Facebook:

    JavaScript 

    var provider = new firebase.auth.FacebookAuthProvider();

  2. (Facoltativo) Aggiungi gli ambiti OAuth. Gli ambiti specificano quali dati stai richiedendo a Facebook. I dati più sensibili potrebbero richiedere scopi specifici. Consulta la documentazione del fornitore per determinare gli ambiti di cui ha bisogno la tua app.

    JavaScript 

    provider.addScope('user_birthday');

  3. (Facoltativo) Localizza il flusso di autenticazione. Puoi specificare una lingua o utilizzare la lingua predefinita del dispositivo:

    JavaScript 

    firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();

  4. (Facoltativo) Specifica altri parametri OAuth personalizzati. Si tratta di parametri specifici di Facebook e vengono in genere utilizzati per personalizzare l'esperienza di autenticazione. Non puoi passare parametri riservati da OAuth o Identity Platform.

    JavaScript 

    provider.setCustomParameters({
'display': 'popup'
});

  5. Utilizza l'oggetto del provider Facebook per far accedere l'utente. Puoi aprire una finestra popup o reindirizzare la pagina corrente. Il reindirizzamento è più semplice per gli utenti che utilizzano dispositivi mobili.

    Per visualizzare un popup, chiama signInWithPopup():

    JavaScript 

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

    // The signed-in user info.
    var user = result.user;

    // This gives you a Facebook Access Token. You can use it to access the Facebook API.
    var accessToken = credential.accessToken;

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

    // ...
  });

    Per reindirizzare la pagina, chiama prima signInWithRedirect().

    Segui le best practice quando utilizzi signInWithRedirect, linkWithRedirect o reauthenticateWithRedirect.

    JavaScript 

    firebase.auth().signInWithRedirect(provider);

    Poi, recupera il token di Facebook chiamando getRedirectResult() al caricamento della pagina:

    JavaScript 

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

      // This gives you a Facebook Access Token. You can use it to access the Facebook API.
      var token = credential.accessToken;
      // ...
    }
    // The signed-in user info.
    var user = result.user;
  }).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;
    // ...
  });

Una volta ottenuto un token di accesso, puoi utilizzarlo per chiamare l'API Facebook. Ad esempio:

REST

curl "https://graph.facebook.com/me?fields=id,name&access_token=[TOKEN]"

Accesso degli utenti manualmente

Se non vuoi utilizzare l'SDK client, puoi gestire manualmente anche il flusso di accesso.

Questo metodo di accesso supporta anche l'accesso con Facebook per i giochi come fornitore di identità. Identity Platform non supporta l'implementazione manuale di Accesso con Facebook per i giochi. Accetta solo i token per lo scambio delle credenziali di Identity Platform.

  1. Per integrare l'autenticazione di Facebook o Facebook Login per i giochi nella tua app, segui i passaggi descritti nella documentazione per gli sviluppatori:

  2. Fai accedere l'utente con Facebook o Facebook Login for Gaming utilizzando il flusso implementato nel passaggio precedente.

  3. Scambia il token che ricevi da Facebook o dall'accesso con Facebook per giochi con una credenziale Identity Platform:

    JavaScript 

    var credential = firebase.auth.FacebookAuthProvider.credential(accessToken);

  4. Utilizza le credenziali per far accedere l'utente con Identity Platform:

    JavaScript 

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

Passaggi successivi