在纯前端应用程序上存储服务凭据的位置和方式

Question

我希望在客户端运行JavaScript，即浏览器，构建一个纯粹的前端应用程序。我的应用程序应该向第三方服务发出请求，这需要某种身份验证方法。

后端框架为这类事物提供了配置文件，但由于JS代码都是在客户机上解释的，因此配置文件不能成为捆绑包的一部分。

有没有办法在客户端中安全地存储服务API密钥，凭证等，或者我是否还需要后端解决方案？

搜索配置文件的大多数流行框架（Angular和React）仅导致存储特定于环境的URL。我开始认为自己已经走到了尽头，但这根本无法完成。

Answer 1

取决于......您不希望用户能够嗅出您必须发送给第三方的任何秘密，但是如果使用OAuth2进行隐式授权，您实际上可以启动并完成它浏览器。

您将重定向到第三方进行登录/身份验证，然后用户将在一段时间内使用访问令牌发回给您。

该令牌实际上是根据规范在URL片段中发送的，因此它被发送到浏览器而不是您的服务器。如果要将访问令牌获取到服务器，则需要前端代码来解析URL片段并发送其内容。

如果API允许您从浏览器进行连接，则可以将所有内容保留在浏览器中，而不需要后端服务器来处理凭据。但并非每个API都允许纯粹的前端身份验证和API调用。

所以，这取决于......

Answer 2

您可以在客户端缓存或Cookie等中存储服务API吗？是。它是 安全 通过网络发送并存储在浏览器中吗？ 否即可。

如果保证凭证安全是要求的一部分，我会在后端进行身份验证或使用为您执行此操作的第三方服务。