Como Adicionar Login com Um Clique com o Google no WordPress

O login com Google de um clique permite que os visitantes se registrem ou façam login no seu site usando uma conta que eles já possuem. Em vez de criar mais um nome de usuário e senha, eles podem acessar seu conteúdo ou loja online com um único clique.

Descobrimos que os usuários apreciam esse tipo de simplicidade. Oferecer login com Google não apenas torna o processo mais rápido e fácil, mas também pode melhorar a experiência do usuário, aumentar as conversões e reduzir o abandono de carrinho.

Neste guia passo a passo, mostraremos como adicionar o login com Google de um clique ao seu site WordPress para que você possa otimizar toda a jornada do usuário. 🚀

Por que Adicionar Login com Google de Um Clique no WordPress?

Ter o login com Google de um clique ativado no seu formulário de login do WordPress permite que seus usuários economizem tempo ao fazer login rapidamente com sua conta Google. Isso os impede de ter que inserir suas credenciais de login toda vez.

Se você administra um blog simples, talvez não ache esse recurso útil.

Mas se sua organização usa o Google Workspace para endereços de e-mail profissionais, então os membros da sua equipe podem usar as contas dos aplicativos Google da sua organização para fazer login.

Um recurso de login único, como o login com um clique do Google, também é muito útil para qualquer site que exija que os usuários façam login, como sites de múltiplos autores, sites de assinatura, e sites que vendem cursos online.

Crie Seu Formulário de Registro de Usuário Perfeito

WPForms é o melhor construtor de formulários de arrastar e soltar para WordPress. Embora os logins sociais sejam ótimos, o WPForms permite que você crie formulários de registro de usuário totalmente personalizados para coletar exatamente as informações que você precisa de seus usuários.

Você também pode criar formulários de contato, formulários de pagamento, pesquisas e muito mais em apenas alguns minutos.

Comece com o WPForms Hoje

Agora, vamos ver como adicionar facilmente o login com um clique do Google ao seu site WordPress.

Como Adicionar Login com Um Clique do Google no WordPress

Primeiro, você precisará instalar e ativar o plugin Nextend Social Login and Register. Para mais detalhes, consulte nosso guia para iniciantes sobre como instalar um plugin do WordPress.

Para este tutorial, usaremos o plugin gratuito que suporta login do Google, Twitter e Facebook. Existe também uma versão paga do Nextend Social Login que adiciona login social para muitos sites diferentes, incluindo PayPal, Slack e TikTok.

Após a ativação, você precisa ir para Configurações » Nextend Social Login na área de administração do WordPress. Nesta tela, você verá as diferentes opções de login social disponíveis.

Para adicionar um login do Google ao seu site WordPress, você precisa clicar no botão ‘Começar’ sob o logotipo do Google.

Aqui, você verá que seu primeiro passo será criar um aplicativo do Google.

Criar um aplicativo do Google parece técnico, mas não se preocupe.

Você não precisa saber programar e nós o guiaremos por todas as etapas.

Criando um aplicativo Google

Para criar este aplicativo, você precisará alternar entre o painel do WordPress e o Google Developers Console. É uma boa ideia deixar o painel do WordPress aberto na guia atual e abrir uma nova guia no navegador.

Agora, você pode visitar o site Google Developers Console. Se você ainda não estiver conectado, será solicitado que você faça login com sua conta do Google.

Em seguida, você precisa clicar em ‘Selecionar um projeto’ no menu superior. Isso abrirá um pop-up onde você deve clicar no botão ‘Novo projeto’ para continuar.

Isso abrirá a página Novo Projeto. Você precisará adicionar um nome de projeto e selecionar a localização. O nome do projeto pode ser o que você quiser, como ‘Login Google’.

Se você fez login usando uma conta do Google Workspace, a localização será preenchida automaticamente com o nome da sua organização. Caso contrário, você deve deixá-la como ‘Nenhuma organização’.

Em seguida, clique no botão ‘Criar’ para continuar.

Agora você será redirecionado para o painel ‘APIs e Serviços’. Nesta página, você precisa clicar em ‘Tela de consentimento do OAuth’ no menu esquerdo.

Aqui, você precisa escolher o tipo de usuário que você está permitindo fazer login.

Selecione ‘Interno’ se apenas usuários com a conta Google da sua organização farão login. Alternativamente, você deve escolher ‘Externo’ se seus usuários tiverem endereços de e-mail fora da sua organização.

Por exemplo, qualquer pessoa com uma conta @gmail.com em vez de um endereço @suaempresa.com.

Quando estiver pronto para continuar, clique no botão ‘Criar’. Agora, você pode começar a adicionar informações sobre seu aplicativo.

Primeiro, você deve inserir o nome da sua empresa no campo nome do aplicativo. Isso será mostrado ao usuário ao fazer login, como, ‘Smith Training Services deseja acesso à sua conta Google.’

