E-commerce

13 set, 2013

Integração Google e Facebook no SmartCheckOut da Vtex

Publicidade

No SmartCheckout, o ID que identifica o cliente no sistema é seu e-mail. No entanto, caso ele queira efetuar alguma alteração nos dados informados durante a primeira compra, é necessário que ele confirme a propriedade do e-mail em questão. Para isso são oferecidas algumas alternativas, entre elas o Facebook e Google Account.

Para que o vtexID realize a autenticação através do Google e do Facebook de forma personalizada, isto é, para que no momento em que o usuário quiser autenticar seu endereço de e-mail no SmartCheckout seja exibido por exemplo “Minha loja.com.br” quer acessar seus dados” ao invés de “VtexID” quer acessar seus dados, é necessários realizar o cadastro da aplicação nos provedores OAuth, no caso o Facebook e o Google.

Após o registro da aplicação serão informados o “Client Id” e o “Client Secret” dessa aplicação. Será necessário enviar essa informação à VTEX para que possamos registar no vtexID o processo de autenticação dessa aplicação através de seu respectivo provedor OAuth (procedimento temporário enquanto não desenvolvemos uma tela que permita a um usuário fazer esse registro).

Segue abaixo imagens exemplificando o registro de uma aplicação no Facebook e Google. Os campos com setas vermelhas são os que devem possuir o mesmo valor que o exposto no exemplo. Os campos com setas laranjas são os valores que devem ser enviados à VTEX.

VtexId1-560x381

Registro da aplicação no Facebook

  • Acessar o FaceBook através do endereço: “https://developers.facebook.com/“;
  • Selecionar a aba “Apps”;
  • Selecionar Criar ou Editar uma aplicação (Editar para o caso de se utilizar uma aplicação que já exista).

Registro da aplicação no Google

  • Acessar uma conta Google através do endereço: “https://code.google.com/apis/console“;
  • Criar um projeto ou selecionar um que já esteja associado a conta;
  • Acessar a aba API Access;
  • Solicitar a criação de um OAuth 2.0 client id e registar o registro de acordo com a imagem abaixo:

VtexID2-560x268