APP Login Social - Documentação Oficial

Hoje em dia poucas pessoas tem paciência de preencher formulários de cadastros, e muitas vezes isso pode te prejudicar pois, ao ver um cadastro com nome + sobrenome + email seu usuário pode até mudar de idéia por que vamos combinar, ninguém tem mais tempo hoje em dia!

Pensando nisso, o que acha de oferecer login via redes sociais aos seus usuários? Assim fica tudo muito mais fácil certo? :)

Principais características da aplicação:

• Ação de login com criação de conta na mesma base nativa WC
• Vínculo entre usuários && login em outra tabela sem necessidade de alteração da ws_users
• Redirecionamento nativo caso necessário
• Opção de logar via fb em comentários. Publicando o comentário no momento do login

Adicionado

• Adicionado login via Google

Melhorado

• Melhorada a modal de solicitação de dados do cliente
• Refeita toda a lógica de login, dando possibilidade para futuras novas redes de login
• Atualizada a SDK do Facebook

Para começar, precisamos copiar os arquivos para dentro do painel administrativo WorkControl. Siga a lista abaixo de arquivos e seu respectivo local de destino:

Arquivo /_app/Config.inc.php (a partir da linha #112 do WC original).
Adicione somente o conteúdo em negrito no arquivo, conforme abaixo:

(...)
require 'Config/Config.inc.php';
require 'Config/Agency.inc.php';
require 'Config/Client.inc.php';
// LOGIN SOCIAL
require 'Config/Custom.inc.php';

Importante: Caso você já tenha instalado alguma outra aplicação comprada aqui no meu marketplace e o require para esse arquivo Custom.inc.php já existir, você não precisa (e não deve) chamá-lo novamente neste local... O que você precisa fazer é copiar o conteúdo do novo arquivo e mesclar com o conteúdo existente!

Para que o projeto possa receber os dados do usuário que deseja fazer o login, você precisa ter Aplicações no Facebook e no Google ativas! 

DICA: Sugiro que crie uma aplicação para os testes internos do projeto, e outra para o ambiente de produção! Por que? Vou te explicar com exemplos práticos ...

O aplicativo do Facebook pede o domínio do site, e também a URL! Obviamente seu ambiente local não tem os mesmos dados que o ambiente de produção, por esse motivo, o ideal é configurar uma aplicação para cada ambiente. O Google também se comporta assim ... então temos um padrão!

Você também deve saber que, após a entrega de um projeto devemos evitar deixar as coisas complicadas, com o objetivo de investir o menor tempo possível na manutenção do projeto (caso precise). Ou seja, se você usar o mesmo aplicativo para o ambiente local e para o ambiente de produção, você vai precisar alterar a URL e o domínio lá no aplicativo do Facebook, e também no aplicativo do Google... Então, vamos evitar dores de cabeça?

Por esse motivo, crie dois aplicativos: um para o ambiente local e outro para o ambiente de produção.

1) CRIANDO O APLICATIVO

Como dito acima, vamos criar duas aplicações. Uma para o ambiente local (sandbox) e outro para nosso ambiente real (production).

• Acesse https://developers.facebook.com/apps 
• Crie seu app clicando em "Adicionar um novo aplicativo"
• Preencha o nome como Teste login (sandbox)

Eu particularmente utilizo o mesmo nome para as duas aplicações, com a única diferença de que o aplicativo sandbox tem (sandbox) no final! Faça o mesmo criando suas duas aplicações, e uma delas com a nomenclatura (sandbox) no final

Agora você vai precisar preencher as informações do aplicativo, os dados destacados são obrigatórios:

• 1) Dominios do aplicativo: aqui coloque seu domínio (sem www nem http:// no início). No caso da aplicação para sandbox, coloque 'localhost'. E na aplicação real, insira o domínio que irá receber o Login Social
• 2) URL da Politica de Privacidade: aqui mesmo no aplicativo sandbox, você precisa inserir um link válido. Sugiro que coloque um link que realmente possua as políticas de seu site... Mas caso não tenha, coloque /contato que já funciona
• 3) URL dos Termos de Serviço: mesma observação do item acima, mas dessa vez um link com os Termos de Serviço

2) CONFIGURANDO O SITE

Agora precisamos configurar a app para que ela saiba que vamos usar o Login via Facebook em nosso site: 

Depois de adicionar o site conforme a imagem acima, configure o link do site que receberá o Login Social:

Lembre-se que é por esse motivo que criamos as duas aplicações, uma para o ambiente local e outra para o ambiente real. Isso evitará que você precise alterar os domínios e URL's do aplicativo sempre que precisar de manutenção (leia aqui a explicação completa). 

Salve as alterações!

3) ATIVANDO A APLICAÇÃO

Agora você precisa ativar para que seu ID e a Chave tenham validade. Para isso, você precisa clicar no status "Em Desenvolvimento" logo no topo da página, e confirmar a modal que vai aparecer!