Você também precisa adicionar o endereço de e-mail com o qual fez login no Google. Isso permitirá que seus usuários façam perguntas sobre a tela de login do Google.

Depois de fazer isso, role para baixo até a seção ‘Domínio do aplicativo’. Aqui, você precisa adicionar links para a página inicial do seu site, a página de política de privacidade e a página de termos de serviço.

Em seguida, você precisa clicar no botão ‘Adicionar Domínio’ para adicionar o nome de domínio do seu site, como ‘exemplo.com.’.

Se você quiser adicionar login do Google com um clique a mais de um site, poderá clicar no botão ‘+ Adicionar Domínio’ para adicionar outro domínio.

Finalmente, você precisa adicionar um ou mais endereços de e-mail para que o Google possa notificá-lo sobre quaisquer alterações em seu projeto.

Quando terminar, certifique-se de clicar no botão ‘Salvar e Continuar’.

Em seguida, você chegará às páginas Escopos e Usuários de Teste. Para ambas as páginas, basta rolar até o final e clicar no botão ‘Salvar e Continuar’.

A página final para esta etapa mostrará um resumo das configurações da sua tela de consentimento OAuth.

O próximo trabalho é criar as chaves que seu plugin de login precisará para se conectar ao Google Cloud.

Você deve clicar em ‘Credenciais’ no menu à esquerda e, em seguida, clicar no botão ‘+ Criar Credenciais’ na parte superior da tela. Você precisa selecionar a opção ‘ID do cliente OAuth’.

Isso o levará à página ‘Criar ID do cliente OAuth’.

Você deve selecionar ‘Aplicativo da Web’ no menu suspenso ‘Tipo de aplicativo’.

Algumas configurações serão adicionadas à página. Você precisa rolar para baixo até a seção ‘URIs de redirecionamento autorizadas’ e clicar no botão ‘+ Adicionar URI’.

Agora, você precisa inserir a seguinte URL no campo.

É muito importante que esta URL comece com ‘https://’ porque o Google exige uma conexão segura para que este recurso funcione corretamente.

https://example.com/wp-login.php?loginSocial=google

Apenas certifique-se de substituir ‘example.com’ pelo nome de domínio do seu próprio site.

Depois de fazer isso, você deve clicar no botão ‘Criar’ para armazenar as configurações. Pode levar de 5 minutos a algumas horas para que as configurações entrem em vigor.

Seu cliente OAuth foi criado!

Você verá um pop-up contendo ‘Seu Client ID’ e ‘Seu Client Secret.’ Você precisará colar essas chaves na página de configurações do plugin de volta na área de administração do seu WordPress.

Você pode simplesmente clicar no ícone ‘copiar’ à direita para copiar as chaves uma de cada vez.

Adicionando suas chaves do Google ao seu plugin

Agora, simplesmente volte para a aba do navegador do seu site e clique na aba ‘Configurações’ em Configurações » Nextend Social Login. Aqui, você verá campos para o Client ID e Client Secret.

Você precisa copiar suas chaves do Google Cloud Console e colá-las nesses campos.

Depois de fazer isso, certifique-se de clicar no botão ‘Salvar Alterações’ para armazenar suas configurações.

Agora, você precisará testar se as configurações estão funcionando corretamente. Isso é importante porque você não quer que usuários reais encontrem erros ao tentar fazer login no seu site.

Simplesmente clique no botão ‘Verificar Configurações’, e o plugin garantirá que o aplicativo do Google que você criou esteja funcionando corretamente.

Se você seguiu os passos corretamente, então você deverá ver uma notificação que diz ‘Funciona Bem – Desativado.’

Esta mensagem pode parecer confusa, mas na verdade é uma boa notícia. ‘Funciona Bem’ confirma que suas configurações estão corretas e a conexão com o Google é bem-sucedida.

‘Desativado’ simplesmente significa que o botão de login ainda não está ativo no seu site.

Agora você pode clicar no botão ‘Ativar’ para tornar o login do Google ativo para seus usuários.

Depois de fazer isso, uma mensagem aparecerá, confirmando que o login do Google está agora ativado.

Selecionando o estilo e os rótulos do seu botão

O estilo e o rótulo padrão do Nextend são bem padrão e funcionarão para a maioria dos sites. No entanto, você pode personalizá-los clicando na aba ‘Buttons’ no topo da tela.

Agora você verá todos os diferentes estilos disponíveis para o botão de login social. Para usar um estilo diferente, basta clicar para selecionar o botão de rádio correspondente.

Depois de fazer isso, você também pode alterar o texto do botão editando o texto no campo ‘Login label’.

Se desejar, você pode aplicar uma formatação básica ao rótulo de login usando HTML. Por exemplo, você pode deixar o texto em negrito usando as tags <b> e </b>.

Você também pode editar os campos ‘Link label’ e ‘Unlink label’ que permitem aos usuários vincular e desvincular seu site com suas contas do Google.

