Novo Login 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

1 - Criar conta no Google API.

Acesse o Google APIs e insira o seu e-mail.

Após o Login acesse “APIs e serviços ativados” e depois “Ativar APIs e Serviços”:

Após o carregamento da tela localize a Sessão “Redes Sociais” e selecione a opção “Google+ API”.

Caso em sua tela seja exibido que o Google+ API está ativo clique em “Gerenciar”:

Caso contrário clique em “Ativar”:

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

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;

Na etapa 2 “Público” selecione a opção “Externo”:

Na etapa 3 insira um e-mail para recebimento para notificar você sobre todas as mudança que forem feitas no projeto criado:

Após a Configuração do OAuth criada. clique em “Criar um cliente OAuth”:

Em Tipo de aplicativo selecione a opção “Aplicativo Web” e preencha um nome de sua escolha:

Logo abaixo temos 2 campos para preenchimento sendo “Origens JavaScript autorizadas” e “URIs de redirecionamento autorizados”. Esse ponto é bem importante pois existe uma diferença de preenchimento caso a loja esteja com no StoreFront 1.0 e StoreFront 2.0.

-StoreFront 1.0 (Loja StoreFront Checkout StyleEditor)
Origens JavaScript autorizadas: https://checkout.urldaloja.com.br 
URIs de redirecionamento autorizados: https://www.urldaloja.com.br 

-StoreFront 2.0 (Loja StoreFront e Checkout StoreFront)
Origens JavaScript autorizadas: https://www.urldaloja.com.br 
URIs de redirecionamento autorizados: https://www.urldaloja.com.br 

Após a criação será exibido um Popup com o ID de Cliente e a Chave Secreta para inserção dentro da plataforma:

Com o App criado vamos acessar a aba de “Branding” para realizar algumas configurações adicionais, sendo elas o Logotipo do app e Domínio do App.

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 Clientes e acesse o App criado para pegar o ID do cliente e Chave secreta para configuração em nossa plataforma:

Configuração Login Google no Admin

Acesse o painel administrativo da Wake 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.

Implementação do Login Google no Front do site

Caso sua loja esteja no StoreFront 2.0 é necessário entrar em contato com a sua agência para implementação no StoreFront, temos uma documentação técnica sobre a implementação.

Agora se a loja possui o Chekcout 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.