* Caso não tenha escolhido uma categoria, selecione-a agora! Lembre-se que o Facebook adora bloquear aplicações caso algo não siga as suas políticas, então, selecione uma categoria que realmente se encaixa no objetivo do seu site!

PRONTO!

Agora você pode copiar e colar o ID do Aplicativo, e a Chave Secreta do Aplicativo para o sistema, preenchendo as informações conforme abaixo.

Arquivo _app/Config/Custom.inc.php:

Claro... Substitua os zeros pelo ID e a Chave Secreta do Aplicativo. Salve e pronto!

1) CRIANDO AMBIENTE NO GOOGLE

Bom, agora vamos ao login via Google.

Aqui o Google usa credenciais para validar algo. E o que precisamos é um ID do cliente OAuth 2.0 (aplicativo da web), e é isso que faremos agora!

• Acesse https://console.developers.google.com/apis/credentials (verifique em qual conta você está logado(a))
• No topo da página, procure um botão chamado "Criar Credenciais" e clique nele
• No select que aparecer, selecione a opção "Criar ID do cliente do OAuth" e na tela seguinte selecione a opção "Aplicativo da web"

Agora, muita atenção!! Lembra que comentei que precisamos de um aplicativo para o ambiente local, e outro para o ambiente de produção? Pois bem, aqui no Google funciona diferente, então crie um nome que você possa usar em ambos os ambientes (não use (sandbox) por exemplo)

• Preencha apenas o nome, e confirme!

Depois disso, seu ID e Chave irão aparecer em tela. Copie e cole nas configurações:

Arquivo _app/Config/Custom.inc.php:

Substitua os zeros pelas informações que você copiou na modal. Use o mesmo APP ID e APP SECRET para o ambiente real e ambiente sandbox;

2) AUTORIZANDO URL's 

Este passo é um dos mais importantes! Até agora foi fácil criar a aplicação lá no Google, mas agora precisamos autorizar as URL's para que o Google possa identificar de onde vem a requisição, e tomar a decisão de aprovar ou não.

Se a URL não estiver nessa lista, com certeza um erro do Google (não autorizado) irá aparecer na modal de login, então vamos lá... Nos detalhes da aplicação que você criou, há uma seção chamada "URIs de redirecionamento autorizados" - é isso que precisamos configurar:

Note o seguinte... Na imagem temos 4 url's configuradas. As 2 primeiras são do ambiente local, e as duas últimas são do ambiente real. 

Mas por que duas URL's em cada ambiente, não seria uma só pra cada um?  O Google precisa saber de todas as URLs que vão executar. No nosso caso, o sistema abre uma pop-up no caminho real da aplicação, e depois de logado o Google vai direcionar para uma outra URL (não entrarei em tantos detalhes) - o que você precisa saber é que a nossa popup usa duas URL's, logo, temos que informá-las.

Use os dados abaixo como base para informar suas URL's:

• https://localhost/seu-projeto/_cdn/widgets/loginsoc/login.php
• https://localhost/seu-projeto/_cdn/widgets/loginsoc/login.php?platform=google
• https://www.dominio.com.br/_cdn/widgets/loginsoc/login.php
• https://www.dominio.com.br/_cdn/widgets/loginsoc/login.php?platform=google

Boa! Tenho certeza que sacou a jogada... O arquivo login.php é acessado diretamente no primeiro momento, e no segundo momento (assim que o cliente autoriza o login) é jogado para o mesmo login.php, mas informando que a plataforma é o Google via GET, nossa aplicação precisa disso e você precisa informar essa URL também.

Use os dados acima para configurar suas URL's! E é claro, substitua o que está em negrito para a realidade do seu ambiente!

Depois de configurado clique no botão "SALVAR" e estará tudo pronto!

Precisamos fazer a importação das tabelas responsáveis pelo gerenciamento da sua aplicação. Para isso, utilize o seu SGBD padrão ou utilize o seu phpmyadmin

Na raiz da pasta baixada temos o arquivo login-social_1.3.0.sql! Você deve importá-lo para dentro do banco de dados de sua aplicação!

Agora, depois de quase tudo feito é necessário dar um reset dentro da área administrativa do WorkControl, para que os IDs e as Chaves possam ser cadastradas no WorkControl e nosso login possa funcionar!

Para fazer isso basta ir até Menu > Configurações > Configurações Gerais e clicar no botão Resetar Configurações.

Os botões de login e a modal estão isoladas dentro da aplicação. Portanto, você não precisa alterar nenhum arquivo nativo WorkControl, a não ser fazer o 'require' dos botões no local onde você precisa que o login social aconteça!

Como exemplo, vamos usar a tela de login para a Área do Cliente nativa WorkControl - usada no vídeo de demonstração!

Arquivo _cdn/widgets/account/login.form.php

Copie e cole no seu ambiente:

<?php require './_cdn/widgets/loginsoc/loginsoc.inc.php'; ?>

É só isso! Depois de incluir o require, os botões já irão aparecer estilizados e funcionando!

Pronto! Se você seguiu corretamente este tutorial seu login social já deve estar funcionando!