Facebook Login

En este artículo, vamos a agregar un botón que permite al usuario loguearse usando Facebook, tanto en la página de Login como en la de Crear cuenta.


Para poder configurar esta funcionalidad desde el Administrador nubes te sugerimos leer este artículo.

HTML

1. Vamos a crear un snipplet llamado facebook-login.tpl dentro de la carpeta snipplets con el siguiente código:

{% if store_fb_app_id %}

    <a class="btn btn-primary btn-facebook d-block mb-4" onclick="loginFacebook();" >
        {% include "snipplets/svg/facebook.tpl" with {svg_custom_class: "icon-inline icon-2x mr-1 svg-fb-icon align-middle"} %}
        <span class="align-middle">{{ 'Facebook login' | translate }}</span>
    </a>
    {% if result.facebook and result.invalid %}
        <div class="alert alert-danger">{{ 'Hubo un problema con el login de Facebook.' | translate }}</div>
    {% endif %}

{% endif %}

2. En el archivo layout.tpl dentro del tag “head” agregamos el siguiente código meta:

{% if store_fb_app_id %}
<meta property="fb:app_id" content="{{ store_fb_app_id }}" />
{% elseif not store.has_custom_domain %}
<meta property="fb:app_id" content="{{ fb_app.id }}" />
{% endif %}

3. Incluimos el snipplet facebook-login.tpl dentro de los templates login.tpl (que es la página de login) y register.tpl (la página para crear una cuenta) que están en la carpeta templates/account.

Es importante agregar el snipplet del botón de Facebook dentro de los formularios de cada página y que su vez estos formularios usen el ID “login-form”.

Llamamos al snipplet de la siguiente forma:

{% include 'snipplets/facebook-login.tpl' %}

4. Por último necesitamos agregar una carpeta SVG dentro de la carpeta snipplets. Acá vamos sumar el SVG con el logo de Facebook que usamos en el botón. El archivo se tiene que llamar facebook.tpl y tener el código que está a continuación:

<svg class="{{ svg_custom_class }}" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M1024 512a512 512 0 1 0-592 505.8V660H302V512h130V399.2C432 270.9 508.4 200 625.4 200c56 0 114.6 10 114.6 10v126h-64.6c-63.6 0-83.4 39.5-83.4 80v96h142l-22.7 148H592v357.8A512 512 0 0 0 1024 512z"/></svg> 

CSS

Requisito:

Tener agregados en tu diseño las clases helpers. Podés seguir este este pequeño tutorial para hacerlo (simplemente es copiar y pegar algunas clases, no toma más de 1 minuto).

Agregamos el siguiente SASS de colores en style-colors.scss.tpl (o la hoja de tu diseño que tenga los colores y tipografías de la tienda). Recordá que las variables de colores y tipografías pueden variar respecto a tu diseño:

{# This mixin adds browser prefixes to a CSS property #}


@mixin prefix($property, $value, $prefixes: ()) {
  @each $prefix in $prefixes {
      #{'-' + $prefix + '-' + $property}: $value;
  }
    #{$property}: $value;
}


{# /* // Buttons */ #}

.btn{
  text-decoration: none;
  text-align: center;
  border: 0;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-transform: uppercase;
  background: none;
  @include prefix(transition, all 0.4s ease, webkit ms moz o);
  &:hover,
  &:focus{
    outline: 0;
    opacity: 0.8;
  }
  &[disabled],
  &[disabled]:hover{
    opacity: 0.5;
    cursor: not-allowed;
    outline: 0;
  }
  &-primary{
    padding: 15px;
    background-color: $primary-color;
    color: $main-background;
    fill: $main-background;
    letter-spacing: 4px;
    &:hover{
      color: $main-background;
      fill: $main-background;
    }
  }
  &-block{
    float: left;
    width: 100%;
  }
  &-facebook{
    background-color: #1977f2;
    .svg-fb-icon {
      fill: #fff;
    }
  }
}


button{
  cursor: pointer;
  &:focus{
    outline: 0;
    opacity: 0.8;
  }
}

JS

Ahora precisamos agregar el JavaScript, en este caso va ubicarse dentro del archivo layout.tpl justo después de abrir la etiqueta body.

{# Facebook account login and register #}

{% if template == 'account.login' or template == 'account.register' %}
    {{ fb_js }}
    <script>
        function loginFacebook() {
            LS.ready.then(function(){
                LS.facebookLogin(FB, function(status, hasEmail) {
                    if (status === 'connected') {
                        if (hasEmail) {
                            window.location = "{{ store.url }}/account/facebook_login/";
                        } else {
                            $('#login-form').prepend(
                                    "<div class=\"alert alert-danger\">{{ 'Tienes que compartír tu e-mail.' | translate }}</div>");
                        }
                    } else {
                        $('#login-form').prepend(
                                "<div class=\"alert alert-danger\">{{ 'Debes completar el login.' | translate }}</div>");
                    }
                });
            });
        }
    </script>
{% endif %}

Traducciones

Para terminar agregamos los textos para las traducciones en el archivo config/translations.txt

es "Regístrate con Facebook"
pt "Criar conta com o Facebook"
en "Sign up with Facebook"
es_mx "Regístrate con Facebook"

es "Tienes que compartir tu e-mail."
pt "Você deve compartilhar seu e-mail."
en "You need to share your e-mail."
es_mx "Tienes que compartir tu correo electrónico."

es "Debes completar el login."
pt "Você deve completar o login."
en "You must complete the login."
es_mx "Debes completar el login."

es "Hubo un problema con el login de Facebook."
pt "Ocorreu um problema fazendo login com Facebook."
en "There was a problem when login with Facebook."
es_mx "Hubo un problema con el login de Facebook. Intenta de nuevo en unos segundos."

Activación

Para poder configurar esta funcionalidad desde el Administrador nubes te sugerimos leer este artículo.

Listo, el login de Facebook ya está listo para ser usado ¡Genial!