英文:
Easiest way to hide api key using Next.js and Vercel?
问题
我正在构建一个使用OpenAI的API的应用程序（使用Next.js和Vercel）。为了使其工作，我可以让前端直接调用API。但是，这样做会将API密钥暴露给浏览器（我知道在前端存储密钥永远不安全）。因此，我想知道运行后端服务并进行API调用的最简单方法是什么？由于唯一的目标是隐藏我的API密钥，我希望使用一个超级轻量级的解决方案。谢谢大家。
我尝试在Vercel中使用环境变量，但似乎仍然需要一个后端服务。
英文:
I am buidling an app that uses OpenAI's API (with Next.js and Vercel). In order to make it work, I can let the frontend make the API call directly. However, doing so will expose the API key to the browser (I know it's never safe to store secrets in the frontend side). Thus, I'm wondering what is the easiest way to run a backend service and make the api call? Since the only goal is to hide my API key, I would prefer a super lightweight solution. Thanks guys.
I tried using Environment Variables in Vercel, however it seems still require a backend service.
答案1
得分: 1
如果您正在寻找一个不需要创建无服务器函数并且不预期调用函数超过200万次的解决方案，我建议考虑使用Firebase云函数。它提供了一种简单的实施和部署过程。此外，您可以在Firebase设置中直接调整允许调用您的云函数的域的权限，而无需管理环境变量（.env文件）。
Firebase云函数轻量且提供了一种直接的方式来实现您的目标，无需复杂的基础架构设置。您可以快速设置和部署您的函数，然后定义哪些域名有权调用它。这种方法消除了单独管理环境变量的需要，并简化了整体设置过程。
总的来说，Firebase云函数为您实现所需功能提供了便捷且高效的解决方案，而无需创建和管理单独的无服务器函数。
英文:
If you're looking for a solution that doesn't involve creating a serverless function and you don't anticipate calling your function more than 2 million times, I would recommend considering Firebase Cloud Functions. It provides an easy implementation and deployment process. Additionally, instead of managing environment variables (.env files), you can adjust permissions for domains that are allowed to call your Cloud Function directly in the Firebase settings.
Firebase Cloud Functions are lightweight and offer a straightforward way to achieve your goal without the need for complex infrastructure setup. You can quickly set up and deploy your function, and then define which domains are authorized to invoke it. This approach eliminates the need for managing environment variables separately and simplifies the overall setup process.
Overall, Firebase Cloud Functions offer a convenient and efficient solution for implementing your desired functionality without the overhead of creating and managing a separate serverless function.
答案2
得分: 0
你可以按照以下步骤在Next.js和Vercel中隐藏API密钥：
- 创建一个API路由或Next.js中的无服务器函数，用作后端服务。这将负责安全地存储和处理API密钥。
- 将API密钥存储为环境变量：在Vercel中，你可以定义可以在Next应用程序内访问的环境变量。将API密钥存储为Vercel的环境变量。
- 在你的无服务器函数中使用环境变量，使用'process.env'确保在这个无服务器函数中获取密钥。
- 从无服务器函数发起API调用：在无服务器函数内部，使用API密钥调用OpenAI的API。这样，API密钥就不会暴露给前端。
让我知道这是否解决了你的问题 
英文:
You can follow these steps to hide KEYS using nextjs and vercel :
- create an API route or serverless function in next that will act as backend service.This will be responsible for securely storing and handling the API key.
- Store API keys as an env variable: In Vercel, you define env variables that can be accessed within your Next application. Store your API key as an env variable in Vercel.
- Make use of env variable in your serverless function with 'process.env' make sure you obtain the key in this serverless function.
- Make the API call from the serverless function: Within the serverless function, use the API key to make the API call to OpenAI's API. This way, the API key will not be exposed to the frontend.
let me know if this resolves your query
答案3
得分: 0
你可以代理api密钥或集成oauth2用户身份验证，例如使用auth0、okta、nextauth或其他许多方法来保护您的api路由，或者您可以使用加密中继。
英文:
You could proxy the api-key or
integrate oauth2 user authentication using something like auth0, okta, nextauth or many others to secure your api routes,
Or you could use encrypted relays.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论