如何在响应Angular客户端应用程序时发送API密钥?

时间:2016-01-28 17:12:29

标签: javascript angularjs node.js express

我正在尝试使用$ http将我的api密钥从NodeJS路由到Angular客户端应用程序,但我不知道该怎么做。这是我的NodeJS文件:

//http://api.openweathermap.org/data/2.5/weather

var express = require('express');
var router = express.Router();
var request = require('request');

//GET http://localhost:3000
router.get('/', function(req, res, next) {
  var env = process.env.WEATHER_API_KEY;
  request({
    url:'http://api.openweathermap.org/data/2.5/weather',
    qs:req.query
  },function(err,response,body){
    if(err) return res.send(500,err);
    res.send(body);
  });
});


module.exports = router;

这是我的Angular文件:

NewsApp.directive('weather', function() {
 return {
  restrict: 'E',
  scope: {
   location: '=?'
  },
  controller: ['$scope', '$http', function($scope,$http){
   $scope.location = 'Seattle,WA';
    console.log($scope.location);
     $http({
       url:'/api/weather',
       params:{
         q:$scope.location,
         APPID: //place API KEY here,
         units:'imperial'
        }
     }).success(function(data){
        console.log(data)
        var weatherData = data.weather[0];
        $scope.temperature = Math.round(data.main.temp);
        $scope.city = data.name;
        $scope.image = 'http://openweathermap.org/img/w/' + weatherData.icon + '.png';
     })
   }],
    template:'<li class="weather"> \
            Today\'s temperature is: {{temperature}}&deg;<img src="{{image}}">\
            </li>',
    replace: true,
    transclude: true
 }
});

当我在APPID后的params对象的角度文件中手动执行此操作时,我的应用程序工作正常,但我不希望我的api键可见,所以我想通过后端使用我的传递它。使用我的nodejs文件中的变量env的env文件。

2 个答案:

答案 0 :(得分:1)

在将查询字符串转发到API服务器之前,您似乎希望修改它。因此,不要在客户端的查询字符串参数中包含APPID,而是在转发请求之前尝试添加它。

...
//GET http://localhost:3000
router.get('/', function(req, res, next) {
  req.query.APPID = process.env.WEATHER_API_KEY; 
  request({
    url:'http://api.openweathermap.org/data/2.5/weather',
    qs:req.query
},
...

答案 1 :(得分:0)

您可以将密钥附加到服务器上的响应中:

//GET http://localhost:3000
router.get('/', function(req, res, next) {
  var env = process.env.WEATHER_API_KEY;
  request({
    url:'http://api.openweathermap.org/data/2.5/weather',
    qs:req.query
  },function(err,response,body){
    if(err) return res.send(500,err);
    res.send({app_key: env, data: body});
  });
});

在Angular客户端应用中,您可以为密钥发出'GET'请求。收到后,您可以向天气API提出后续请求:

$http({
  method: 'GET',
  url: 'http://localhost:3000'
}).success(function(data) {
  var app_key = data['app_key'];

  // make the request to the API
  http({
    url:'/api/weather',
    params: {
      q: $scope.location,
      APPID: app_key,
      units:'imperial'
    }
  })
})