Se você quiser colocar o botão de login em outras áreas do seu site, como em um widget de barra lateral ou em uma página específica, você pode fazer isso facilmente usando os shortcodes do plugin.

Certifique-se de clicar no botão ‘Save Changes’ para armazenar suas configurações.

Tirando seu aplicativo Google do modo de teste

Agora, há uma última coisa que você precisa fazer de volta na aba do navegador Google Cloud. Você ainda deve ver o pop-up com seu ID de cliente e segredo do cliente. Você pode dispensar o pop-up clicando em ‘OK’ na parte inferior do pop-up.

Em seguida, você precisa clicar em ‘OAuth consent screen’ no menu esquerdo.

Você pode ver que seu aplicativo Google está no modo ‘Testing’. Isso permite que você teste seu aplicativo com um número limitado de usuários. Agora que você recebeu uma notificação ‘Works Fine’ ao verificar as configurações com o plugin, você pode movê-lo para o modo ‘In Production’.

Você faz isso clicando no botão ‘Publish App’. Em seguida, você verá um pop-up com o título ‘Push to production?’

Simplesmente clique em ‘Confirm’ para permitir que todos usem o login do Google em uma etapa no seu site.

Se você seguiu este tutorial cuidadosamente, o Status de Verificação agora deve ser ‘Verificação não necessária.’

Seu aplicativo agora funcionará com todos os usuários do Google.

Agora, quando os usuários fizerem login em seu site, eles terão a opção de fazer login com o Google.

No entanto, se preferirem, eles ainda podem fazer login usando seu nome de usuário e senha padrão do WordPress.

Veja como o login do Google funciona para seus visitantes.

Novos visitantes podem usar o botão para se registrar instantaneamente para uma conta em seu site. Para usuários existentes, eles podem usar o botão para fazer login, desde que o endereço de e-mail da conta seja o mesmo que o endereço de e-mail do Google.

Se você deseja adicionar o botão de login do Google em qualquer outro lugar em seu site, você pode fazer isso usando um shortcode. Você pode aprender mais clicando na aba ‘Uso’ do Nextend.

Perguntas Frequentes Sobre o Login do Google

Aqui está uma lista de algumas perguntas que nossos leitores frequentemente fazem sobre como adicionar o login do Google ao seu site.

Adicionar o login do Google ao meu site WordPress é seguro?

Sim, é muito seguro. O processo usa o protocolo padrão OAuth 2.0 do Google. Isso significa que seu site nunca lida ou armazena a senha do Google do usuário, garantindo que suas credenciais permaneçam seguras.

Seu site recebe apenas um token seguro do Google para verificar a identidade do usuário.

Posso adicionar opções de login para outras plataformas de mídia social?

Absolutamente. O plugin gratuito Nextend Social Login também suporta Facebook e Twitter. Se você atualizar para a versão paga, poderá adicionar muitas outras plataformas como LinkedIn, PayPal, Slack e TikTok.

E se um visitante não tiver uma conta do Google?

O formulário de login padrão do WordPress permanece totalmente funcional. Adicionar um botão de login do Google oferece uma opção adicional e conveniente, mas não remove os campos padrão de nome de usuário e senha.

Este recurso vai deixar meu site mais lento?

Não, não deve. O plugin Nextend Social Login é leve e otimizado para desempenho. O processo de autenticação ocorre nos servidores rápidos do Google, portanto, não terá um impacto perceptível na velocidade do seu site.

O login do Google funciona com sites WooCommerce ou de membros?

Sim, funciona muito bem com plugins populares de comércio eletrônico e de membros. Simplificar o processo de checkout e registro pode ajudar a reduzir o abandono de carrinho para lojas WooCommerce e aumentar as inscrições em sites que usam plugins como MemberPress.

Recursos Adicionais para Personalizar sua Página de Login

Esperamos que este artigo tenha ajudado você a aprender como adicionar login com um clique com o Google no WordPress.

Você também pode querer ver outros guias sobre como personalizar a experiência de login no seu site:

• Como Adicionar Login com Facebook no WordPress
• Como Adicionar Login Social ao WordPress (O Jeito Fácil)
• Melhores Plugins de Página de Login do WordPress (Seguro e Personalizável)
• Como Adicionar Login Sem Senha no WordPress com Magic Links
• Como Adicionar Login com Número de Telefone via OTP no WordPress
• Como Criar uma Página de Login Personalizada do WordPress (Guia Definitivo)
• Por que e Como Limitar Tentativas de Login no WordPress
• Como Adicionar uma URL de Login Personalizada no WordPress (Passo a Passo)
• Como Adicionar CAPTCHA ao Formulário de Login e Registro do WordPress
• Como Exigir Login para Visualizar uma Página no WordPress
• Guia para Iniciantes sobre Como Adicionar Autenticação de Dois Fatores no WordPress (Método Gratuito)
• Como Restringir o Login de Usuário a Um Dispositivo no WordPress

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.