如何连接与使用JavaScript的OAuth 1.0a的一个API? [Angular.js]OAuth、JavaScript、js、Angular

2023-09-13 04:18:55 作者:花落忆流年

目前我的工作,需要我连接到外部API来获取一个JSON文件的Web应用程序。

at the moment I'm working on an webapp that requires me to connect to an external API to GET a json file.

有问题的API,我使用api.thenounproject.com需要一个Oauth1.0a认证。现在,这个项目需要我用Angular.JS来处理JSON数据。

The API in question that I'm using "api.thenounproject.com" requires an Oauth1.0a authentication. Now this project requires me to use Angular.JS to handle json data.

但在此之前,我可以用JSON我需要得到它的工作,这就是事情土崩瓦解。我不断收到以下错误在我的http:本地主机:8080当我尝试用下面的code连接

But before I can work with the json I need to GET it, and this is where things fall apart. I keep getting the following error on my http:localhost:8080 when I try to connect with the following code.

错误:

> 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

在code:

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的一种更好的方式与角度连接到一个API?

Can anyone guide me in the right direction, or has a better way to oAuth connect to an API with angular?

在此先感谢!

推荐答案

正确的方法是客户端< - >服务器16; - > OAuth的服务

The right way is client <-> server <-> oauth services

所有OAuth的步骤应该在你的服务器端。

All the oauth steps should be in your server side.

为什么呢?答案很简单,你不能在你的客户端隐藏你的秘密消费者/令牌。

Why? The simple answer is you can't hide your secret consumer/token at your client side.