1

フレームワークとしてAngularJSを使用してWebアプリを開発しており、特にGoogleを使用してログイン用のOpenIDを実装したいと考えています。

私はPHP用のLightOpenIDライブラリを使用していて、それは十分に単純に見えましたが、Googleにリダイレクトするページに依存するため、それをアプリに組み込む方法について苦労しています。私はこれにアプローチする3つの方法を検討しました：

  1. login.phpユーザーが通過しなければならない私のベースディレクトリで
  2. そのiframeの部分login.php
  3. login.phphttp://openid-demo.appspot.com/のようなポップアップで開く

ルートソリューション（1）の場合、アプリに状態を渡すにはどうすればよいですか？

iframeソリューション（2）はリダイレクトIFRAME: Refused to display document because display forbidden by X-Frame-Optionsでエラーになります。これは、Google側のセキュリティに関係していると思われます。

ユーザーにはポップアップブロッカーがあり、モバイルでのポップアップも満足のいくものではないため、ポップアップソリューション（3）はそれほど優れているようには見えません。

AngularJSフレームワーク内で作業する方法/JavaScriptを使用してOpenIDでユーザーにサインインする方法について誰かが知っていますか？

4

1 に答える 1

2

（1）単純な「ログイン」セッションCookieで実行できるはずですが、ここで概説されているように問題がありますhttp://www.espeo.pl/2012/02/26/authentication-in-angularjs-application。

（2）OpenIDプロバイダーは潜在的なセキュリティ問題を防ぐためにフレームを破壊するため、機能しません。

https://github.com/witoldsz/angular-http-authを使用して作業を開始した（3）を残します：

トップレベルのngAppで、http-auth-interceptor依存関係を追加し、次の初期化関数を追加しました。

// main.js
app.run(function($rootScope, authService) {
    $rootScope.$on('event:auth-loginRequired', function() {
        window.open('/login.html');
    });
    $rootScope.loginConfirmed = function() {
        authService.loginConfirmed();
    };
});

json HTTPリクエストが401を返すと、ポップアップhttp-auth-interceptorが読み込まれます。login.html

login.htmlは通常のOpenIDログインフォームであり、最終的にはにリダイレクトされます。これには、ポップアップを閉じて親ページの関数を呼び出すためのlogin_confirmed.htmlが含まれています。<script>loginConfirmed

<!-- login_confirmed.html -->
<script type="text/javascript">
    window.opener.loginConfirmed();
    window.close();
</script>

この小さな接着機能よりもAngularアプリにコールバックするためのより良い方法があるかどうかはわかりません：

<!-- main.html -->
<script type="text/javascript">
    function loginConfirmed() {
        angular.element($('html')).scope().loginConfirmed();
    }
</script>

とにかく、きれいかどうかにかかわらず、それは機能します。

于 2013-05-24T13:53:36.147 に答える