Por padrão, junto com o plugin Canopus a plataforma disponibiliza um modal de identificação já desenvolvido por nós e que pode ser estilizado via CSS. Com ele é possível registrar-se e acessar a conta via email e senha ou redes sociais ou token temporário, tudo isso com funções previamente desenvolvidas para agilizar o processo de desenvolvimento das lojas.

Habilitando login pelo Facebook

Buscando maior dinamismo e a possibilidade de usar um Facebook APP específico gerenciado por cada loja, para habilitar o login via Facebook, a SDK para Javascript criada pelo próprio Facebook deverá deverá ser incluída no cabeçalho da loja - essa SDK deverá habilitar o objeto FB no console.

O exemplo a seguir mostra o retorno do console quando o objeto FB não foi definido (SDK do Facebook não consta no cabeçalho):

A seguir, veja um exemplo disponibilizado na documentação do Facebook sobre como incluir a SDK no cabeçalho:

Onde o espaço your-app-id deverá ser substituído pelo APP ID da loja ou então é possível usar o padrão da plataforma:

<script>
    window.fbAsyncInit = function() {
        FB.init({
            appId            : '132350280704520',
            autoLogAppEvents : true,
            xfbml            : true,
            version          : 'v10.0'
        });
    };
</script>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>

Recomendamos usar o APP ID padrão da plataforma e, caso opte por seguir essa recomendação, como o Facebook exige a liberação do domínio para o funcionamento das funções de login. Entre em contato com o time de atendimento para solicitar a liberação para o seu projeto.

Após habilitado, ao clicar no botão para entrar com o Facebook, você deverá ver uma tela semelhante a essa, onde o próprio Facebook pede sua permissão para conectar com o aplicativo informado no APP ID:

Caso o domínio não esteja habilitado para o APP ID informado, o Facebook exibirá a mensagem a seguir:

Habilitando login pelo Google

O Google, assim como o Facebook, também disponibiliza uma SDK Javascript para a integração com as suas APIs. O exemplo a seguir mostra o retorno do console quando o objeto gapi não foi definido (SDK  do Google não consta no cabeçalho):

Para disponibilizar o objeto gapi e funcionar corretamente a identificação via Google, inclua a chamada para o script a seguir no cabeçalho da sua loja:

<script src="https://apis.google.com/js/platform.js" async defer></script>

Feito isso, o objeto gapi deverá estar disponível corretamente no console:

O APP padrão para login com o Google é mantido pela Betalabs e, de forma semelhante ao do Facebook, o domínio deverá ser liberado mediante solicitação à equipe de atendimento.

Até que o domínio seja liberado, o script do Google exibirá a seguinte mensagem no console informando que o domínio é inválido:

Após a liberação do domínio, ao clicar no botão para entrar com o Google, a tela a seguir deverá ser exibida para a confirmação da conta do Google para a liberação dos dados de acesso para o domínio e então, ao confirmar o acesso, a plataforma tentará fazer o login usando os dados da conta informada: