Angular - 看不到如何隐藏此 API 密钥

Question

我的 Angular 应用声明中有以下代码 - Facebook 的 API 密钥（用于实现分享按钮）：

.run(function($FB){
  $FB.init('9xxxxxxxxxxxx94');
})

所以我知道这个问题的一般答案——“API 密钥应该保存在服务器端”，但是我不知道我是如何实际实现的。

共享调用方法是在前端进行的，所以即使我的服务器保留了 API 密钥并发送了它，它肯定仍然在前端可见，否则共享按钮将如何工作？

所以我的问题是，如何隐藏该 Facebook API 密钥？

谢谢。

Answer 1

请求密钥

发生的第一件事是客户端将请求一个密钥。这只会发生在某些页面上，例如注册和登录页面。这里的想法是，我们要确保只有使用已知客户端（在本例中为官方网站或称为核心客户端）浏览的用户才能执行创建或验证用户等操作。

因此，当客户端应用程序请求登录页面时，服务器会根据请求中发送的信息生成唯一令牌。使用的信息总是服务器知道的，客户端知道的，以及双方都知道的。例如，服务器可以根据User agent + current time + secret key 生成唯一密钥。服务器根据这些信息生成一个哈希值，然后在客户端机器上存储一个只包含哈希值的 cookie。

设置权限

此时我们的钥匙真的不再是钥匙了。它已被转换为访问令牌。然后，服务器应获取此访问令牌并将其存储以供以后检索。您可以将键放在数据库中，但由于这种类型的数据需要经常检索，我建议使用 Redis 之类的键值存储来减少数据库读取/写入并提高性能。

当您存储令牌时，您还应该存储一个单独的数据以指示哪些权限与令牌相关联。在这种情况下，我们的令牌仅用作注册和验证用户的一种方式，因此我们将其存储在一个值旁边，该值指示令牌属于谁（应用程序的 Web UI）以及它具有哪些权限（仅限于创建和验证用户） .我们像对待任何其他 API 客户端一样对待它，这样我们可以捕获统计信息并控制它的使用方式。

授权请求

当客户端随后发出 POST 请求以创建新用户或登录时，服务器将检查客户端是否与请求一起发送了识别 cookie。如果不是，我们拒绝该请求。如果它确实发送了 cookie，服务器应该再次使用之前使用的值生成散列（这些值要么是已知的，要么随请求一起发送，所以我们并没有给服务器带来太多负担）将其与 cookie 进行比较发送给我们，如果值匹配允许请求继续进行。

Sources - Securing API Keys

或

只需向您的服务器发送一个请求，让他使用隐藏的 API 密钥处理您的请求，然后将您的请求结果返回到您的前端。