如何在 Javascript 中实现安全的 OAuth2 消费？

Question

我正在用 PHP 设计一个将使用 OAuth2.0 的 API。我的最终目标是用 javascript（使用 AngularJS）构建一个直接访问这个 API 的前端应用程序。我知道传统上没有办法保护 javascript 中的事务，因此直接访问 API 是不可行的。前端需要与服务器代码通信，而服务器代码又直接与 API 通信。但是，在研究 OAuth2 时，似乎用户代理流程旨在帮助解决这种情况。

我需要帮助的是在 javascript 中实现 OAuth2 用户代理流程（特别是 AngularJS，如果可能的话，因为这是我在前端使用的）。我还没有找到任何可以做到这一点的示例或教程。我真的不知道从哪里开始，也不想阅读整个 OAuth2 规范，至少没有看到我将要做什么的例子。因此，任何示例、教程、链接等都将不胜感激。

Answer 1

Implicit Grant flow（您称为 User-Agent 流）正是要走的路：

隐式授权是一种简化的授权代码流，针对使用 JavaScript 等脚本语言在浏览器中实现的客户端进行了优化。

要了解流程，Google 的 client-side applications 文档是一个非常好的起点。请注意，他们建议您采取额外的令牌验证步骤以避免confused deputy problems。

这是使用 Soundcloud API 和 jQuery 的流程的简短示例实现，取自 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>

关于使用 AngularJS 发送 XMLHttpRequests（ajax() 函数在 jQuery 中的作用），请参阅他们的 $http service 文档。

如果您想保留状态，在将用户发送到授权端点时，请查看state 参数。

Answer 2

有一个使用Authorization Code Grant 方法从 OAuth 服务器获取令牌的示例。我用jQuery（$）做了一些操作。

首先，将用户重定向到授权页面。

var authServerUri = "http://your-aouth2-server.com/authorize",
authParams = {
  response_type: "code",
  client_id: this.model.get("clientId"),
  redirect_uri: this.model.get("redirectUri"),
  scope: this.model.get("scope"),
  state: this.model.get("state")
};

// Redirect to Authorization page.
var replacementUri = authServerUri + "?" + $.param(authParams);
window.location.replace(replacementUri);

当一个人通过授权获得令牌时：

var searchQueryString = window.location.search;
if ( searchQueryString.charAt(0) === "?") {
  searchQueryString = searchQueryString.substring(1);
}
var searchParameters = $.deparam.fragment(searchQueryString);

if ( "code" in searchParameters) {
  // TODO: construct a call like in previous step using $.ajax() to get token.
}

您可以使用 jQuery 或纯 XMLHttpRequest 以相同的方式实现 Resource Owner Password Credentials Grant，并且不要进行任何重定向 - 因为在每次重定向时，您都会失去应用程序的状态。

对我来说，我使用 HTML5 本地存储来保存不太可能构成安全威胁的数据的应用程序状态。