Como permitir login com Facebook e Google no WordPress (Elementor)

Quer permitir que seus usuários entrem no site com Facebook ou Google de forma simples? Segue um guia claro e adaptado (em português) a partir do passo-a-passo do plugin PixelYourSite – Social Connect.

Antes de começar (requisitos)

Antes de tudo, você precisa do plugin Social Connect do PixelYourSite. Ele pode ser adquirido do revendedor oficial clicando aqui ou em nosso site, clicando no botão abaixo:

Instalação rápida

1. Compre, baixe e instale o plugin no WordPress.
2. Vá até a aba principal do plugin e clique em Configure (abaixo detalhamos a configuração do Meta e Google) . O plugin exibe um passo-a-passo (em inglês).

Como configurar o login com Meta

O próprio plugin oferece um passo a passo em ingles para você seguir. Mas detalhamos em português para você abaixo:

1. Faça login na sua conta do Meta e vá para a área de desenvolvedores clicando aqui.
2. Clique em Create App (Criar app).
3. Informe o App Name (nome do app) e o App Contact Email, depois avance.
4. Escolha o caso de uso Authenticate and request data from users with Facebook Login (Autenticar e solicitar dados dos usuários com Facebook Login).
5. Selecione o perfil de negócio se tiver, ou escolha I don’t want to connect a business portfolio yet e prossiga.
6. App criado — clique em Go to dashboard (Ir ao painel).
7. No menu à esquerda escolha Use cases e ao lado de Authenticate and request data with Facebook Login clique em Customize.
8. Em Permissions, adicione email (clique em Add ao lado de Email) para que você consiga ler o e-mail do usuário.
9. Em Settings → Facebook Login → Valid OAuth redirect URIs adicione o URI de redirecionamento do plugin, por exemplo: https://seudominio.com/socplug/auth?provider=Facebook Depois clique em Save Changes.
10. Vá em App settings → Basic no menu à esquerda. Ali você verá o App ID e o App Secret — copie-os.
11. Cole App ID (Client ID) e App Secret (Client Secret) nos campos correspondentes no formulário do plugin e salve.

Shortcodes úteis:

Para permitir que o usuário apague a conta: [socplug-remove-account]

Para remover só a conexão com o Facebook: [socplug-remove-data]

Para usar em produção

12. Ainda no painel do Facebook, clique em Publish e preencha os dados adicionais:

• Informações básicas completas.
• Links para Privacy Policy (Política de Privacidade) e Data Deletion (página explicando como o usuário pode excluir dados).
• Ícone do app (1024×1024) e categoria.
• Em Add Platform adicione Website e informe a URL do seu site (https://seudominio.com).
• Preencha instruções para a revisão do app.

13. Em App Review submeta as permissões solicitadas (por exemplo email). Dependendo das permissões, pode ser necessário verificação de negócio (Business Verification).
14. Após aprovação, o app ficará live/public e a autenticação funcionará para todos os usuários.

Como configurar o login com Google

Semelhante ao Facebook, o próprio plugin tem um tutorial em inglês. Porém, abaixo detalhamos ele para você.

1. Faça login na sua conta Google e abra o Google API Console.
2. Em Credentials clique em Create a project (ou selecione um projeto existente).
3. Dê um nome ao projeto e crie-o.
4. Após criar, clique em Create credentials e escolha OAuth client ID.
5. Se solicitado: configure a OAuth Consent Screen primeiro.
   • Escolha External (se o app for para usuários externos).
   • Informe App name, Email de contato e outras informações solicitadas.
   • Adicione links para Política de Privacidade se pedir.
6. Depois de configurar a consent screen, volte e crie o OAuth Client: escolha Web application.
7. Em Authorized JavaScript origins coloque: https://seudominio.com Em Authorized redirect URIs coloque: https://seudominio.com/socplug/auth?provider=Google Clique em Create.
8. Ao criar, você verá Client ID e Client Secret — copie-os.
9. No painel do Google Console, habilite as APIs necessárias (se pedir, pesquise por Google+ API ou APIs de perfil/email e habilite).
10. Publique o app (se a console pedir para publicar o app ou mover da fase de teste para produção, siga as instruções e confirme audiência/publicação).
11. Por fim, lembre-se de colar o Cliente ID e Cliente Secret que você copiou na etapa 8 e clique em “Save Changes”.