Facebook login

Open2b consente ai clienti del negozio di fare il login, ed eventualmente la registrazione, tramite il proprio account Facebook. Di seguito viene mostrato come aggiungere un pulsante nella pagina di login per abilitare questa funzione.

Aggiungere il pulsante Accedi con Facebook

1. Andare nella sezione Sito Web del gestionale.
2. Andare nella sottosezione Design.
3. Fare clic su Personalizza in corrispondenza del template da modificare. Si aprirà il Template Editor.
4. Fare clic su HTML e CSS.
5. Fare clic sul menù Nuovo > File vuoto.
6. Incollare il seguente codice nel file

   {
     "version": 8,
     "methods": ["loginWith", "signUp"]
   }

7. Nel menù Salva... in alto, selezionare la voce Salva Come... per salvare il file.
8. Salvare il file con il nome storefront.json.
9. Fare clic sul menù Nuovo > File vuoto.
10. Incollare il seguente codice nel file

    
    {##
      La macro FacebookLogin mostra il pulsante "Accedi con Facebook" nel punto in cui viene chiamata.
      Se il cliente non ha mai autorizzato il login con Facebook per il sito, verrà chiesta conferma,
      in caso contrario il cliente verrà fatto accedere direttamente.
      Se non esiste un cliente registrato al negozio con l'email fornita da Facebook, il cliente verrà
      registrato, nome, cognome e email saranno presi da Facebook, saranno invece inseriti dei dati fittizi
      per gli altri campi obbligatori per la registrazione.
    ##}
    
    {% macro FacebookLogin(appID string, consents []int) %}
    {% if ! isLoggedIn %}
      {% serializedConsents, _ := marshalJSON(consents) %}
      <div class="fb-login-button" data-width="" data-size="large" data-button-type="login_with" data-layout="default" data-auto-logout-link="false" data-use-continue-as="false"></div>
      <script type="text/javascript">
        window.fbAsyncInit = function() {
          FB.init({
            appId  : {{ appID }},
            cookie : true,
            xfbml  : true,
            version: 'v13.0'
          });
          FB.getLoginStatus(function(response) {
            statusChangeCallback(response);
          });
        };
    
        function statusChangeCallback(response) {
          var redirectURL = document.location.href.replace(/\/[^\/]*$/,'/');
          if (response.status === 'connected') {
            Open2b.Storefront.loginWith('Facebook',{ 'id': response.authResponse.userID , 'token': response.authResponse.accessToken}).then(function (response) {
                document.location = redirectURL;
            }).catch(function(error){
              if ( error.message === '(credentials NotFound) There is no customer for these credentials' ) {
                // Il cliente non è registrato, lo si può registrare usando l'API storefront, occorre dunque recuperare i suoi dati da Facebook.
                FB.api('/me?fields=first_name,last_name,email', function(response) {
                  var customer = {
                    address: {
                      firstName: response.first_name,
                      lastName: response.last_name,
                      street1: "N.D.",
                      city: "N.D.",
                      postalCode: "56100",
                      stateProv: "PI",
                      country: "IT",
                      email: response.email,
                    },
                    privacyConsents: {{ serializedConsents }},
                    password: _generatePassword(10)
                  };
                  Open2b.Storefront.signUp(customer).then(function() {
                    document.location = redirectURL + 'user-data';
                  }).catch(function(){
                    alert("Non è stato possibile effettuare il login tramite Facebook, per cortesia usare il login standard.")
                  });
                });
              } else {
                alert("Non è stato possibile effettuare il login tramite Facebook, per cortesia usare il login standard.")
              }
            });
          }
        }
        function _generatePassword(length) {
          var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz!\\$%&/()=?^,.;:-<>#'|[]{}@_";
          var password = "";
          var array = new Uint32Array(1);
          for ( var i = 0; i < length; i++ ) {
            crypto.getRandomValues(array);
            password += chars[array[0]%chars.length];
          }
          return password;
        }
      </script>
      <div id="fb-root"></div>
      <script async defer crossorigin="anonymous" src="https://connect.facebook.net/{{language.Code}}_{{language.Region}}/sdk.js"></script>
    {% end if %}
    {% end macro %}

11. Nel menù Salva... in alto, selezionare la voce Salva Come... per salvare il file.
12. Salvare il file con il nome login-with-facebook.html, nella cartella /imports.
13. Fare clic sul file login.html. Si aprirà il sorgente del file a centro pagina.
14. Individuare la seguente riga:

    {% extends "layouts/standard.html" %}

    e subito dopo inserire una nuova riga incollando il seguente codice

    {% import "imports/login-with-facebook.html" %}

15. Individuare la seguente riga:

    <p class="sign-up"><a href="sign-up.html" title="{{ translate(`Sign up`) }}">{{ translate("Sign up") }}</a></p>

    e subito dopo incollare il seguente codice:

    {{ FacebookLogin("386761733020509", []int{ 6, 7 }) }}

    sostituendo 386761733020509 con l'ID della vostra app di Facebook e sostituendo 6, 7 con gli ID dei vostri trattamenti obbligatori per la registrazione, separati da una virgola.
16. Nel menù Salva... in alto, selezionare la voce Salva per salvare il file.
17. Fare clic su css e quindi su base.css. Si aprirà il sorgente del file a centro pagina.
18. Aggiungere il seguente codice alla fine del file

    .fb-login-button.fb_iframe_widget { display: block; margin-top: 1em; text-align: center; }

19. Nel menù Salva... in alto, selezionare la voce Salva per salvare il file.
20. Fare clic sull'icona del monitor in alto a sinistra.
21. Andare nella pagina del login e verificare se va bene.
22. Fare clic, in basso a sinistra, su Salva.
23. Fare clic su Applica.