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.

Se sei un utente Facebook e stai avendo problemi durante l'accesso al tuo account, visita il nostro Centro assistenza.

Prima di iniziare

Avrai bisogno dei seguenti elementi:

Un account sviluppatore di Facebook
Un'app Facebook registrata con le Impostazioni di base configurate
L'SDK JavaScript di Facebook

Se per qualche motivo non riesci a usare il nostro SDK JavaScript, puoi creare manualmente un flusso di accesso per implementare Facebook Login.

1. Inserimento dell'URL di reindirizzamento nella dashboard gestione app

Nella Dashboard gestione app, scegli la tua app e scorri fino ad Aggiungi un prodotto. Clicca su Configura in 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 la corretta autorizzazione.

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. Quindi, Facebook chiama 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 d'accesso dell'utente che sta usando la pagina web. status può essere uno dei seguenti:

Tipo di `Status`	Descrizione
`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`	L'utente non ha effettuato l'accesso a Facebook, pertanto non sai se ha effettuato o meno l'accesso alla tua pagina Web. Oppure FB.logout() è stato chiamato in precedenza e, pertanto, non può accedere a Facebook.

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

Parametri `authResponse`	Valore
`accessToken`	Un token d'accesso per l'utente che sta usando la pagina Web.
`expiresIn`	Un timestamp 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.

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

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 l'utente non ha effettuato l'accesso a Facebook, 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:

Usando il pulsante Facebook Login
Usando la finestra di dialogo Accedi dall'SDK JavaScript

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

large

Testo del pulsante

continue_with

Abilita il pulsante Esci

Includi nome e immagine del profilo quando l'utente accede a Facebook [?]

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 è un elenco di autorizzazioni, separate da virgole, che un utente deve confermare per consentire alla tua pagina Web di accedere ai propri dati.

Esempio di chiamata

Questo esempio chiede all'utente che effettua l'accesso se la tua pagina Web è 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 alla callback specificata 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

Un utente accede a Facebook e poi alla tua pagina Web. Alla disconnessione dall'app, l'utente mantiene l'accesso a Facebook.
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.
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.

Inoltre, la disconnessione dalla tua pagina Web non revoca 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: v5.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(d, s, id) {                      // Load the SDK asynchronously
    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'));

 
  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>

</body>
</html>