在使用Angular时隐藏一个API密钥（在一个环境variables中可能？）

我正在运行一个带有Node / Express后端的小型Angular应用程序。

在我的一个Angular工厂（即在客户端），我向Github发出一个$ http请求来返回用户信息。 然而，一个Github生成的密钥（这意味着保密）需要这样做。

我知道我不能在客户端使用process.env.XYZ。 我想知道如何保持这个关键密钥？ 我必须在后端提出请求吗？ 如果是这样，我如何将返回的Github数据传输到前端？

对不起，如果这似乎是简单的，但我是一个相对的新手，所以任何明确的答复代码示例将不胜感激。 谢谢

不幸的是，您必须在您的后端代理请求，以保持关键的秘密。 （我假设你需要一些不可用的用户数据，像https://api.github.com/users/rsp?callback=foo这样的未经validation的请求，否则你不需要首先使用API​​密钥 – 但你没有具体说明你需要做什么，这只是我的猜测）。

你可以做的是这样的：在你的后端，你可以为你的前端添加一个新的路由只是为了获取信息。 它可以做任何你需要的 – 使用或不使用任何秘密的API密钥，validation请求，在返回给你的客户之前处理响应等。

例： 

var app = require('express')(); app.get('/github-user/:user', function (req, res) { getUser(req.params.user, function (err, data) { if (err) res.json({error: "Some error"}); else res.json(data); }); }); function getUser(user, callback) { // a stub function that should do something more if (!user) callback("Error"); else callback(null, {user:user, name:"The user "+user}); } app.listen(3000, function () { console.log('Listening on port 3000'); });

在这个例子中你可以得到用户信息：

  • HTTP：//本地主机：3000 / GitHub的用户/ ABC

函数getUser应该向GitHub发出一个实际的请求，在你调用它之前，你可以改变它是否是你正在发出请求的前端，例如通过cheching“Referer”头或其他东西，validationinput等。

现在，如果你只需要一个公共信息，那么你也许可以像这样使用一个公共的JSON-P API–一个使用jQuery来简化事情的例子： 

 var user = prompt("User name:"); var req = $.getJSON('https://api.github.com/users/'+user); req.then(function (data) { console.log(data); });

请参阅DEMO

Interesting Posts