Angular – 看不到如何隐藏这个API Key

我在我的angular应用程序声明中有以下代码 – Facebook的API键(实现Sharebutton):

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

所以我知道这个的一般答案 – 'API密钥应该保留在服务器端',但是我不明白我是如何实际执行这个。

共享呼叫方法是在前端进行的,所以即使我的服务器保存了API密钥并发送了它,当然在前端仍然可见,否则共享button将如何工作?

所以我的问题,我如何隐藏Facebook的API密钥?

谢谢。

请求密钥

发生的第一件事是客户端将要求一个密钥。 这只会在注册和login页面等特定页面上发生。 这里的想法是,我们要确保只有用户使用已知的客户端浏览(在本例中,官方网站或核心客户端,因为它被称为)允许采取行动,如创build或authentication用户。

因此,当客户端应用程序请求login页面时,服务器将根据请求中发送的信息生成唯一的令牌。 所使用的信息总是服务器知道的东西,客户知道的东西,以及知道的东西。 因此,例如,服务器可以基于User agent + current time + secret key生成唯一User agent + current time + secret key 。 服务器根据这个信息生成一个散列,然后在客户端机器上存储一个只包含散列的cookie。

设置权限

在这一点上,我们的钥匙真的不是一个关键了。 它已经被转换成访问令牌。 然后服务器应该获取该访问令牌并将其存储以供以后检索。 你可以把键放在数据库中,但是由于这种types的数据需要经常检索,所以我build议使用像Redis这样的键值存储来减less数据库的读/写并提高性能。

当您存储令牌时,您还应该存储一个单独的数据片段,以指示与令牌关联的权限。 在这种情况下,我们的令牌只是作为一种注册和validation用户的方式,所以我们将其存储在指示令牌所属的用户(应用程序的Web UI)的值和它具有的权限(限于创build和validation用户) 。 我们对待它就像我们其他的API客户端那样,我们可以捕获统计信息并控制它的使用方式。

授权请求

当客户端发出POST请求来创build新用户或login服务器时,将检查客户端是否随请求一起发送了识别cookie。 如果不是,我们拒绝这个请求。 如果它发送cookie,服务器应该再次使用之前使用的值生成哈希值(这些值或者是已知的,或者随请求一起发送,所以我们并不真正对服务器征税太多)将它与cookie进行比较发送给我们,如果值匹配允许请求继续。

来源 – 保护API密钥

要么

只需向您的服务器发送请求,让他用隐藏的API密钥处理您的请求,并将请求的结果返回到您的前端。