Facebook Login

Neste artigo, vamos adicionar um botão que permite ao usuário efetuar login usando o Facebook, tanto na página de login como na página Criar conta.

Para configurar essa funcionalidade no Administrador nuvem, sugerimos que você leia este artigo.

HTML

1. Nós vamos criar um snipplet chamado facebook-login.tpl dentro da pasta snipplets com o seguinte 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. No arquivo layout.tpl dentro da tag "head", adicionamos o seguinte 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. Incluímos o snipplet facebook-login.tpl nos modelos login.tpl (que é a página de login) e register.tpl (a página para criar uma conta) que estão na pasta templates/account.

É importante adicionar o snipplet do botão do Facebook nos formulários de cada página e que esses formulários usem o ID de "login-form".

Nós chamamos snipplet da seguinte forma:

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

4. Finalmente, precisamos adicionar uma pasta SVG dentro da pasta snipplets. Aqui vamos adicionar o SVG com o logo do Facebook que usamos no botão. O arquivo deve ser chamado de facebook.tpl e ter o código abaixo:

<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:

Ter adicionado helper classes em seu layout. Você pode seguir este pequeno tutorial para fazer isso (é só copiar e colar algumas classes, não leva mais que 1 minuto).

Adicionamos o seguinte SASS de cores em style-colors.scss.tpl (ou na stylesheet do seu layout que possui as cores e fontes da loja). Lembre-se de que as variáveis de cores e fontes podem variar em relação ao seu layout:

{# 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

Agora, precisamos adicionar o JavaScript. Nesse caso, ele estará localizado dentro do arquivo layout.tpl logo após a abertura da tag 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 %}

Traduções

Nesta etapa vamos adicionar os textos para as traduções no arquivo 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!