O Social Login é uma abordagem rápida e conveniente para registro e login, pois permite que seus clientes ignorem o preenchimento de formulários de registro. Também aumenta as taxas de conversão de clientes, permitindo que eles entrem em seu site com suas contas de mídia social existentes, como Facebook, Twitter, Google+ e muito mais.
Guia de login social
Este guia o guiará pelo processo de configuração e implementação de um fluxo de login social. Abrange tudo o que você precisa para configurar e implantar o recurso de login social usando o LoginRadius Identity Platform.
Pré-requisitos
Uma conta de provedor social que você deseja implementar em seu site.
Conhecimento básico de HTML/JavaScript.
Um gráfico atualizado de todos os pontos de dados com base em provedores pode ser encontrado aqui .
Parte 1 - Configuração
Esta seção abrange as configurações necessárias que você precisa executar no LoginRadius Admin Console para implementar a funcionalidade de Login Social.
Configurar provedor social
Etapa 1: faça login na sua conta do Admin Console e navegue até Configuração da plataforma > Configuração de autenticação > Login social > Provedores sociais .
A seguinte tela aparecerá:
insira a descrição da imagem aqui
Passo 2: Clique no Provedor de ID Social desejado e siga o guia passo a passo para configuração.
Observação: as etapas para configurar cada provedor social podem ser diferentes.
Por exemplo , a tela a seguir exibe as etapas de configuração do Linkedin :
insira a descrição da imagem aqui
Ao concluir as etapas de configuração do Provedor de ID Social selecionado, você obterá as credenciais.
Etapa 3: insira as credenciais obtidas na seção Configurar aplicativo destacada na tela a seguir:
insira a descrição da imagem aqui
Observação: você pode pular a Etapa 4 , no caso de implementar o Login Social usando o Identity Experience Framework (IDX).
Etapa 4: coloque o domínio do seu aplicativo na lista de permissões, conforme explicado abaixo:
No LoginRadius Admin Console, navegue até Deployment > Apps e a seguinte tela aparecerá:
insira a descrição da imagem aqui
Clique no botão Adicionar novo site , a seguinte seção será exibida:
insira a descrição da imagem aqui
Insira o URL do domínio do aplicativo na caixa de texto e clique no botão Adicionar .
Configurar pontos de dados sociais
Você recebe os dados básicos dos clientes que se registraram usando uma conta social. O respectivo provedor social compartilha os dados básicos como padrão. Para aproveitar os dados adicionais de tais clientes, você deve:
Ative a permissão adicional desejada para seu aplicativo social.
Ative a opção Dados estendidos no Console de administração do LoginRadius.
A seguir, explica como você pode definir a opção Dados estendidos no Console de administração do LoginRadius:
Etapa 1. Navegue até Configuração de plataforma > Configuração de autenticação > Login social > Configurações de dados sociais .
Aparecerá a seguinte tela, onde a opção Dados Básicos está habilitada por padrão:
Configurações de dados sociais - Dados básicos
Etapa 2. Clique no botão Dados estendidos para habilitar os pontos de dados estendidos.
Configurações de dados sociais - Dados estendidos
Nota: O acesso a pontos de dados além dos Dados Básicos pode exigir etapas adicionais com o(s) provedor(es) social(is) selecionado(s).
Parte 2 - Implantação
A LoginRadius Identity Platform oferece suporte a uma variedade de metodologias de implementação que permitem personalizar os fluxos de clientes. Este guia se concentra na implementação básica do Identity Experience Framework, mas pode ser realizado com qualquer uma das outras metodologias de implementação suportadas pelo LoginRadius.
Detalhes completos sobre essas metodologias podem ser encontrados aqui .
Etapa 1: localize o URL da página de autenticação conforme explicado abaixo:
Navegue até Deployment > Identity Experience Framework (hospedado) e a seguinte tela aparecerá:
URL da página de autenticação
O URL da página de autenticação exibe seu domínio IDX exclusivo no seguinte formato:
<https://<sitename>.hub.loginradius.com/auth.aspx>
Na URL acima, sitename é o nome do seu site LoginRadius.
Você pode navegar diretamente para este domínio para revisar suas interfaces configuradas da Parte 1 .
Etapa 2: incorpore páginas de autenticação em seu site, conforme explicado abaixo:
Adicione um link em sua página da Web para redirecionar os clientes para a página do Identity Experience Framework (hospedada).
<a href="https://<LoginRadius Site Name>.hub.loginradius.com/auth.aspx?action=<Desired Action>&return_url=<Return URL>">Register</a>
No URL acima, substitua o seguinte:
Nome do site LoginRadius : Seu nome exclusivo do site LoginRadius .
Ação Desejada : A seguir está a lista de ações que você pode usar.
Entrar
Cadastrar
Sair
Exemplos:
Página de login
<a href="https://<LoginRadius Site Name>.hub.loginradius.com/auth.aspx?action=login&return_url=<Return URL>">Login</a>
Página de registro
<a href="https://<LoginRadius Site Name>.hub.loginradius.com/auth.aspx?action=register&return_url=<Return URL>">Register</a>
3. URL de retorno : o URL para o qual você deseja redirecionar os clientes após concluir a ação selecionada.
Experimente este link em sua página, você deve ser redirecionado para a página hospedada do LoginRadius, onde você pode se registrar e fazer o login.
Observação: use o link de URL a seguir para exibir a página de perfil dos clientes conectados.
<a href="https://<LoginRadius site name>.hub.loginradius.com/profile.aspx">View Profile</a>
Observação: temos exemplos específicos de linguagem adicionais aqui se você quiser capturar esse token em outras linguagens de programação.
Etapa 3: armazene o token de acesso capturado conforme explicado abaixo:
Depois que um cliente concluir a ação de login, a página IDX redirecionará o cliente de volta para a URL de retorno especificada e incluirá um token de acesso como parâmetro de consulta na URL.
<Redirect URL>?token=<Access Token>
Para obter o token de acesso, adicione este snippet de JavaScript em sua página da web
function getParameterByName(name) {
name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
var results = regex.exec(location.search);
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
}
var access_token = getParameterByName(“token”);
Se você já adicionou a função getParameterByName , chame essa função para obter o token de acesso na variável access_token.
Você pode armazenar o token de acesso obtido em seu cookie, armazenamento local e muito mais, conforme o caso de uso. A seguir estão os códigos de exemplo para armazenar o token de acesso em um cookie e armazenamento local:
Armazenando no cookie:
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
Aqui cname é o nome do cookie, cvalue é access_token e exdays é a data de expiração do cookie onde você precisa passar o número de dias.
setCookie(“lr-session-token”, access_token, “No days”)
Armazenando no armazenamento local:
localStorage.setItem("lr-session-token", access_token);// First parameter will be the local storage name and 2nd parameter will be access_token
Etapa 4: você pode usar o token de acesso conforme explicado abaixo:
Chame a API LoginRadius para recuperar o perfil do cliente usando o token de acesso. Como alternativa, você pode aproveitar qualquer um de nossos SDKs para fazer isso.
Veja a seguir o exemplo de script para recuperar o perfil do cliente:
<script>
var xhr = new XMLHttpRequest();
url = "https://api.loginradius.com/identity/v2/auth/account?apiKey=xxxxxx&access_token="+access_token
xhr.open("GET", url);
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
console.log(xhr.response);
}
}
</script>
Nota: Depois que um consumidor faz login por meio de um provedor social configurado, a vinculação da conta é tratada no final do LoginRadius, para obter mais detalhes sobre a vinculação da conta, consulte este documento ., ao escolher um email verification
Nota Adicional : Também fornecemos um recurso no qual você pode criar várias instâncias do mesmo provedor social em sua página de Login/Registro. Confira o documento relevante nas próximas etapas.
Nenhum comentário:
Postar um comentário