Angularを使用しているときにAPIキーを非表示にする（おそらく？）

Question

Node/Expressバックエンドで小さなAngularアプリケーションを実行しています。

私のAngularファクトリー（クライアント側）の1つでは、Githubにユーザー情報を返すための$ httpリクエストを行います。しかし、これを行うにはGithub生成キー（秘密にすることを意図しています）が必要です。

クライアント側でprocess.env.XYZを使用することはできません。私はこのapiの鍵をどうやって秘密にしておくことができるのだろうか？代わりにバックエンドでリクエストを行う必要がありますか？その場合、返されたGithubデータをフロントエンドに転送するにはどうすればよいですか？

申し訳ありませんが、これは単純なようですが、私は比較的初心者です。したがって、コード例の明確な回答は非常に高く評価されます。ありがとう

Answer 1

残念ながら、鍵の秘密を保持するために、バックエンドで要求をプロキシする必要があります。 （私はあなたが最初にAPIキーを使う必要はないので、https://api.github.com/users/rsp?callback=fooのような認証されていないリクエストでは利用できないユーザーデータが必要だと仮定しています。ただ私の推測）。

あなたのできることは、次のようなものです：あなたのバックエンドでは、情報を得るためにフロントエンドに新しいルートを追加することができます。

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'); 
}); 

この例では、ユーザーを取得することができます：など、あなたのクライアントに返す前に

例を応答を、任意の秘密APIキーを使用するかではない要求を検証し、プロセス - それはあなたが必要とするものは何でも行うことができます情報：

• http://localhost:3000/github-user/abc

機能getUserは、GIへの実際の要求を行う必要がありますあなたがそれを本当にあなたのフロントエンドであるかどうかを変更することができます。 "Referer"ヘッダーや他のものを尋ねて、入力などを検証してください。

ここで公開情報が必要な場合は、jQueryを使用した例のような公開JSON-P APIを使用することができます物事をシンプルに：

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

はあなたの応答のためのDEMO