如何使用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集成。

約翰