Como habilitar o Login com o Google

       Para incluir o login com o Google em sua loja é necessário que você crie uma conta no Google APIs antes de iniciar o processo de configuração. Para isso, utilize o seu e-mail do Gmail para acessar a ferramenta do Google (procure usar o mesmo e-mail que você utiliza para as outras ferramentas do Google). 

Atenção: esse recurso somente funcionará para lojas que estão em produção, ou seja, não será possível testar ou configurar o recurso antes da loja ser publicada. 

 

Login com o Google

Confirme os termos após o login e prossiga para o próximo passo.

2 - Na biblioteca de APIs procure por Google+ API.

3 - Ative a API.

4 - Clique no menu Credenciais e em seguida no botão "Configurar tela de Consentimento".

Será aberto uma tela com opções de User Type, selecione "Externo" e clique em "Criar".

       Para criação será preciso o preenchimento de alguns campos, são eles:

Informações do app

• Nome do app: campo de preenchimento obrigatório;
• E-mail para suporte: informe um e-mail para que os clientes possam entrar em contato em casos de suporte, preenchimento também obrigatório;
• Logotipo do app: caso deseje inserir a imagem de logotipo, faça upload de uma imagem de até 1 MB na tela de consentimento para ajudar os usuários a reconhecerem seu app. Os formatos de imagem permitidos são JPEG, PNG e BMP. Para garantir o melhor resultado, os logotipos precisam ser quadrados e ter a resolução de 120px x 120px.

Domínio do app

• Página inicial do aplicativo: inserir o link da página inicial da sua loja;
• Link da Política de Privacidade do aplicativo: inserir o link da sua página de Política de Privacidade pública;
• Link dos Termos de Serviço do aplicativo: inserir o link da página referente aos Termos de Serviços públicos.

Domínios autorizados

      Em seguida, será solicitado que adicione o domínio de sua loja, por exemplo, sualoja.com.br e o endereço de e-mail:

       É importante que siga o exemplo acima inserindo apenas o domínio da loja, pois quando é adicionado junto ao domínio o "www" o processo da erro.

No final, clique em "Salvar e Continuar".

 

Confirmação de propriedade.

       A confirmação da propriedade deve ser feita por meio do Google Search Console. Caso não possua o Google Search Console, confira os passos de configuração no artigo Google Search Console (Webmasters Tools).

No menu lateral esquerdo acesse "Confirmação de Domínio".

Insira a URL da sua loja no campo em destaque e clique em "Adicionar Domínio".

Feito isso, retorne ao Google API e clique em Credenciais:

Em seguida, em Criar Credenciais >> ID do cliente OAuth:

Então selecione o Aplicativo da Web:

Será aberto uma caixa para preenchimento das informações:

• Nome;
• Origens JavaScript (adicionar URL);
• URLs de redirecionamento (adicionar URL).

Após informações fornecidas, clique em "Criar".

E então serão apresentados os dados para serem adicionados no Painel do Admin da Plataforma.

Configuração Login Google no Admin

     Acesse o painel administrativo da Tray Corp e selecione, no menu lateral esquerdo, Configurações >> Configurações Gerais.

           No campo de busca, insira "Google API" e clique em pesquisar. 

       Preencha os campos em destaque de acordo com os códigos fornecidos pela API do Google, conforme passo anterior, e clique em salvar para cada um dos itens. 

Componente do Google no Style Editor

       Acesse o Style Editor e clique no menu Produção >> Templates >> Login e, em seguida, no botão editar no template "Login Autenticado".

Clique e arraste o componente Login Google para dentro de seu template.

Parâmetro do componente Google no Style Editor

       Após incluir o componente para dentro do template, a próxima etapa é configurar os parâmetros necessários, caso contrário, o login com Google não irá funcionar corretamente. 

Abaixo, segue modelos disponíveis para o layout do botão. 

 

Novo (Obrigatório)

       Parâmetro obrigatório que ativa o login com a nova versão da API do Google. 

     Aceita apenas o valor true, caso este parâmetro não seja informado o componente poderá não funcionar corretamente.

Exemplo: 

<FBITS:Google novo="true" />

 

Tamanho

Parâmetro opcional do tamanho do botão, a personalização pode ser realiza conforme indicações abaixo:

Pequeno

Um botão pequeno:

Médio

Um botão de tamanho médio:

Grande

Um botão grande:

Exemplo:  <FBITS:Google novo="true" tamanho=”grande”/> 

Caso esse parâmetro não seja informado, será adotado como padrão o valor "grande". 

 

Tema

Parâmetro opcional que define a cor do botão, temas disponíveis descritos abaixo: 

Branco

Tema do botão preenchido em branco:

Azul

Tema do botão preenchido em azul:

Preto

Tema do botão preenchido em preto:

Exemplo: <FBITS:Google novo="true" tema=”branco”/>

Caso esse parâmetro não seja informado, será adotado como padrão o valor "branco".

 

Formato

Parâmetro opcional que define o formato do botão, segue abaixo os formatos disponíveis: 

Retangular

Botão em formato retangular:

Circular

Botão em forma de círculo:

Exemplo:  <FBITS:Google novo="true" formato=”retangular”/> 

Caso esse parâmetro não seja informado, será adotado como padrão o valor "retangular".

 

Largura

       Parâmetro opcional que define a largura mínima do botão em pixels. A largura máxima disponível é de 400 pixels, informamos que no campo deve conter apenas números inteiros. 

Exemplo: <FBITS:Google novo="true" largura="400"/> 

Caso esse parâmetro não seja informado, será adotado como padrão o valor "100".

 

Importante: Sugerimos que essas ações sejam realizadas por uma agência certificada para evitar problemas no layout de sua loja.