Autenticação entre app node e app react

Olá, um ótimo dia para todos!

Estou construindo uma rota GET em um app node de uma rota privada do OMS e quero consultar a resposta deste GET em um outro app react, via fetch ou axios.

Com a rota pública, tudo certo, os dados funcionam sem problemas mas gostaria que essa rota fosse acessível apenas pelo app react.

Como rota pública ela fica acessível para qualquer um por:
https://workspace--account.myvtex.com/rota

Como rota privada ela passa a ser acessível pelo “app.io.vtex.com/vendor.app/version/account/workspace/rota

O problema desta última opção é que mesmo liberando no policies do manifest do app react com o código abaixo, ainda recebo o mesmo erro:

Policies:

{
      "name": "outbound-access",
      "attrs": {
        "host": "app.io.vtex.com",
        "path": "*"
      }
    }

Erro:

{
	"code": "Unauthorized",
	"message": "Credential required on call to app.io.vtex.com, but it is either not present or not valid",
	"source": "Vtex.Kube.Router",
	"requestId": "xxx"
}

Tentei mexer aqui com a liberação por vrn na rota do app node mas também não tive sucesso nem achei exemplos que utilizem esse tipo de acesso.

Alguém já passou por essa necessidade e conseguira compartilhar uma solução?

Imagino que falte algo no header da req mas não sei qual informação passar e de onde pegar.

Obrigado!

Boa tarde Henrique
Tudo bem?
Quando você deixou a rota privada, como colocou a permissão de quem pode acessa-la? (como ficou no services.json?)

2 Likes

Boa tarde AnaMB.

No Json ficou assim:

"routes": {
    "orders": {
      "path": "/_v/oms/orders/:skuId",
      "public": false,
      "access": "authorized",
      "policies": [
        {
          "effect": "allow",
          "actions": ["get"],
          "principals": ["vrn:apps:*:{{account}}:{{workspace}}:app/{{account}}.*@*"]
        }
      ]
    }
  }

Acredito que o que está errado é seu principals, depois do

:app/

deve ser adicionado quem irá ouvir, no seu caso seria o app do react, então ficaria como:

“vrn:apps::{{account}}:{{workspace}}:app/SeuVendor.SeuApp@

2 Likes

Oi AnaMB, tudo bom?

Não funcionou infelizmente :frowning:

No caso, o app react vai fazer um GET diretamente na rota do app node.

Não encontrei nenhum exemplo na documentação que exemplifique esse caso de uso, no máximo sempre uma comunicação de um app node pra outro app node.

Saberia dizer se existe algum lugar documentando todas as opções de routes e policies de forma mais completa?

Então, na verdade como fazemos na VTEX é não acessar rotas pelo react
Na verdade eu nunca vi até hoje alguém fazendo isso
O que eu recomendo, que eu sei que funciona, é fazer uma camada GraphQL no node para que no react você possa acessa-la usando o useQuery

1 Like

Entendi!

Vocês teriam um exemplo simples ou doc deste caso de uso?

Realmente todos os códigos que pesquisei aqui possuem essa arquitetura de usar o GraphQL por cima e depois acessar pelo useQuery mas queria evitar complexidade para manutenção futura.

Olá!

Tentou passar o VtexIdclientAutCookie no header (do fetch ou axios) ?

Tenho sim
Mas só para entender, você quer a doc de como fazer a parte do node + graphql ou do react + graphql? Ou ambos?

1 Like

Oi AnaMB,

Podem ser as duas docs, se for possível.

Obrigado :slight_smile:

Oi Saito,

Utilizando essa opção direto no componente tenho um erro de cors.

Utilizando o valor do cookie pelo Postman ele retorna um 403 informando que meu usuário não tem acesso para utilizar GET no app/rota que solicitei.

Opa,

Dá uma olhada na discussão que rolou na thread Authorize Masterdata API call from react (admin) to node to masterdata - #5 by sirev pois me parece que é bem similar ao teu problema.

2 Likes

Bom dia henriquems

As docs:
Criando o graphql (parte de serviços):

Usando o serviço (através do graphql):

3 Likes

Oi Saito, tudo bom?

Pelo menos nos testes que realizei aqui, colocando “public”: true ele aceita qualquer tipo de acesso independente da configuração do VRN.

Vou tentar seguir com a opção dada pela AnaMB e retorno aqui no tópico quando tiver resultado.

Obrigado pela ajuda!

1 Like

Olá pessoal,

Resolvido com a abordagem de GraphQL sugerida pela AnaMB.

Para facilitar para futuras consultas, basicamente:

  • Inserção dos builders de GraphQL e Node na aplicação.

  • Criação do graphql/schema.graphql com o type Query contendo a query, parâmetro e tipo da resposta.

  • Criação de arquivo na pasta graphql/types contendo o type da resposta.

  • No node utilizei o IOClients do pacote ‘@vtex/api’ implementando um client do OMS pelo JanusClient.

  • Foi criado também um resolver pra query utilizando esse client do OMS.

  • No React foi utilizada a abordagem com useLazyQuery do react-apollo.

Uma boa dica para quem não estiver familiarizado é estudar os códigos do VTEX-apps no github.

Aqui baseei boa parte dos estudos no B2B Organizations GraphQL que tinha boa parte das coisas que eu queria consultar.

Obrigado pela ajuda!

1 Like