Social Login User Guide

(Difference between revisions)
Jump to: navigation, search
(Introdução)
(Configuração do Social Login)
Line 12: Line 12:
  
 
== Configuração do Social Login ==
 
== Configuração do Social Login ==
 +
 +
[[File:Social login settings.png]]
  
 
A imagem acima mostra a tela de configuração do Social Login. Nesta tela deve-se configurar:
 
A imagem acima mostra a tela de configuração do Social Login. Nesta tela deve-se configurar:

Revision as of 13:53, 12 November 2012

Contents

Introdução

Social Login permite que usuários se loguem em websites ou aplicações usando suas contas do Facebook, Twitter, LinkedIn ou outras redes. Isso aumenta o engajamento e taxas de conversão pois oferece um simples processo de cadastro, uma vez que o usuário começa a interagir com o website com apenas 1 clique ao invés de preencher complexos formulários de cadastro. A maioria dos usuários já estão acostumados com suas redes sociais no dia-a-dia e preferem usar logins sociais no lugar do tradicional login com usuário e senha.

Social login diagram.png

A implementação do Social Login consiste em 3 etapas:

  1. Configurar uma instância do Social Login
  2. Instalar o widget no Website
  3. Implementar o callback no Website

Configuração do Social Login

Social login settings.png

A imagem acima mostra a tela de configuração do Social Login. Nesta tela deve-se configurar:

  • Nome: um nome para a instância do Social Login usado apenas como referência interna.
  • Callback url: a url para a qual iremos postar o token de identificação do usuário que acabou de realizar login social no website.
  • Métodos de inscrição: as redes sociais disponíveis para o usuário realizar login social. É possível customizar as aplicações sociais para serem usadas aqui. Estas aplicações sociais podem ser configuradas nas próprias redes sociais para levar em consideração o branding da marca, como o nome e logo:

A criação de aplicações sociais é realizada seguindo os passos de um wizard de configuração:

Instalação do Widget

A instalação do widget no website é realizada a partir da aplicação de um trecho de código em Javascript que carrega o widget no local configurado para ele aparecer. A tela que permite configurar o tema do widget e que fornece o trecho de código Javascript pode ser vista na seguinte imagem:

Ao se entrar na página configurada com o código Javascript, o seguinte widget deve ser visualizado, se configurado com o tema “bricks”:

Ou se configurado com o tema “icons”:

Implementação do Callback

Nesta etapa é implementada a integração do social login com o gerenciamento de usuários já existente no website. Fornecemos APIs que permitem esta integração de uma forma bastante simples. A idéia basicamente é relacionar o “id” do usuário no social login com o “id” do usuário no website. Dois casos podem acontecer:

1. No callback, o “id” do usuário no social login não está relacionado com nenhum usuário do website: neste caso, este é um login social novo, então deve-se criar um usuário no website e relacioná-lo com o usuário do social login, ou, caso já exista um usuário logado no website (via login tradicional, por exemplo), basta relacioná-lo com o usuário do social login.

2. No callback, o “id” do usuário no social login já está relacionado a um usuário do website: neste caso basta logar o usuário na sessão do website.

Para se obter o “id” do usuário no social login na url de callback basta seguir os passos explicados na tela de “Chamar a API” do produto:

Passo 1: Extraia o parâmetro token dos dados do POST

Enviamos nos dados POST um parâmetro “token” que identifica o usuário que acabou de ser registrado na aplicação de Social Login implantada em seu site. Você precisa usar esse token para chamar nossa API e obter a informação de autenticação do usuário.

Passo 2: Chame nossa API para obter informações de autenticação do usuário

Use o token que você acabou de receber e sua API secret para chamar a API login/info. Retornaremos um JSON com as informações básicas do usuário e da autenticação usada por ele.

URL da API para chamar:

  GET https://api.socialidnow.com/v1/marketing/login/info?api_secret=<secret>&token=<token>

Parâmetros:

  • api_secret: o secret fornecido na tela de “Chamar a API”
  • token: o token fornecido no passo 1

Passo 3: Extrair o id do usuário a partir da resposta do login/info

Quando você chamar a API login/info você receberá uma resposta assim:

Você pode usar o campo "id" como a chave única para identificar o usuário em seu site. Este é o “id” do usuário no social login.

Sessão do usuário no Social Login

A API login/info fornece um dado importante: “connection_id”.

Mantemos uma identificação da sessão de cada usuário logado no Social Login para usar em certas APIs e widgets, de forma a manter seguro o acesso a estes recursos. Por enquanto, temos disponíveis os seguintes recursos que dependem do “connection_id”:

  • Connect Widget: permite que usuários relacionem mais de uma rede social a sua conta, permitindo logar no website usando múltiplas redes sociais. Ao integrar o código Javascript deste widget, é necessário passar como parâmetro o “connection_id” do usuário logado no momento.
  • Webform: é possível configurar um webform relacionado a uma instância do social login, mostrando um formulário no contexto do usuário logado no social login. Ao integrar o código Javascript do webform, é necessário passar como parâmetro o “connection_id” do usuário logado no momento.
  • API de Logout: invalida um “connection_id” de um usuário no social login, desta forma não poderá ser usado pelos widgets ou APIs que dependam deste id. Uma boa prática é chamar esta API toda vez que um usuário se desloga do website.

É importante salientar que este “connection_id” muda a cada login social do usuário, portanto, só deve ser usado no contexto de uma sessão de login.

Personal tools
Namespaces
Variants
Actions
Navigation
Toolbox