2013-01-15 37 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> 

总之,漂亮与否,它的工作原理。