Facebook Login

Facebook Login per il web con l'SDK JavaScript

Questo documento descrive i passaggi dell'implementazione di Facebook Login con l'SDK di Facebook per JavaScript sulla tua pagina web.

Prima di iniziare

Ecco di cosa avrai bisogno:

Esempio di accesso automatico di base

Il seguente esempio di codice mostra come aggiungere l'SDK di Facebook per Javascript alla tua pagina web, inizializzare l'SDK e, se hai effettuato l'accesso a Facebook, visualizzerai il tuo nome e la tua e-mail. Se non hai effettuato l'accesso a Facebook, verrà automaticamente visualizzata la finestra pop-up Accedi.

L'autorizzazione public_profile , che ti consente di ottenere informazioni pubbliche come il nome e l'immagine del profilo, e l'autorizzazione email non richiedono l'analisi dell'app e sono concesse automaticamente a tutte le app che utilizzano Facebook Login. 

<!DOCTYPE html>
<html lang="en">
  <head></head>
  <body>

    <h2>Add Facebook Login to your webpage</h2>

      <!-- Set the element id for the JSON response -->
    
      <p id="profile"></p>

      <script>
  
        <!-- Add the Facebook SDK for Javascript -->
  
        (function(d, s, id){
                              var js, fjs = d.getElementsByTagName(s)[0];
                              if (d.getElementById(id)) {return;}
                              js = d.createElement(s); js.id = id;
                              js.src = "https://connect.facebook.net/en_US/sdk.js";
                              fjs.parentNode.insertBefore(js, fjs);
                            }(document, 'script', 'facebook-jssdk')
        );


        window.fbAsyncInit = function() {
            <!-- Initialize the SDK with your app and the Graph API version for your app -->
            FB.init({
                      appId            : '{your-facebook-app-id}',
                      xfbml            : true,
                      version          : '{the-graph-api-version-for-your-app}'
                    });
            <!-- If you are logged in, automatically get your name and email adress, your public profile information -->
            FB.login(function(response) {
                      if (response.authResponse) {
                           console.log('Welcome!  Fetching your information.... ');
                           FB.api('/me', {fields: 'name, email'}, function(response) {
                               document.getElementById("profile").innerHTML = "Good to see you, " + response.name + ". i see your email address is " + response.email
                           });
                      } else { 
                           <!-- If you are not logged in, the login dialog will open for you to login asking for permission to get your public profile and email -->
                           console.log('User cancelled login or did not fully authorize.'); }
            });
        };

      </script>

  </body>
</html>

1. Abilitazione dell'SDK JavaScript per Facebook Login

Nella Dashboard gestione app, scegli la tua app e scorri fino ad Aggiungi un prodotto. Clicca su Configura nella scheda Facebook Login. Seleziona Impostazioni nel pannello di navigazione a sinistra e in Impostazioni del client OAuth, inserisci l'URL di reindirizzamento nel campo URI di reindirizzamento OAuth validi per una corretta autorizzazione.

Indica che stai utilizzando l'SDK di JavaScript per effettuare l'accesso impostando il pulsante Login con l'SDK di Javascript su "sì" e inserisci il dominio della tua Pagina che ospita l'SDK nella lista Domini consentiti per l'SDK JavaScript. Ciò garantisce che i token d'accesso siano restituiti solo a callback all'interno di domini autorizzati. Per azioni di autenticazione con l'SDK JavaScript di Facebook, sono supportate solo le pagine https.

2. Verifica dello stato d'accesso di un utente

Il primo passaggio da eseguire durante il caricamento della tua pagina web è stabilire se un utente ha già effettuato l'accesso alla tua pagina web con Facebook Login. Una chiamata a FB.getLoginStatus attiva una chiamata a Facebook per ottenere lo stato d'accesso. Facebook chiama poi la tua funzione di callback con i risultati.

Esempio di chiamata

FB.getLoginStatus(function(response) {
    statusChangeCallback(response);
});

Esempio di risposta JSON

{
    status: 'connected',
    authResponse: {
        accessToken: '{access-token}',
        expiresIn:'{unix-timestamp}',
        reauthorize_required_in:'{seconds-until-token-expires}',
        signedRequest:'{signed-parameter}',
        userID:'{user-id}'
    }
}

status specifica lo stato di accesso dell'utente che sta usando la pagina web. Lo status può essere uno dei seguenti:

Tipo di StatusDescrizione

connected

L'utente ha effettuato l'accesso a Facebook e alla tua pagina web.

not_authorized

L'utente ha effettuato l'accesso a Facebook, ma non alla tua pagina web.

unknown

Poiché l'utente non ha effettuato l'accesso a Facebook, non sai se ha effettuato o meno l'accesso alla tua pagina web. Oppure FB.logout() è stato chiamato in precedenza e, di conseguenza, non può accedere a Facebook.

Se lo stato è connected, i seguenti parametri authResponse sono inclusi nella risposta:

Parametri authResponseValore

accessToken

Un token d'accesso dell'utente che sta usando la pagina web.

expiresIn

Un'indicazione temporale UNIX alla scadenza del token. Alla scadenza del token, l'utente dovrà effettuare nuovamente l'accesso.

reauthorize_required_in

Il tempo rimanente, in secondi, prima che scada l'accesso e che l'utente debba effettuare nuovamente l'accesso.

signedRequest

Un parametro firmato contenente informazioni su chi sta usando la pagina web.

userID

L'ID dell'utente che sta usando la pagina web.

Poiché l'SDK JavaScript rileva automaticamente lo stato d'accesso, non è necessario che tu esegua ulteriori operazioni per abilitare questo comportamento.

3. Connessione di un utente

