如何使用 javascript 连接到带有 oAuth 1.0a 的 API?[棱角.js]

How to connect to a API with oAuth 1.0a using javascript? [Angular.js]

本文关键字:API 棱角 js 0a 连接 javascript 何使用 oAuth      更新时间:2023-09-26

目前,我正在开发一个需要我连接到外部API才能获取JSON文件的Web应用程序。

我正在使用名词项目有问题的 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(

任何人都可以引导我朝着正确的方向前进,或者有更好的方法来使用 Angular.JS 连接到 API?

提前感谢!

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

所有 oauth 步骤都应在服务器端进行。

为什么?简单的答案是你不能在客户端隐藏你的秘密消费者/代币。

我在让客户端工作时遇到了同样的问题,原版在这里 没有身份验证 Tumblr 弹出 喜欢链接:但为了方便起见,我会重新发布它..

找到答案!

所以让我为大家分解一下。我只是要列出在我破解Tumblr API时发现的所有问题和警告。在大多数情况下,您不会在互联网上找到任何这些答案。如果你这样做了,它们很可能只是我对我自己发布到论坛的问题的回答。

Tumblr

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

所有 Tumblr

应用程序在创建时都会获得一组用于访问 Tumblr API 的密钥。OAuth Consumer Key 又名 API 密钥 Secret Key

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

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

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

HelloJS通过使用oauth_proxy定义的中间Web服务来解决这个问题。此服务从数据库中查找机密,并执行预配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集成有所帮助。

John