Accesso degli utenti con Facebook

Questo documento mostra come utilizzare Identity Platform per far accedere gli utenti con Facebook.

Prima di iniziare

Questo tutorial presuppone che tu abbia già attivato Identity Platform e app web di base scritta utilizzando HTML e JavaScript. Consulta le Guida rapida per scoprire come.

Configurare Facebook come provider

Per configurare Facebook come provider di identità:

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

    Vai alla pagina Provider di identità

  2. Fai clic su Add A Provider (Aggiungi un provider).

  3. Seleziona Facebook dall'elenco.

  4. Inserisci il tuo ID app di Facebook e il tuo Segreto dell'app. 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, modifica 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 la tua applicazione, fai clic su Dettagli di configurazione. Copia il nel codice dell'app per inizializzare Identity Platform SDK client.

  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 ambiti OAuth. Gli ambiti specificano quali dati sei una richiesta da 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 utilizza 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 parametri OAuth aggiuntivi personalizzati. Si tratta di parametri specifici di Facebook e vengono in genere utilizzati per personalizzare l'esperienza di autenticazione. Non puoi trasmettere 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 di dispositivi mobili.

    Per mostrare 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, devi prima chiamare 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 anche gestire manualmente 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. Esegui l'accesso dell'utente con il login di Facebook o Facebook per i giochi utilizzando che hai 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 la credenziale per accedere all'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