Configurando Login com Google

Estaremos explicando neste tópico como você pode criar sua conta Google API para gerar os tokens necessários para configurar login com Google em sua Loja Virtual.

Para encontrar suas credenciais, e configurar tudo no Interago, vamos separar cada uma das etapas em passo a passo:

1. Acessando sua página de credenciais com a conta Google;
2. Criando credenciais OAuth;
3. Configurando Tela de permissão OAuth;
4. Publicando seu aplicativo;
5. Criando ID do cliente do OAuth;
6. Configurando credenciais de Login com Google no Interago.

1. Acessando sua página de credenciais com a conta Google:

Para fazer todas as nossas estapas, esteja logado em sua Conta Google em seu navegador.

Paga logar em sua conta Google, acesse: https://accounts.google.com/

Após acessar sua conta Google, a configuração das credenciais necessárias será realizada na área de gerenciamento de credenciais: https://console.cloud.google.com/apis/credentials

Você deverá visualizar uma tela como esta:  

Nesta mesma tela, acesse Credenciais > Criar Credenciais > ID do cliente OAuth, como imagem abaixo:

2. Criando credenciais OAuth:

Dentro de ID do cliente do OAuth, será necessário configurar sua tela de consentimento, então clique na opção "CONFIGURAR TELA DE CONSENTIMENTO", conforme ilustração abaixo:

Sua próxima tela será para criar o seu tipo de usuário (User Type) para as credenciais. Nesta tela, selecione a opção "Externo" e clique em "Criar".

3. Configurando Tela de permissão OAuth;

3.1 Tela de permissão OAuth:

Agora estamos na etapa para realizar as configurações de registro do app, faça o preenchimento de cada um dos campos, acrescentando os valores da lista abaixo:

3.1.1. Nome do app*:

Adicione como nome do aplicativo, o valor "Login Loja Virtual - Interago";

3.1.2. E-mail para suporte do usuário:

Neste campo, adicione seu e-mail da Google que você utilizará para receber questões dos usuários de sua Loja Virtual;

3.1.3. Logotipo do app:

Nesta etapa, adicione a logo utilizada em sua Loja Virtual. Caso não encontre o endereço ou não tenha a imagem, entre em contato com a nossa equipe de relacionamento, para receber a logo utilizada em sua Loja Virtual;

3.1.4. Domínio do app:

3.1.4.1. Página inicial do aplicativo:

Neste campo, adicione o endereço da página inicial de sua Loja Virtual, por Exemplo: lojadointerago.com.br

3.1.4.2. Link da política de privacidade do aplicativo:

Adicione o endereço de sua Loja Virtual, com o link de privacidade. Por padrão, o Interago disponibiliza as políticas de privacidade de sua Loja Virtual neste endereço: www.sualojavirtual.com.br/politica-de-privacidade

3.1.4.3. Link dos Termos de Serviço do aplicativo:

Adicione o endereço de sua Loja Virtual, com o link de termos de serviço. Por padrão, o Interago disponibiliza os termos de serviço de sua Loja Virtual neste endereço: www.sualojavirtual.com.br/termos-de-uso

3.1.5. Domínios autorizados:

Adicione no campo "Domínio autorizado" o endereço oficial de sua Loja Virtual.

3.1.6. Dados de contato do desenvolvedor:

Nos dados de contato do desenvolvedor, adicione o endereço de sua conta Google (O Google enviará qualquer atualização neste mesmo endereço).

Após todo o preenchimento, clique em "Salvar e continuar".

Segue imagem de como sua tela estará após todo o preenchimento:

3.2. Etapa criação de escopos:

Os escopos fazem parte da segunda etapa da criação da tela de permissão OAuth, não precisamos realizar nenhuma configuração nesta etapa, basta clicar em "Salvar e Continuar", conforme imagem abaixo:

3.3. Usuários de teste:

Assim como no escopo, não precisamos realizar configurações em usuários de testes, apenas salvando e continuando nesta etapa:

3.4. Resumo:

A última etapa é um resumo de suas configurações, significando que as configurações foram finalizadas e basta entrar na opção "Voltar para o painel", conforme imagem abaixo:

4. Publicando seu aplicativo:

O próximo passo é realizar a publicação do seu aplicativo, para utilizá-lo em ambiente de produção. Para isto, selecione a opção "Publicar aplicativo", na tela de permissão OAuth:

Confirme a publicação para produção. Nesta etapa o status da publicação será "Em produção".

5. Criando ID do cliente do OAuth:

Após publicação, acesse Credenciais > Criar ID do cliente do OAuth.

Agora você terá acesso a uma tela com novas informações, onde você deverá preencher os campos, de acordo com as diretrizes abaixo:

5.1. Tipo de aplicativo:

Selecione a opção "Aplicativo da Web".

5.2 Nome:

Adicione o nome "Login Loja Virtual - Interago".

5.3 Origens JavaScript autorizadas:

Clique na opção "Adicionar URI" e coloque no campo o valor "https://www.interago.com.br".

Clique novamente na opção "Adicionar URI" e coloque no campo o endereço de sua Loja Virtual. EX. "https://www.lojadointerago.com.br".

5.4 URIs de redirecionamento autorizados:

Clique na opção "Adicionar URI" e coloque no campo o valor "https://www.interago.com.br".

Após todo o preenchimento, sua tela deverá estar como imagem abaixo (lembrando que uma URI de JavaScript deve ser o endereço de sua Loja Virtual):

Após preenchimento, clique na opção "Criar". Sua próxima tela, será uma janela com as credenciais que você utilizará no Interago.

Nesta tela, COPIE SUA ID DO CLIENTE e vamos para o Interago para realizar as últimas configurações.

6. Configurando credenciais de Login com Google no Interago:

Após realizar Login no Interago em https://www.interago.com.br/ , acesse no menu da lateral esquerda Extensões > Contas de Área Exclusiva > Configurações.

Na tela de configurações de contas do Interago, no campo "Chave para Conta Google" adicione sua ID DO CLIENTE copiada do Google.

Sua tela deverá estar como a imagem abaixo:

Pronto! Você finalizou as configurações de Login com Google para sua Loja Virtual.

Encontrou dificuldades para realizar alguma etapa? Entre em contato com nossa equipe de relacionamento por WhatsApp ou nos envie um e-mail em suporte@ecowebdesign.com.br