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.