设置Instagram身份验证

时间:2016-05-09 18:59:17

标签: javascript angularjs authentication oauth-2.0 instagram

我在使用Instagram设置身份验证时遇到问题。我的目标是获取访问令牌以将评论发布到用户的帐户。

我似乎遇到了CORS问题,因为我一直收到此错误:

XMLHttpRequest cannot load
https://api.instagram.com/oauth/authorize/?client_id=MY_CLIENT_ID…direct_uri=http://localhost:1337/api/instagram/redirect&response_type=code.
No 'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://localhost:1337' is therefore not allowed
access.

我正在使用Instagram's Authentication Documentation

我对CORS问题的理解非常不足。我只是在不知道自己在做什么的情况下扔东西。

这是我的HTML:

<form ng-controller="InstagramController" name="instagramForm" ng-submit="authenticate()">
    <button type="submit" class="btn btn-default">Authenticate Instagram</button>
</form>

角度控制器:

app.controller('InstagramController', function($scope, instagramFactory){

  $scope.authenticate = function(){ 

    instagramFactory.authenticate()
    .then(function(res){
      console.log("res", res);
    });   

  };

});

Angular Factory致电:

app.factory('instagramFactory', function($http){

    return {
        authenticate: function() {
            return $http({
                method: 'GET',
                url: 'https://api.instagram.com/oauth/authorize/?client_id=MY_CLIENT_ID&redirect_uri=http://localhost:1337/api/instagram/redirect&response_type=code'
            });
        }
    };

});

一旦用户选择让我的应用访问其帐户,我就会收到来自Instagram(我永远不会到达)的重定向的路线。 :

var router = require('express').Router();
var cors = require('cors');
module.exports = router;
router.use(cors());
...
router.get('/redirect', function(req, res, next){

    console.log("req.query.code", req.query.code);
    res.end();

});

当我直接在我的浏览器中输入http请求时,我会进入后端并接收“&#39;代码”。请求访问令牌所必需的。

https://api.instagram.com/oauth/authorize/?client_id=MY_CLIENT_ID&redirect_uri=http://localhost:1337/api/instagram/redirect&response_type=code

我怀疑我需要修改Angular Factory中的标题才能正确发出该HTTP请求,但我不知道该怎么做。

在我的app.config函数中,我尝试了this StackOverflow post中找到的一些$ httpProvider方法,但似乎没有任何区别。

app.config(function ($stateProvider, ezfbProvider, $httpProvider) {

  $httpProvider.defaults.useXDomain = true;
  $httpProvider.defaults.withCredentials = true;
  delete $httpProvider.defaults.headers.common["X-Requested-With"];
  $httpProvider.defaults.headers.common["Accept"] = "application/json";
  $httpProvider.defaults.headers.common["Content-Type"] = "application/json";
...

任何帮助都会非常感激。提前谢谢!

0 个答案:

没有答案