Integração de Login

Suggest Edits

O objetivo do Login Integrado é possibilitar a utilização do mesmo Login e Senha entre uma aplicação externa (Aplicativo, Site) e a Plataforma Wake Commerce.

Entenda melhor com um exemplo prático: uma loja desenvolveu um aplicativo para celular e gostaria de integrar o Login do Aplicativo com Login do Site. Essa integração foi feita através de APIs e telas de Login disponibilizadas pela plataforma.

Fluxo de Requisições

1. Requisição para a página de Login

curl --location -g --request GET 'https://checkout.{loja}.com.br/oauth/connect/authorize?client_id=teste-oauth&scope=openid+traycorp.user+api+offline_access&response_type=code&redirect_uri=https://spaclient-oauth.fbits.net/&id_token=&access_token=&refresh_token'

Campos da requisição:

  • client_id - identificador único da app cliente;
  • scope - openid, profile, api, traycorp.user;
  • response_type- code;
  • redirect_url: URL de callback.

Referente aos campos acima, é necessário que nos seja enviado uma URL de retorno, onde a partir disso, a Wake Commerce cadastrará o cliente_id.

O Scope e o Response_type são nomes padrões de integrações OAuth e esses dois campos podem ser fixos.

2. Retorno do authorization code após o Login no parâmetro code

curl --request GET 'https://{redirect-uri}/?code=4a6cfb3f75d299225df761658863a6b179cd1d2eefef0ec2ae0cf2af1c9ba3fa&scope=openid%20traycorp.user%20api%20offline_access&session_state=A7v2eTNYqFz6iPttxf-ZRze6JJFPTzRjiDiBqtd2EZg.e482b9d4632ed82fcc55ce47ae87211a' \
--form 'client_id=teste-oauth' \
--form 'code=8b912c0f6cbcd870e7608484e291a6601d931400bf3704276c44338228100c96' \
--form 'redirect_uri=https://spaclient-oauth.fbits.net/' \
--form 'grant_type=authorization_code'

3. Requisição do access_token a partir do authorization code

curl --location --request POST 'https://checkout.{loja}.com.br/oauth/connect/token' \
--form 'client_id=teste-oauth' \
--form 'code=8b912c0f6cbcd870e7608484e291a6601d931400bf3704276c44338228100c96' \
--form 'redirect_uri=https://spaclient-oauth.fbits.net/' \
--form 'grant_type=authorization_code'

4. Requisição para obter o Nome do Usuário a partir do access_token

curl --location --request POST 'https://checkout.{loja}.com.br/oauth/connect/userinfo' \
--header 'Authorization: Bearer eyJhbGciOiJSUzI1NiIsImtpZCI6IjAzMjVjZGE1Zjk2NjAzNWI4OGZjNzhjZGI1OGZmYjI2IiwidHlwIjoiSldUIn0.eyJuYmYiOjE1NjY1NzkxMTMsImV4cCI6MTU2NjU4MjcxMywiaXNzIjoiaHR0cHM6Ly9jaGVja291dC5jbHViZWRvbWFsdGUuY29tLmJyL29hdXRoIiwiYXVkIjpbImh0dHBzOi8vY2hlY2tvdXQuY2x1YmVkb21hbHRlLmNvbS5ici9vYXV0aC9yZXNvdXJjZXMiLCJhcGkiXSwiY2xpZW50X2lkIjoidGVzdGUtb2F1dGgiLCJzdWIiOiIxNmQ0MmM2MS04Y2ZlLTQ1M2YtOGYzZS05YWY5NThmZmU5ZGMiLCJhdXRoX3RpbWUiOjE1NjY1NzkwODUsImlkcCI6ImNoZWNrb3V0LmNsdWJlZG9tYWx0ZS5jb20uYnIiLCJzY29wZSI6WyJvcGVuaWQiLCJ0cmF5Y29ycC51c2VyIiwiYXBpIiwib2ZmbGluZV9hY2Nlc3MiXSwiYW1yIjpbImV4dGVybmFsIl19.V88_4VWGlRwkbwcywcu2i4AdY9-R6cwiZ0b85JzJELCE0lK5jd4urPrbASGrWsy5ZygongbKSHiimr9obXvWVaOZyGKSJ5PAoBx-epDpKjyFctm5xiYiZyomyJqQ8e7cm7h-CYxeYpgIxbOi2P6iuEbveaCfmlLPd8VXkj1dle4IOS9oJ_aqFq1T1GJRlYtIt2k7fZIRdGHHbJsIPCqJik87egEndkCDZWsEO5x7gvnj3xP0Z-ufoOYiEn1ZrR7nnSoFLSPj4paWlwC3-HD6jjUsjcFlF0pEWynalUgDASaTJJep972CEOHc_gWVSIf6IVrt0frRAI25X83xMhlnDw'

Customização da página

Para customizar o layout é necessário alterações via CSS. Sendo assim, acesse a ferramenta Style Editor e navegue no menu Produção >> Explorador de Arquivos:

Em seguida, no explorador de arquivos, localize o diretório /c/checkout, conforme indicado na imagem abaixo:

Crie os arquivos oauth.css e oauth.js dentro dessa pasta e os utilize para edição do layout:

A partir deste momento, toda a edição realizada dentro desses dois arquivos será refletida diretamente na página de integração de login via Oauth.

Updated 5 months ago