javascript 如何通过 AJAX / jQuery 进行 OAuth 身份验证？

How to do OAuth authentication via AJAX / jQuery?

提问by diegoaguilar

I've worked a bit with Twitter web API, I know it works with OAuth, I've consumed the API using a python library. I've also tried a bit of Instagram API using a Java Script small library.

我使用过 Twitter Web API，我知道它适用于 OAuth，我已经使用 Python 库使用了 API。我还使用 Java Script 小型库尝试了一些 Instagram API。

I know those perform web REST requests in the background, authenticating first and then querying requests as I code.

我知道那些在后台执行 Web REST 请求，首先进行身份验证，然后在我编写代码时查询请求。

However, what if I want to perform the requets using jQuery$.ajaxfrom a web application?

但是，如果我想jQuery$.ajax从 Web 应用程序执行请求怎么办？

I've read some docs and sites and it seems it's just possible. Like only ajaxing to the API routes, starting with the authentication route.

我已经阅读了一些文档和网站，这似乎是可能的。就像只对 API 路由进行 ajaxing 一样，从身份验证路由开始。

But, how does this process work? I mean, I query by AJAX to the auth route and then how do I keep track of that authentication. How to keep that communication? Will the redirect URL play its role then?

但是，这个过程是如何运作的呢？我的意思是，我通过 AJAX 查询身份验证路由，然后如何跟踪该身份验证。如何保持这种沟通？那么重定向 URL 会发挥它的作用吗？

Reading this site for Instagram APII start getting a clue about it, but got the doubts mentioned above.

阅读 Instagram API 的这个网站我开始了解它，但得到了上面提到的疑虑。

I want to perform all AJAX requests in the Java Script server background (I'm using node.js), assuming I will provide my apps OAuth in the $.ajax. Is that OK or I can actually code it on client site keeping my OAuth tokens save?

我想在 Java Script 服务器后台执行所有 AJAX 请求（我使用的是node.js），假设我将在$.ajax. 可以吗，或者我实际上可以在客户端站点上对其进行编码以保存我的 OAuth 令牌？

And, if it's concern of this same question, when it comes to bytes(pictures, sound, etc) how to catchthe response from API.

并且，如果关注同一个问题，当涉及到字节（图片、声音等）时，如何捕获来自 API 的响应。

回答by Sreenath H B

Okay, if I understand what you are trying to do is to make an Ajax call from a web page to the Twitter API and post/retrieve tweets and other info from Twitter.

好的，如果我明白您想要做的是从网页到 Twitter API 进行 Ajax 调用，并从 Twitter 发布/检索推文和其他信息。

Since the release of the API v1.1, Twitter has deprecated the v1.0 API and one of the major changes in 1.1 was Authentication Required on all Endpoints

自 API v1.1 发布以来，Twitter 已弃用 v1.0 API，1.1 中的主要变化之一是所有终端都需要身份验证

And to do this from JavaScript and jQuery is quite possible (albeit very cumbersome, difficult and requires the use of many 3rd party JS libraries to HMAC Hash your data and keys and calculate content lengths on the client side before making your Request. Twitter API does not support CORS but does support JSONP for these kind of Ajax requests. But this is not recommended - since doing this on the client side will require you to have your Twitter App Access Keys - Private keys - embedded in your script files - which is basically a big NO-NO. And hence a server side solutions to generate your oAuth tokens is recommended. But once you have achieved that, it may be easier to get the token on your script and make Ajax calls using that from the browser. But I haven't gone that far in my research.

并且从 JavaScript 和 jQuery 做到这一点是完全可能的（尽管非常麻烦、困难并且需要使用许多 3rd 方 JS 库来 HMAC 散列您的数据和密钥并在发出请求之前在客户端计算内容长度。Twitter API 确实如此不支持 CORS 但确实支持此类 Ajax 请求的 JSONP。但不建议这样做 - 因为在客户端执行此操作将要求您将 Twitter 应用程序访问密钥 - 私钥 - 嵌入到您的脚本文件中 - 这基本上是一个很大的NO-NO。因此建议使用服务器端解决方案来生成您的oAuth令牌。但是一旦您实现了这一点，在您的脚本中获取令牌并使用它从浏览器进行Ajax调用可能会更容易。但我在我的研究中还没有走那么远。

Also, this is based off of my research in Mid 2013 when my Twitter Ajax widgets stopped working because of this change and I gave up trying to fix it using that route after I realized it would compromise my security keys. Things may have changed since then.

此外，这是基于我在 2013 年中期的研究，当时我的 Twitter Ajax 小部件由于此更改而停止工作，并且在我意识到它会危及我的安全密钥后，我放弃了尝试使用该路径修复它。从那时起，情况可能发生了变化。

If you are still interested to find a solution, this walkthrough would be a good place to start learning about Twitter's oAuth and how the Access Tokens are generated: https://dev.twitter.com/docs/auth/oauth

如果您仍然有兴趣找到解决方案，本演练将是开始了解 Twitter 的 oAuth 以及如何生成访问令牌的好地方：https://dev.twitter.com/docs/auth/oauth