Guia para a Extensão de Contas, Login e Usuários #8

DEMONSTRAÇÃO

Índice

IntroduçãoInstalaçãoConfiguraçãoEntrar com o Google e FacebookTemplates (create, login, account)Como funciona o login (e-mail e extensão #7)Scripts essenciais para o funcionamentoComo coletar o nome, foto e infos simples para a UIConfigurando URL de retorno após criar conta ou logar

Introdução

🔒 A extensão de Contas tem como objetivo proteger determinados conteúdos de acesso público e também associar outros com usuários específicos.

A extensão abrange a criação de conta, login (autenticação de entrada) e administração da conta.

Instalação

Ao instalar a extensão, atente-se ao layout, pois é necessário colocar o id dos blocos padrão. Essa parte não está automatizada como nas notícias e catálogo de produtos.

✉️ a extensão de login precisa da extensão de notificações personalizadas #7. O e-mail é o identificador primário e único de cada conta.

Configuração

A configuração essencial para a extensão funcionar é escolher o caminho. Neste caminho serão criados (supondo que o caminho é /conta) 3 links:

/conta/create.php 👈 Link para Criação de novas contas. 

/conta/login.php 👈 Link para Autenticar um usuário já cadastrado 💡 Caso Entrar com Google ou Facebook estejam habilitado. É possível criar a conta no próprio login.

/conta/account.php 👈 Link para administração da conta, assim como exclusão da mesma.

📜 Pelo htaccess é possível esconder a extensão para os links ficarem, respectivamente: create, login e account.

Entrar com o Google e Facebook

Utilizamos o web component disponível em pwa-auth para habilitar essa funcionalidade. Este é o link do projeto pwa-auth para mais informações.

⚙️ É necessário colocar as chaves em Configuração para os botões aparecerem nas telas de criar conta e login.

Informações sobre como habilitar a chave para logar com o Google

Informações para habilitar o Facebook com o id do aplicativo

⚠️ Em 10 de maio atualizamos o Entrar com Google para a nova API. Novos websites já virão configurados corretamente. O Facebook continua usando o pwa-auth, entretanto, Google agora usa sua nova api. 🖌️ O layout padrão das lojas já está atualizado.

Veja o que mudou caso precise migrar

Na página de login e criar, trocar o atual L. 171 para (começa na condição para ver se existem as keys):

if($websiteData['googleKey'] != '' || $websiteData['facebookKey'] != '') { $facebook = ''; $websiteData['facebookKey'] != '' ? $facebook = 'facebookkey="'.$websiteData['facebookKey'].'" facebookbuttontext="Facebook"' : $facebook = ''; $render .= '<div id="createSocialContent"><h4 id="createSocialTitle">ou cadastre-se com </h4><pwa-auth appearance="list" '.$facebook.' ></pwa-auth>'; if($websiteData['googleKey'] != '') { $render .= '<script src="https://accounts.google.com/gsi/client" async defer></script> <div id="g_id_onload" data-client_id="'.$websiteData['googleKey'].'" data-callback="handleCredentialResponse" > </div> <div style="display:inline-flex;" class="g_id_signin"  data-type="standard" data-lang="pt-BR" data-size="large", data-auto_prompt="false" ></div>'; } $render .= '</div>'; }

No checkout:

O script precisa vir com o atributo g-auth=2, exemplo como está no template:

<script type=\'module\' src=\'https://www.interago.com.br/App/Extensions/10/tag/checkout.js\' data-modular=\'true\' wId="'.$websiteData['siteIdToken'].'" data-t="'.$websiteData['domainToken'].'" data-w="'.$websiteData['siteId'].'" g-auth=\'2\'></script>

Após inseridos os dados, os botões aparecem automaticamente em create e login. Ao clicar nos botões, tanto o Google quanto o Facebook retornam erro no popup caso haja algum problema com as chaves, possibilitanto com facilidade visualizar o problema pra correção.

Templates

Os templates possuem estilo e diagramação padrão para funcionar corretamente. Não altere classes ou ids no DOM e cuidado antes de remover o css da página, pois incluem mensagens de retorno.

📜 Há scripts fundamentas ao final dos templates para garantir o funcionamento. Os scripts serão melhor explicados adiante, é importante saber que cada arquivo possui um script equivalente.

create.php

Usa o script para validar a criação. O impacto no layout é baixo.

<script type="module" src="https://www.interago.com.br/App/Extensions/8/tag/create.js" defer></script>

login.php

Usa o script para validar o login. O impacto no layout é baixo.

<script type="module" src="https://www.interago.com.br/App/Extensions/8/tag/login.js" defer></script>

account.php

Utiliza o script para validar o usuário, obter e gerenciar informações. O impacto no layout é alto. Os conteúdos dinâmicos tem a UI no script e não no layout. A edição aqui é pequena e restrita ao CSS, basicamente.

<script src="https://www.interago.com.br/App/Extensions/8/tag/account.js"></script>

Os 3 layouts (create, login e account) precisam do checkAcc.js

Assim como todos os itens onde é necessário confirmar a legitimidade do login, os 3 layouts precisam desse script, principalmente o account.php

<script onload="checkAccEvents();" src="https://www.interago.com.br/App/Extensions/8/tag/checkAcc.js" iacc-data="'.$websiteData['siteIdToken'].'"></script>

Os templates utilizam basicamente os parâmetros do website e seo, os quais são invocados pelo $websiteData[] e $seoData[]

return $websiteData = array( "siteId" => $siteId, "siteIdToken" => $siteIdToken, "siteName" => $siteName, "siteDomain" => $siteDomain, "configPath" => $configPath, "googleKey" => $googleKey, "facebookKey" => $facebookKey, "domainToken" => $domainToken );return $seoData = array( "seoAuthor" => $seoAuthor, "seoCoordinates" => $seoCoordinates, "seoState" => $seoState,  "seoRegion" => $seoRegion,  "seoBaseHref" => $seoBaseHref,  "seoCountry" => $seoCountry,  "seoOrganizationName" => $seoOrganizationName, "seoOrganizationUrl" => $seoOrganizationUrl, "seoOrganizationLogo" => $seoOrganizationLogo,  "seoOrganizationLogoWidth" => $seoOrganizationLogoWidth,  "seoOrganizationLogoHeight" => $seoOrganizationLogoHeight,  "seoOrganizationPostalCode" => $seoOrganizationPostalCode,  "seoOrganizationAddress" => $seoOrganizationAddress,  "seoOrganizationHoursWeek" => $seoOrganizationHoursWeek,  "seoOrganizationHoursWeekend" => $seoOrganizationHoursWeekend,  "seoOrganizationPhone" => $seoOrganizationPhone  );

Como funciona o login

Entrar com e-mail: O e-mail é o principal identificador do usuário. Ao entrar com um e-mail válido o usuário irá receber um token de 4 digitos para validar sua conta ( ✉️ o e-mail é enviado pela extensão #7).

✉️ Caso o site não tenha um SMTP próprio configurado na extensão #7 o usuário receberá um e-mail do interago com o prefixo da loja, por exemplo tudoparasuaobra@interago.com.br onde Tudo para sua obra é o nome do website. 💡 Todo website pode enviar e-mails pelo interago sem custo adicional.

🍪 A autenticação funciona por meio de um cookie que é renovado estrategicamente com um novo token quando convém. O cookie chama-se iAcc. Para garantir a segurança da criação de conta e login também são usados os cookies lToken e l_toc para evitar comportamento abusivo. Para testes, remova todos esses cookies para resetar o ambiente ou deslogar na hora.

💾 Também há o uso de localStorage com dados básico que podem ser utilizados na interface. O item chama-se uvc (acrônimo para user visit card).

🛡️ Cada website possui uma criptografia própria para seus tokens. Assim como todos os dados pessoais de todas as contas possuem uma criptografia que precisa da chave do website para ser quebrada. O token exclusivo do website está no script via $websiteData['siteIdToken'] e $websiteData['domainToken']. O domínio do website é usado na criação das contas, por isso, ALTERAR O DOMÍNIO AFETA A VERIFICAÇÃO.

⚠️ O domínio é amplatamente usado na interface, notificações e processo de verificação de conta. É importante que o website tenha maturidade quanto ao domínio para utilizar esta extensão.

Scripts essenciais para o funcionamento

Além dos códigos que se referem a cada tela de Layout (create.js, login.js e account.js), há 1 script para checagem (checkAcc.js) e funções abertas para uso.

<script onload="checkAccEvents();" src="https://www.interago.com.br/App/Extensions/8/tag/checkAcc.js" iacc-data="'.$websiteData['siteIdToken'].'"></script>

Exemplo de um código funciona comentado (usado em account.php)

<script>//função padrão carregada após o script checkAcc.js for carregado (está no próprio script);function checkAccEvents() {   //se o usuário não for autenticado com sucesso, lidateUserCallback retorna false   let validateUserCallback = validateUser();   //código para rodar caso o usuário não esteja logado   if(validateUserCallback == false) {

//exemplo de mudança na UI caso não seja possível ver que o usuário está logado document.querySelector("#profileContainer").innerHTML = "✋ Ops... 🔐 Você precisa entrar para ver esse conteúdo"; }

};

//a função loggedInEvents() é chamada sempre que a confirmação do usuário é processada e confirmada

function loggedInEvents() {

 //a função logOut() desloga o usuário e pode ser adicionada em um evento, como o exemplo abaixo //document.querySelector(\'#logOutButton\').addEventListener(\'click\', e=> {  logOut(); })

}</script>

Código identado 

Como coletar o nome, foto e infos simples para a UI

Use as informações do localStorage para carregar informações básicas na interface, por exemplo: Bem-vindo usuário. Veja o exemplo:

if(localStorage.getItem("uvc") === null) {   //não há informações do usuário... é bom checar com checkAcc.js}else {   let userInfo = JSON.parse(localStorage.getItem("uvc"));   console.log(userInfo.profileName)}

Todas as informações do uvc em json para usar na UI

uvc:"{"profileName":"Leonardo","profileBirthDate":"27\/08\/1985","profileAvatar":"https:\/\/lh3.googleusercontent.com\/a\/AEdFTp5A9_N5nRcF0i4xTTDMP-Qspoe6b7rUxDdvhDo=s96-c","profileCorporativeName":"","profileCorporativeFantasyName":""}"

Configurando URL de retorno após criar conta ou logar

Por padrão, todas as contas são redirecionadas para "conta.php", ou seja, a página de conta para o usuário ver suas informações. Você pode mudar a url tanto na criação (create.php) quanto na página de login (login.php).

Para fazer isso é preciso enviar a variável returnUrl para as páginas de criar e logar. Assim, por exemplo, na tela de login:

https://www.etalproduto.com.br/conta/login.php?returnUrl=https://www.etalproduto.com.br/listas/11/Livros

👆🏻Após logar o usuário irá para www.etalproduto.com.br/listas/11/Livros

Veja um código de exemplo de como alterar a URL dos botões para pegar dinamicamente a URL atual:

Supondo que #accountButtonEnter e #accountButtonCreate são os elements <a> para ir até as telas de Entrar e Criar

//check if exists #accountButtonCreate and #accountButtonEnter, if exists, modify it's hrefh adding ?returnUrl=window.location.hrefif(document.getElementById('accountButtonCreate')) {    document.getElementById('accountButtonCreate').href = 'https://www.etalproduto.com.br/conta/create.php?returnUrl=' + window.location.href;}

if(document.getElementById('accountButtonEnter')) {    document.getElementById('accountButtonEnter').href = 'https://www.etalproduto.com.br/conta/login.php?returnUrl=' + window.location.href;}