2013-01-15 58 views
1

我正在開發一個帶AngularJS的webapp作爲我的框架,並且我想實現OpenID登錄,特別是Google。由JavaScript支持的OpenID登錄?

我在使用PHP的LightOpenID庫,這看起來很簡單,但我很困難如何將它合併到我的應用程序,因爲它取決於將頁面重定向到Google。我已經考慮了三種方法可以解決這個:

  1. 一個login.php在我的根目錄,用戶必須通過
  2. 的部分是I幀login.php
  3. login.php開在彈出像http://openid-demo.appspot.com/

對於根解決方案(1),我該如何着手將狀態傳遞給應用程序?

iframe解決方案(2)在重定向IFRAME: Refused to display document because display forbidden by X-Frame-Options上出錯,我懷疑這與Google的安全性有關。

彈出式解決方案(3)似乎不太好,因爲用戶有彈出式窗口攔截器,並且移動設備上的彈出窗口也不太令人滿意。

有沒有人有任何想法,我可以在AngularJS框架內工作/使用JavaScript來使用OpenID登錄用戶?

回答

2

您應該能夠通過簡單的「登錄」會話cookie來完成(1),但這裏有問題,如此處所述http://www.espeo.pl/2012/02/26/authentication-in-angularjs-application

(2)不起作用,因爲OpenID提供程序將退出任何幀以避免潛在的安全問題。

留下(3),我得到了使用https://github.com/witoldsz/angular-http-auth工作:

在我的頂層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> 

我不知道有一個更好的方式來回調到應用程序的角度比這一點膠水功能:

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

總之,漂亮與否,它的工作原理。