如何使用javascript连接到oAuth 1.0a的API？ [Angular.js]

Question

目前，我正在开发一个Web应用程序，它要求我连接到外部API以获取JSON文件。

有问题的API，我正在使用名词项目 ，需要Oauth1.0a身份验证。 现在这个项目要求我使用Angular.JS来处理JSON数据。

但在我使用JSON之前我需要获取它，这就是事情崩溃的地方。 当我尝试使用以下代码连接时，我的http：// localhost：8080 /我一直收到以下错误。

错误 ：

> XMLHttpRequest cannot load
> http://api.thenounproject.com/icons/fish&callback=?&oauth_consumer_key=9c70…891xxxx&oauth_version=1.0&oauth_signature=xxxxx6oeQI0p5U%2Br0xxxxxxx%3D.
> No 'Access-Control-Allow-Origin' header is present on the requested
> resource. Origin 'http://localhost:8080' is therefore not allowed
> access. The response had HTTP status code 403.
> Blockquote

代码 ：

var oAuth = OAuth({
  consumer: {
    public: '9c704cb01xxxxxxxxx',
    secret: '45b7a8d86xxxxxxxxx'
  },
  signature_method: 'HMAC-SHA1'
});

var app = angular.module('nounProject', []);

app.controller('apiController', function(){
  console.log("check");

  var request_data = {
      url: 'http://api.thenounproject.com/icons/fish&callback=?',
      method: 'GET'
  };

  // var token = {
  //   public: 'f5fa91bedfd5xxxxxxxxxx',
  //   secret: '84228963d5e8xxxxxxxxxx'
  // };

  $.ajax({
      url: request_data.url,
      type: request_data.method,
      data: oAuth.authorize(request_data)
  }).done(function(data) {
      console.log(data);
  });

});

我用来访问JavaScript中的OAuth的库如下： https ： //github.com/ddo/oauth-1.0a#client-side-usage-caution （由DDO提供）

任何人都可以指导我朝正确的方向发展，或者有更好的方法将OAuth连接到使用Angular.JS的API吗？

提前致谢！

Answer 1

正确的方法是客户端< - >服务器< - > oauth服务

所有oauth步骤都应该在您的服务器端。

为什么？ 简单的答案是您无法在客户端隐藏您的秘密消费者/令牌。

Answer 2

我遇到了同样的问题，让客户端工作，原来在这里没有身份验证弹出Tumblr喜欢<a>链接 ：但我只是重新发布它以方便..

找到答案！

所以，让我为大家分解一下。我只是要记下在我攻击Tumblr API时发现的所有问题和警告。 在大多数情况下，您不会在内部网上找到任何这些答案。 如果你这样做，他们很可能只是我对我发布在论坛上的问题的答案。

Tumblr应用程序是由Tumblr托管的任何页面模板定义的，它将使用Tumblr API。 申请必须在Tumblr注册： https ： //www.tumblr.com/oauth/apps

创建后的所有Tumblr应用程序都会获得一组用于访问Tumblr API的密钥。 OAuth使用者密钥又称API密钥密钥

Tumblr API主要分为两种不同类型的方法。 第三个是“标记”，用于从博客或用户中提取标记的帖子。

“博客方法”只需要提交消费者密钥。 “用户方法”，需要符合OAuth 1.0a协议的完整OAuth签名请求。 “用户喜欢”一次最多返回50条记录。 这在Tumblr API文档中没有记录。

目前，Tumblr API文档指示开发人员使用众多开源API客户端之一。 但是，所有这些客户端似乎都是服务器端应用程序。 对于仅使用显式授权支持OAuth1或OAuth2的Tumblr等提供程序，需要使用可能未在浏览器中公开的密钥对身份验证流进行签名。

HelloJS通过使用oauth_proxy定义的中间webservice解决了这个问题。 此服务从数据库中查找秘密并执行配置access_token所需的握手。 对于OAuth1，Web服务还会签署后续API请求。

HelloJS - http://adodson.com/hello.js/是唯一可用且免费的客户端Oauth库。 有许多服务以每个api命中为基础充当代理。 HelloJS OAuth代理可从以下网址获得： https ：//auth-server.herokuapp.com/

使用以下社交帐户凭据之一登录OAuth代理：Google，Windows Live，Facebook或Yahoo。 OAuth代理充当安全的“中间人”，允许安全地存储“密钥”，同时仍允许客户端OAuth身份验证。

HelloJS具有特殊的Tumblr模块 - http://adodson.com/hello.js/demos/tumblr.html

HelloJS使用新的Javascript Promises异步函数规范 - https://www.promisejs.org/

Javascript Promises在传递从异步AJAX调用接收的对象时有一些独特的规则。 一切都在回调中完成。 事实上，jQuery所谓的承诺与其他人所谓的承诺完全不同。 希望这有助于未来的Tumblr集成。

约翰