AngularJS - 如何通过Oauth2连接到仅限Twitter应用程序的身份验证?

时间:2013-10-23 21:24:05

标签: angularjs twitter http-headers angular-services

我尝试从Twitter application-only authentication接收accessToken,但我一直收到来自twitter api的405(Method Not Allowed)响应。谁知道怎么解决这个问题?我拼命地卡住了..

我知道以下事实:
  - 最佳做法是从服务器端执行此操作,但我想在客户端使用angular进行尝试   - 应从标题中删除X-Requested-With

这是我创建的工厂:

twitterServices.factory('Connect', function($http){
var factory = {};
var baseUrl = 'https://api.twitter.com/';

var bearerToken = function(){
    var consumerKey = encodeURIComponent('****');
    var consumerSecret = encodeURIComponent('****');
    var tokenCredentials = btoa(consumerKey + ':' + consumerSecret);

    return tokenCredentials;
};

factory.fetchAccessToken = function(scope){
    var oAuthurl = baseUrl + "oauth2/token";
    var headers = {
            'Authorization': 'Basic ' + bearerToken(),
            'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
        };
    $http.defaults.useXDomain = true;
    delete $http.defaults.headers.common['X-Requested-With'];
    $http({method: 'POST', url: oAuthurl, headers: headers, data: 'grant_type=client_credentials'}).
        success(function(data, status){
            scope.status = status;
            scope.data = data;
        }).
        error(function(data, status){
            scope.status = status;
            scope.data = data || "Request failed";
        });
};

factory.fetchTimeLine = function(scope){
    scope.fetchAccessToken();
    //the rest
};
return factory;
});

这是Chrome中的标头请求/响应:

Request URL:`https://api.twitter.com/oauth2/token`
Request Method:OPTIONS
Status Code:405 Method Not Allowed
Request Headersview source
:host:api.twitter.com
:method:OPTIONS
:path:/oauth2/token
:scheme:https
:version:HTTP/1.1
accept:*/*
accept-encoding:gzip,deflate,sdch
accept-language:en-US,en;q=0.8
access-control-request-headers:accept, authorization, content-type
access-control-request-method:POST
origin:`http://localhost`
referer:`http://localhost/test/app/
user-agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.69 Safari/537.36

Response Headersview source
content-length:0
status:405 Method Not Allowed
version:HTTP/1.1

我的控制台显示以下内容:

OPTIONS https://api.twitter.com/oauth2/token 405 (Method Not Allowed) angular.js:9312
OPTIONS https://api.twitter.com/oauth2/token Origin http://localhost is not allowed by Access-Control-Allow-Origin. angular.js:9312
XMLHttpRequest cannot load https://api.twitter.com/oauth2/token. Origin http://localhost is not allowed by Access-Control-Allow-Origin. (index):1

2 个答案:

答案 0 :(得分:1)

答案 1 :(得分:1)

在使用google API时遇到了类似的问题,即使您在系统中注册,也会拒绝来自localhost的请求。

我们通过在/ etc / hosts文件中添加多部分名称并将其绑定到127.0.0.1来解决此问题

例如

127.0.0.1 www.devsite.com

这解决了我为API编写角度服务的最基本问题

按要求更新:

公司控制API访问权限的方法之一是通过白名单。当您使用该服务注册应用程序时,该平台通常会将您在应用程序中列出的域添加到其白名单中。这通常是为了强制您使用单独的API密钥进行单独的服务。当您在本地进行测试时,这可能会使开发方面的工作变得困难。

在这种情况下,我认为Twitter已经明确禁止使用localhost阻止使用第三方工具和机器人的请求。

将您使用API​​密钥注册的域绑定到hosts文件中将导致计算机上该域的任何Web请求跳过dns查找,而是将请求路由到本地开发服务器。这意味着您将在本地访问以下地址测试您的代码:

www.devsite.com:[what ever port your local server is running on]

这可能不是100%api访问问题的解决方案,但它是我经历过的最常见的问题之一。

根据其他回复注意: 您可能会遇到与CORS相关的错误的原因有多种。但仅仅因为你收到了一个并不意味着不可能在前端实现你的代码。通常在以下情况下遇到Angular CORS:

a)您未能正确格式化请求 - 这方面的一个例子可能是你添加了一个标题来表示json是一个预期的结果,而不是它的文本响应。

b)服务或API配置了白名单,需要明确包含“localhost”或本文中讨论的其他域。