AngularJS API令牌

Question

我想用dribbbble的API构建一些东西。

在阅读API文档时，我需要将HEADER设置为API_KEY。

 var token = 'MY TOKEN HERE';

 $http({
                    method: 'GET',
                    url: 'https://api.dribbble.com/v1/my_user',
                    headers: {
                        'Authorization': 'Bearer ' + token
                    }
                }).success(function() { ... });

是否可以隐藏令牌，从而阻止用户在页面源中看到我的API KEY？

有人可以向我解释在$ http中使用API​​ KEYS的最佳做法是什么？

Answer 1

最好的选择是创建自己的Web服务并调用运球api服务器端。 您根本无法采取任何措施来保护该客户端等信息。

运球有可能将您的api请求验证为主机名和密钥的组合，因此您认为可能不是一个重要的问题。

tl; dr- 没有什么是安全的客户端。

Answer 2

如果您的API密钥在JavaScript中的某个位置，则无法采取任何措施完全保护您的API密钥。 这就是为什么许多第三方服务要求您提供从中调用其API的域，以便它们仅在密钥来自您注册的域时才可以验证密钥的原因。

保护API密钥的正确方法是创建一个服务器端包装程序，该包装程序将发出请求，并从JavaScript进行调用。 甚至将API密钥硬编码在服务器端代码中也是一个坏主意-最佳实践是将它们设置为环境变量。

Answer 3

当我需要在Angular JS中创建自定义标头时，通常会使用此方法。 在使用$ http的Module的开头，我像这样设置get和post的标头。

$http.defaults.headers.get = { 'apikeyName' : 'yourkey' }
$http.defaults.headers.post = { 'apikeyName' : 'yourkey' }

然后，每当您在该模块中使用$ http时，就会发送这些标头，而无需每次都指定它们。

是否可以隐藏令牌，从而阻止用户在页面源中看到我的API KEY？ 不，您的Angular JS是客户端，因此每个客户端都可以看到密钥。 （请参见上面的答案）

亲切的问候