javascript - 使用 Angular 时隐藏 API key (也许在环境变量中？)

Question

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

在我的 Angular 工厂之一(即在客户端)，我向 Github 发出 $http 请求以返回用户信息。但是，需要 Github 生成的 key (意味着保密)才能执行此操作。

我知道我不能在客户端使用 process.env.XYZ。我想知道如何将这个 api key 保密？我是否必须改为在后端提出请求？如果可以，如何将返回的Github数据传输到前端？

抱歉，如果这看起来过于简单，但我是一个相对的新手，所以任何带有代码示例的明确回复将不胜感激。谢谢

Answer 1

不幸的是，您必须在后端代理请求以保密 key 。 (我假设您需要一些用户数据，这些数据无法通过未经身份验证的请求(如 https://api.github.com/users/rsp?callback=foo)获得，否则您一开始就不需要使用 API key - 但您没有具体说明您需要做什么这只是我的猜测)。

你可以做的是这样的:在你的后端你可以为你的前端添加一个新的路由来获取信息。它可以做任何您需要的事情——使用或不使用任何 secret API key 、验证请求、在返回给您的客户端之前处理响应等。

例子:

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://localhost:3000/github-user/abc

getUser 函数应该向 GitHub 发出实际请求，在您调用它之前，您可以更改是否确实是您的前端发出请求，例如通过检查“Referer” header 或其他东西，验证输入等。

现在，如果您只需要公共(public)信息，那么您可以像这样使用公共(public) 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