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

Question

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

我需要帮助的是在javascript中实现OAuth2用户代理流程(特别是AngularJS,如果可能的话,因为我正在使用我的前端).我无法找到任何这样做的示例或教程.我真的不知道从哪里开始,不想阅读整个OAuth2规范,至少没有看到我将要做的事情的例子.因此,非常感谢任何示例,教程,链接等.

Answer 1

该隐格兰特流(你指的是作为一个用户代理流量)正好是要走的路:

隐式授权是为使用脚本语言(如JavaScript)在浏览器中实现的客户端优化的简化授权代码流.

要了解这一流程,Google提供的客户端应用程序文档是一个非常好的起点.请注意,他们建议您采取额外的令牌验证步骤,以避免混淆的代理问题.

以下是使用Soundcloud API和jQuery的流程的简短示例实现,取自以下答案:

<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服务文档.

如果要保留状态,则在将用户发送到授权端点时,请检查state参数.