APP Login Social - Documentação Oficial

APP Login Social

Documentação oficial da aplicação

Voltar para Documentações
Introdução

 

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
Novidades da versão 1.3.0

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
APP - Pastas e Arquivos

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:

Nome da pasta ou arquivo Local de destino
/APP/Custom.inc.php BASE-DO-PROJETO/_app/Config/aqui
WIDGET - Pastas e Arquivos

Nome da pasta ou arquivo Local de destino 
/WIDGET/loginsoc/ BASE-DO-PROJETO/_cdn/widgets/aqui
Configurações Iniciais

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!

Conexão com as Redes

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.

Login Facebook

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).

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:

Login Facebook

  • 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: 

Login Facebook

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

Login Facebook

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!

Login Facebook

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:

Login Facebook

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

Login Google

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:

Login Google

Arquivo _app/Config/Custom.inc.php:

Login Google

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:

Login Google

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!

Dump de Tabelas

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!

Aplicando as Configurações

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.

Aplicando o login

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

Aplicando o login

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!

Aplicando o login

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


Changelog de versões

  • •  v1.3.0
  • •  v1.0.0

Assuntos desta APP

    Ainda não há assuntos relacionados a essa aplicação