Home-theater-designers
Os aplicativos da Web modernos contam com 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.
MAKEUSEO VÍDEO DO DIA
Este tutorial ensinará como armazenar e acessar chaves de API com segurança em um aplicativo React.
Adicionando variáveis de ambiente em um aplicativo CRA
UMA Reagir o aplicativo que você cria usando criar-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 de API, crie um novo arquivo chamado .env no diretório raiz do aplicativo React.
Em seguida, prefixe o nome da chave de API com REACT_APP assim:
REACT_APP_API_KEY="your_api_key"
Agora você pode acessar a chave de API em qualquer arquivo no aplicativo React usando process.env.
const API_KEY = process.env.REACT_APP_API_KEY
Certifique-se de adicionar .env ao arquivo .gitignore para evitar que o git o rastreie.
Por que você não deve armazenar chaves secretas em .env
Tudo o que você armazena em um arquivo .env está 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 chame a API em nome de seu aplicativo de front-end.
Armazenando variáveis de ambiente no código de back-end
Conforme mencionado acima, você deve criar um aplicativo de back-end separado para armazenar variáveis secretas.
Por exemplo, o O endpoint da API abaixo busca dados de um URL secreto.
const apiURL = process.env.API_URL
app.get('/data', async (req, res) => {
const response = await fetch(apiURL)
const data = response.json()
res.json({data})
})
Chame esse endpoint de API para buscar e usar os dados no front-end.
const data = await fetch('http://backend-url/data')
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 compilação.
Usando Next.js para armazenar variáveis de ambiente
Outra alternativa é usar Next.js. Você pode acessar variáveis de ambiente privado na função getStaticProps().
Essa função é executada durante o tempo de compilação no servidor. Portanto, as variáveis de ambiente que você acessa dentro desta função estarão disponíveis apenas no ambiente Node.js.
Abaixo está um exemplo.
o que você pode comprar com o vale-presente do itunes
export async function getStaticProps() {
const res = await fetch(process.env.API_URL)
const data = res.json()
return {props: { data }}
}
Os dados estarão disponíveis na página via props, e você pode acessá-los da seguinte forma.
function Home({ data }) {
return (
<div>
// render data
</div>
);
}
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:
API_URL=https://secret-url/de3ed3f
Next.js também permite que você crie endpoints de API no páginas/api pasta. O código nesses endpoints é executado no servidor, para que você possa mascarar segredos do front-end.
Por exemplo, o exemplo acima pode ser reescrito na pages/api/getData.js arquivo como uma rota de API.
4B479C8FF1390AFADECE0CFFD337D1B5229075Agora você pode acessar os dados retornados através do /pages/api/getData.js ponto final.
Mantendo as chaves de API secretas
Não é aconselhável enviar APIs para o GitHub. 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 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.