我如何实现安全的OAuth2消费在Javascript？ [英] How do I implement secure OAuth2 consumption in Javascript?

问题描述

我在PHP中，将使用的OAuth2.0设计API的过程。我的最终目标是建立在JavaScript直接访问此API的前端应用程序（使用AngularJS）。我知道，传统上有没有办法在JavaScript中交易的安全性，因此直接访问的API是不可行的。前端将需要与服务器code，反过来与API直接传达给通信。然而，在研究的OAuth2它看起来好像用户代理流程被设计在这种情况下提供帮助。

I'm in the process of designing an API in PHP that will use OAuth2.0. My end goal is to build a front-end application in javascript (using AngularJS) that accesses this API directly. I know that traditionally there's no way to secure transactions in javascript and so directly accessing an API isn't feasible. The front-end would need to communicate with server code that in turn communicated with the API directly. However, in researching OAuth2 it looks as if the User-Agent Flow is designed to help in this situation.

我需要在JavaScript中正在实施的OAuth2用户代理流量（尤其是AngularJS如果可能因为这是我用什么我的前端）提供帮助。我一直没能找到做任何的例子或教程。我真的不知道从哪里开始，不希望通过整个的OAuth2规范没有至少看到什么，我将着眼于做一个例子来阅读。因此，任何的例子，教程，链接等将大大AP preciated。

What I need help with is implementing the OAuth2 User-Agent Flow in javascript (particularly AngularJS if possible as that's what I'm using for my front-end). I haven't been able to find any examples or tutorials that do this. I really have no idea where to start and don't want to read through the entire OAuth2 spec without at least seeing an example of what I'll be looking at doing. So any examples, tutorials, links, etc would be greatly appreciated.

推荐答案

的隐格兰特流（你指的对视了一眼的用户代理流程的）是完全的路要走：

The Implicit Grant flow (the one you're referring to as User-Agent Flow) is exactly the way to go:

隐含的拨款是使用脚本语言在浏览器中实现客户如JavaScript优化简化授权code流量。

The implicit grant is a simplified authorization code flow optimized for clients implemented in a browser using a scripting language such as JavaScript.

要理解整个流程，从谷歌文档客户端应用程序是一个真正的好地方开始。请注意，他们建议您采取额外的标记验证的步骤，以避免困惑的问题副的。

To understand the flow, the documentation from Google for client-side applications is a really good place to start. Note that they recommend you to take an additional token validation step to avoid confused deputy problems.

下面是一个使用的SoundCloud API和jQuery，从采取这个答案流的简短示例实现：

Here is a short example implementation of the flow using the Soundcloud API and jQuery, taken from this answer:

<script type="text/javascript" charset="utf-8">
  $(function () {
    var extractToken = function(hash) {
      var match = hash.match(/access_token=([\w-]+)/);
      return !!match && match[1];
    };

    var CLIENT_ID = YOUR_CLIENT_ID;
    var AUTHORIZATION_ENDPOINT = "https://soundcloud.com/connect";
    var RESOURCE_ENDPOINT = "https://api.soundcloud.com/me";

    var token = extractToken(document.location.hash);
    if (token) {
      $('div.authenticated').show();

      $('span.token').text(token);

      $.ajax({
          url: RESOURCE_ENDPOINT
        , beforeSend: function (xhr) {
            xhr.setRequestHeader('Authorization', "OAuth " + token);
            xhr.setRequestHeader('Accept',        "application/json");
          }
        , success: function (response) {
            var container = $('span.user');
            if (response) {
              container.text(response.username);
            } else {
              container.text("An error occurred.");
            }
          }
      });
    } else {
      $('div.authenticate').show();

      var authUrl = AUTHORIZATION_ENDPOINT + 
        "?response_type=token" +
        "&client_id="    + clientId +
        "&redirect_uri=" + window.location;

      $("a.connect").attr("href", authUrl);
    }
  });
</script>
<style>
  .hidden {
    display: none;
  }
</style>

<div class="authenticate hidden">
  <a class="connect" href="">Connect</a>
</div>

<div class="authenticated hidden">
  <p>
    You are using token
    <span class="token">[no token]</span>.
  </p>

  <p>
    Your SoundCloud username is
    <span class="user">[no username]</span>.
  </p>
</div>

有关发送 XMLHtt prequests （什么 AJAX（） 功能使用jQuery的不AngularJS），指他们的 $ HTTP 服务。

For sending XMLHttpRequests (what the ajax() function does in jQuery) using AngularJS, refer to their documentation of the $http service.

如果您想preserve状态，发送用户的授权端点时，检查出的 状态 参数。

If you want to preserve state, when sending the user to the authorization endpoint, check out the state parameter.

这篇关于我如何实现安全的OAuth2消费在Javascript？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！