6

API、Oauth2 プロバイダーがあります。

AngularJS クライアント側アプリから、この API への認証フローを実装して、今後のリクエストのアクセス トークンを取得するにはどうすればよいですか?

私が探しているのは、このための Implicit Grant フローです。

私は提供します

{
    client-id: "abcdefghijklmnopqrstuvqxyz0123456789", 
    redirect_url: "http:localhost:8080/provider_cb",
    response_type: "token"
}

Oauth2 プロビジョニング用のバックエンドとドアキーパー/デバイスに Rails REST API があります。

angular-oauthに出くわしました、これは問題をある程度解決するようです。しかし、

  1. トークン検証機能を提供したくない (これは必須ですか)
  2. ログイン用の新しいウィンドウ ポップアップを開きたくない (同じウィンドウでリダイレクトを行いたい)

今、

Q1. 私が理解していないのは、プロセス全体がどのように開始されたのかということです。$http リクエストを行うことができません。これは SignIn HTML ページで返されます。$location サービスを使用してログイン ページにリダイレクトする必要がありますか? または、/oauth/authorize への GET リクエスト全体へのリンクが必要ですか?...

Q2, サインイン後にリダイレクトをキャプチャして access_token を抽出するにはどうすればよいですか?

Q3. Oauth2認証またはこれを行う標準的なAngularの方法を処理するサービスを知っていますか?

4

1 に答える 1

7

3 つの質問に対する答えを試してみましょう。

Q1 ) 一般的な OAuth2 の処理を​​基本的に理解している必要があります。あなたが見ているのはAngularJS固有の実装ではありません。承認のためのポップアップ ウィンドウを操作したくない場合は、redirect_url / state が戻った後に正しく機能するように少し工夫する必要があります (#state が必要な場合 - 保存 - それ以外の場合は指定するだけです)あなたのエントリ - redirect_uri の url)。リダイレクトに $http を使用しないでください。これは、XHR および同様の呼び出しに役立つためです。ユーザーをログイン ページに移動するには、 $window.location.href = ' http://yourlogin.com/oauthloginpage ';を実行します。

その後、アプリはログイン ページにリダイレクトされます。redirect_url のパラメーターを忘れないでください。必要に応じて、「スコープ」/「状態」など、リクエスト内の他のパラメータも指定します。

Q2 ) ログイン後のリダイレクトは、redirect_url 内で指定した uri にリダイレクトされます。次に、 http://myapp.com/#access_token=foobar&refresh_token=foobar2&state=loremipsemのようなものが出てきます

次のようなコードを使用して、angular からパーツを取得するだけです。

var currentURL = $location.absUrl();
var paramPartOfURL = currentURL.slice(currentURL.indexOf('#') + 1);

次に、paramPart を split('&') を使用して配列に解析し、「キー」access_token を探して繰り返し処理します。ほら、ローカル ストレージ/サービス/Cookie に取り込む準備ができている access_token があります。

URL を複数の部分に分割するために使用できる実装は他にもあります。もっと良い実装があるかもしれませんが、ここでは「速攻」で説明します。解析後、通常の $location.path(....) 呼び出しでユーザーを正しい状態に再度リダイレクトし、OAuth2 の # パラメータを削除できます。

Q3 ) AngularJS アプリのソース状態/ルートをマッピングする方法が必要な場合は、OAuth2 サーバーが実装している場合は状態パラメーターを誤用してみてください。これは、リクエスト <-> レスポンス後も存続します。ポップアップ以外の実装については、現在、これ以上のモジュールはわかりません。

OAuth2 を操作するもう 1 つの方法は、loginpage を独自に実装してから、基本認証またはその他の方法で残りの呼び出しに反応する oauth2 プロバイダーと対話することです。その後、おそらく $http 呼び出しを使用できます。

于 2014-01-20T21:25:21.830 に答える