47

私は、OAuth2.0を使用するPHPでAPIを設計しているところです。私の最終目標は、このAPIに直接アクセスするJavaScriptで（AngularJSを使用して）フロントエンドアプリケーションを構築することです。従来、JavaScriptでトランザクションを保護する方法がないため、APIに直接アクセスすることはできません。フロントエンドはサーバーコードと通信する必要があり、サーバーコードはAPIと直接通信します。ただし、OAuth2の調査では、ユーザーエージェントフローがこの状況で役立つように設計されているように見えます。

私が助けを必要としているのは、JavaScriptでOAuth2ユーザーエージェントフローを実装することです（特に、フロントエンドに使用しているので、可能であればAngularJS）。これを行う例やチュートリアルを見つけることができませんでした。どこから始めればよいのか本当にわからないので、少なくとも私がやろうとしていることの例を見ずに、OAuth2仕様全体を読みたくありません。したがって、例、チュートリアル、リンクなどをいただければ幸いです。

4

2 に答える 2

50

Implicit Grantフロー（ユーザーエージェントフローと呼んでいるフロー）は、まさにその方法です。

暗黙的な付与は、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パラメーターを確認してください。

于 2012-07-17T08:55:36.770 に答える
2

Authorization Code GrantOAuthサーバーからトークンを取得するアプローチの例があります。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ローカルストレージを使用して、セキュリティ上の脅威をもたらす可能性が低いデータのアプリケーションの状態を永続化しました。

于 2012-07-15T09:59:29.580 に答える