angle-ui-routerのOauth 2.0リターンパラメータの解析

Question

GoogleのOauth 2.0 APIを使用してユーザーを認証しようとしています。私のアプリHREFがGoogleの認証ページに来たら、私のAngularJSアプリに情報を戻します。しかし、返されたURLエンコードされたデータをどのように処理するのがベストかはわかりません。

これは、フォーマットは、それは次のように返されている：

#access_token=... 
&token_type=Bearer 
&expires_in=3600 

私の主な問題は、伝統的にURLエンコードされたパラメータで行われているように、この文字列は#の代わり?から始まるということです。私stateProviderの設定で

、私のようなコールバック状態を実装しました：

.state 'auth.googlecallback', 
    url: '/googlecallback/#{accessToken}&token_type={tokenType}&expires_in={expiresIn}' 
    templateUrl: 'views/auth/googlecallback.html' 
    controller: 'GoogleCallbackCtrl as gVm' 

上記のURLは、私が試したものの一例です。 URLが単に/googlecallback/の場合、Google Oauthリンクを使用してナビゲートしても、ページは正常に読み込まれます。しかし、私が#シンボルを持っていた瞬間に、状態が壊れ、内部のデータの状態パラメータを解析できません。

GitHubでangular-oauthライブラリを使用してみましたが、2年後に更新されておらず、GoogleだけでなくOauth認証も許可されていません（FacebookやGoogle ）。

angle-ui-routerのOauth URLデータを処理する正しい方法は何ですか？

Answer 1

正直言って、これは実際にあなたの質問に答えるとは思えませんが、私は今日これでいくつかの友人を助けていました。彼らは、ui-router経由でURIを扱うことができませんでした。代わりに、パラメータの解析とビューコントローラへの適切なリクエストの作成を委任する必要がありました。 Angular $ locationサービスといくつかの再マッピング関数を使用して、＃クエリ構文のパラメータをハッシュに変換して、要求に応じてサーバーにプッシュバックすることができました。コードは次のようになりました。

var paramsArray = $location.hash().split('&') 
var payload = {}; 
angular.forEach(paramsArray, function (param) { 
    var arr = param.split('='), 
     key = param[0], 
     value = param[1]; 
    payload[key] = value; 
}); 

これは絶対に簡略化することができましたが、これは彼の戦略のために達成しようとしていたものでした。

私は個人的には、クライアントでOAuth戦略を達成しようとするファンではありません。完全なハンドシェイクを完了するために通常交換される必要のある秘密鍵があります。あなたがやった場合に可能ならば、それが最善だろう次

1. 適切なOAuthのパス
2. にクライアントをリダイレクトは、リダイレクトがOAuthリクエストを処理し、握手を完了することができ、サーバのエンドポイントに行く持っています。
3. oauthリクエストがリダイレクトされたサーバーエンドポイントを持って、アプリケーションが必要とする追加の応答 オブジェクトを使用して成功のランディングページにリダイレクトします。

これを行うと秘密鍵が保護され、ほとんどのWebフレームワークにモジュール/パッケージ/ gems/plugins/etcがあります。すべての主流プロバイダーのためにoauthを実装しています。これが正しい方向にあなたを助けてくれることを願っています。