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 fare, 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 il segreto dell'app di Facebook. Se non hai già un ID e un segreto, puoi ottenerli 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, aggiorna l'URI di reindirizzamento nella configurazione dell'app Facebook in modo che utilizzi il dominio personalizzato anziché quello 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à abilitato 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.

Accedere con l'SDK client

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

    JavaScript 

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

  2. Facoltativo: aggiungi ambiti OAuth. Gli ambiti specificano i dati che stai richiedendo a Facebook. I dati più sensibili potrebbero richiedere ambiti specifici. Consulta la documentazione del provider per determinare gli ambiti di cui ha bisogno la tua app.

    JavaScript 

    provider.addScope('user_birthday');

  3. Facoltativo: localizza la procedura 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 parametri OAuth personalizzati aggiuntivi. Questi sono 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 consentire all'utente di accedere. Puoi aprire una finestra popup o reindirizzare la pagina corrente. Il reindirizzamento è più semplice per gli utenti sui 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, 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() quando la pagina viene caricata:

    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]"

Accedere manualmente

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

Questo metodo di accesso supporta anche Facebook Login for Gaming come IdP. Identity Platform non supporta l'implementazione manuale di Facebook Login for Gaming. Accetta solo i token per lo scambio delle credenziali di Identity Platform.

  1. Integra l'autenticazione di Facebook o Facebook Login for Gaming nella tua app seguendo i passaggi indicati nella documentazione per gli sviluppatori:

  2. Consenti all'utente di accedere con Facebook o Facebook Login for Gaming utilizzando la procedura implementata nel passaggio precedente.

  3. Scambia il token che ricevi da Facebook o Facebook Login for Gaming con una credenziale di Identity Platform:

    JavaScript 

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

  4. Utilizza la credenziale per consentire all'utente di accedere 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