blog

Aug 20, 2023

Como armazenar e acessar chaves de API em um aplicativo React

Você pode fazer muito com APIs, mas certifique-se de manter suas chaves e senhas seguras

Você pode fazer muito com APIs, mas certifique-se de manter suas chaves e senhas seguras e protegidas.

Os aplicativos da Web modernos dependem de APIs externas para funcionalidade adicional. Algumas APIs usam identificadores como chaves e segredos para associar solicitações a um aplicativo específico. Essas chaves são confidenciais e você não deve enviá-las para o GitHub, pois qualquer pessoa pode usá-las para enviar uma solicitação à API usando sua conta.

Este tutorial ensinará como armazenar e acessar chaves de API com segurança em um aplicativo React.

Um aplicativo React que você cria usandocriar-reagir-aplicativo suporta variáveis ​​de ambiente prontas para uso. Ele lê variáveis ​​que começam com REACT_APP e as disponibiliza por meio de process.env. Isso é possível porque o pacote dotenv npm vem instalado e configurado em um aplicativo CRA.

Para armazenar as chaves API, crie um novo arquivo chamado .env no diretório raiz do aplicativo React.

Em seguida, prefixe o nome da chave de API comREACT_APPassim:

Agora você pode acessar a chave de API em qualquer arquivo no aplicativo React usando process.env.

Certifique-se de adicionar .env ao arquivo .gitignore para evitar que o git o rastreie.

Tudo o que você armazena em um arquivo .env fica disponível publicamente na compilação de produção. O React o incorpora nos arquivos de compilação, o que significa que qualquer pessoa pode encontrá-lo inspecionando os arquivos do seu aplicativo. Em vez disso, use um proxy de back-end que chama a API em nome de seu aplicativo de front-end.

Conforme mencionado acima, você deve criar um aplicativo de back-end separado para armazenar variáveis ​​secretas.

Por exemplo, o endpoint da API abaixo busca dados de um URL secreto.

Chame esse endpoint de API para buscar e usar os dados no front-end.

Agora, a menos que você envie o arquivo .env para o GitHub, a URL da API não ficará visível em seus arquivos de construção.

Outra alternativa é usar o Next.js. Você pode acessar variáveis ​​de ambiente privadas na função getStaticProps().

Essa função é executada durante o tempo de compilação no servidor. Assim as variáveis ​​de ambiente que você acessar dentro desta função estarão disponíveis apenas no ambiente Node.js.

Abaixo está um exemplo.

Os dados estarão disponíveis na página via props, e você pode acessá-los da seguinte forma.

Ao contrário do React, você não precisa prefixar o nome da variável com nada e pode adicioná-lo ao arquivo .env assim:

Next.js também permite que você crie endpoints de API nopáginas/API pasta. O código nesses endpoints é executado no servidor, para que você possa mascarar os segredos do front-end.

Por exemplo, o exemplo acima pode ser reescrito nopages/api/getData.jsarquivo como uma rota de API.

Agora você pode acessar os dados retornados por meio do/pages/api/getData.jsponto final.

Enviar APIs para o GitHub não é aconselhável. Qualquer pessoa pode encontrar suas chaves e usá-las para fazer solicitações de API. Ao usar um arquivo .env não rastreado, você evita que isso aconteça.

No entanto, você nunca deve armazenar segredos confidenciais em um arquivo .env em seu código de front-end porque qualquer pessoa pode vê-lo quando inspecionar seu código. Em vez disso, busque os dados no lado do servidor ou use Next.js para mascarar variáveis ​​privadas.

Mary é redatora da MUO com sede em Nairóbi. Ela é bacharel em Física Aplicada e Ciência da Computação, mas gosta mais de trabalhar com tecnologia. Ela codifica e escreve artigos técnicos desde 2020.