Se un utente apre la tua pagina web ma non ha effettuato l'accesso alla pagina o a Facebook, puoi utilizzare la finestra di dialogo Accedi per richiedere all'utente di effettuare l'accesso a entrambi. Se non ha effettuato l'accesso a Facebook, l'utente riceverà la richiesta di accedere prima a Facebook e poi alla tua pagina web.

Puoi consentire agli utenti di effettuare l'accesso in due modi:

A. Accesso con il pulsante Accedi

Per usare il pulsante Facebook Login, utilizza il nostro Configuratore del plug-in per personalizzare il pulsante Accedi e ottenere il codice.

Configuratore del plug-in

Width
Dimensioni pulsante
Testo del pulsante
Forma del pulsante "Layout"
[?]
Ottieni il codice

B. Accesso con la finestra di dialogo Accedi dall'SDK JavaScript

Per usare il tuo pulsante di accesso personale, richiama la finestra di dialogo Accedi chiamando FB.login().

FB.login(function(response){
  // handle the response 
});

Richiesta di ulteriori autorizzazioni

Quando un utente clicca sul tuo pulsante HTML, viene mostrata una finestra pop-up contenente la finestra di dialogo Accedi. La finestra di dialogo consente di chiedere l'autorizzazione per accedere ai dati di un utente. Puoi passare il parametro scope insieme alla chiamata alla funzione FB.login(). Questo parametro opzionale è una lista di autorizzazioni, separate da virgole, che una persona deve confermare per consentire alla tua pagina web di accedere ai propri dati. Facebook Login richiede l'autorizzazione advanced public_profile, che deve essere utilizzata da utenti esterni.

Esempio di chiamata

Questo esempio chiede all'utente che effettua l'accesso se la tua pagina web può essere autorizzata ad accedere al suo profilo pubblico e alla sua e-mail.

FB.login(function(response) {
  // handle the response
}, {scope: 'public_profile,email'});

Gestione della risposta della finestra di dialogo Accedi

La risposta, che sia per connettersi o per annullare l'operazione, restituisce un oggetto authResponse al callback specificato quando hai chiamato FB.login(). Puoi individuare e gestire la risposta nella chiamata FB.login().

Esempio di chiamata

FB.login(function(response) {
  if (response.status === 'connected') {
    // Logged into your webpage and Facebook.
  } else {
    // The person is not logged into your webpage or we are unable to tell. 
  }
});

4. Disconnessione di un utente

Disconnetti un utente dalla tua pagina web allegando la funzione FB.logout() dell'SDK JavaScript a un pulsante o a un link.

Esempio di chiamata

FB.logout(function(response) {
   // Person is now logged out
});

Nota: la chiamata della funzione potrebbe disconnettere l'utente anche da Facebook.

Scenari da considerare

  1. Un utente accede a Facebook e poi alla tua pagina web. Alla disconnessione dall'app, l'utente mantiene l'accesso a Facebook.
  2. Un utente accede alla tua pagina web e a Facebook nell'ambito del flusso di accesso della tua app. Alla disconnessione dall'app, l'utente viene disconnesso anche da Facebook.
  3. Un utente accede a un'altra pagina web e a Facebook nell'ambito del flusso di accesso di tale pagina web, quindi accede alla tua pagina web. Alla disconnessione da una di queste pagine web, l'utente viene disconnesso anche da Facebook.

La disconnessione dalla tua pagina web non revoca, inoltre, le autorizzazioni che l'utente ha concesso alla tua pagina web durante l'accesso. Devi effettuare la revoca delle autorizzazioni separatamente. Crea la tua pagina web in modo che un utente che effettua nuovamente l'accesso dopo essersi disconnesso non visualizzi la finestra di dialogo Accedi.

Esempio di codice completo

Questo codice carica e inizializza l'SDK JavaScript nella tua pagina HTML. Sostituisci {app-id} con il tuo ID app e {api-version} con la versione di API Graph da usare. A meno che tu non abbia un motivo specifico per utilizzare una versione precedente, specifica la versione più recente: v21.0. 

<!DOCTYPE html>
<html>
<head>
<title>Facebook Login JavaScript Example</title>
<meta charset="UTF-8">
</head>
<body>
<script>

  function statusChangeCallback(response) {  // Called with the results from FB.getLoginStatus().
    console.log('statusChangeCallback');
    console.log(response);                   // The current login status of the person.
    if (response.status === 'connected') {   // Logged into your webpage and Facebook.
      testAPI();  
    } else {                                 // Not logged into your webpage or we are unable to tell.
      document.getElementById('status').innerHTML = 'Please log ' +
        'into this webpage.';
    }
  }


  function checkLoginState() {               // Called when a person is finished with the Login Button.
    FB.getLoginStatus(function(response) {   // See the onlogin handler
      statusChangeCallback(response);
    });
  }


  window.fbAsyncInit = function() {
    FB.init({
      appId      : '{app-id}',
      cookie     : true,                     // Enable cookies to allow the server to access the session.
      xfbml      : true,                     // Parse social plugins on this webpage.
      version    : '{api-version}'           // Use this Graph API version for this call.
    });


    FB.getLoginStatus(function(response) {   // Called after the JS SDK has been initialized.
      statusChangeCallback(response);        // Returns the login status.
    });
  };
 
  function testAPI() {                      // Testing Graph API after login.  See statusChangeCallback() for when this call is made.
    console.log('Welcome!  Fetching your information.... ');
    FB.api('/me', function(response) {
      console.log('Successful login for: ' + response.name);
      document.getElementById('status').innerHTML =
        'Thanks for logging in, ' + response.name + '!';
    });
  }

</script>


<!-- The JS SDK Login Button -->

<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
</fb:login-button>

<div id="status">
</div>

<!-- Load the JS SDK asynchronously -->
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
</body>
</html>

Risorse aggiuntive