Javascript 如何在单页应用程序中进行Dropbox身份验证而不打开新窗口?

Javascript 如何在单页应用程序中进行Dropbox身份验证而不打开新窗口?,javascript,linkedin,dropbox-api,singlepage,Javascript,Linkedin,Dropbox Api,Singlepage,我有一个单页应用程序,可以与Dropbox和LinkedIn等其他服务集成。例如,Dropbox有很好的API,我通过在另一个窗口中打开Dropbox的身份验证链接来实现身份验证。一旦用户进行身份验证,我要求他们关闭新窗口以返回到我的应用程序 显然,这是次优的,因为它让用户远离我的应用程序,在平板电脑上甚至更麻烦 我将如何在应用程序内进行身份验证,例如在lightbox或modal表单中 请注意,集成本身发生在服务器端而不是客户端。目前,Dropbox身份验证页面有一个回调页面,向我的服务器发出

我有一个单页应用程序,可以与Dropbox和LinkedIn等其他服务集成。例如,Dropbox有很好的API,我通过在另一个窗口中打开Dropbox的身份验证链接来实现身份验证。一旦用户进行身份验证,我要求他们关闭新窗口以返回到我的应用程序

显然,这是次优的,因为它让用户远离我的应用程序,在平板电脑上甚至更麻烦

我将如何在应用程序内进行身份验证,例如在lightbox或modal表单中

请注意,集成本身发生在服务器端而不是客户端。目前,Dropbox身份验证页面有一个回调页面,向我的服务器发出身份验证成功的信号,我将其存储在数据库中的用户表中以备将来使用


注意:赏金注释应为:非常需要代码示例,但不需要代码示例。

如果您的应用程序是web应用程序,优化流程的最佳方法是将当前页面(例如)重定向到Dropbox上的/authorize页面,通过oauth_回调到应用程序上的一个页面,该页面指示进程已完成

这样,流程就是:

  • (在应用程序上)用户单击按钮启动OAuth流
  • (您的应用程序重定向到Dropbox授权页面)用户授权应用程序
  • (Dropbox会根据oauth_回调重定向到您的应用程序)应用程序获得访问令牌并准备好使用集成
  • 这一切都发生在一个页面内,无需关闭/打开额外的窗口。

    您可以在网页的iframe中加载授权端点。但是,请注意,某些浏览器对在iFrame中发送给登录提供程序的cookie有限制。通常(Safari、iOS)您只有对cookie的读取权限,如果已在提供程序中设置了会话cookie,这就足够了

    在您的回拨页面上-验证后,您将从dropbox返回;您将需要调用一个javascript函数来触发父页面上的事件,即身份验证已完成

    window.parent.AppController.authenticationComplete();
    
    然后,父级可以删除iframe,并继续进行身份验证

    authenticationCompleted = function() {
         // [snipp]
         $("iframe#loginwrapper").remove();
    }
    

    由于潜在的cookie问题,我建议您在提供主HTML页面之前,执行从服务器端启动的所有身份验证步骤。然后,您将确保您的应用程序不会被加载两次。这是许多身份验证/身份中间件软件解决方案的典型行为


    当你提到应用程序时,不清楚你指的是纯网络应用程序,还是通过Phonegap等框架在混合应用程序中拥有控制权。使用Phonegap或类似工具,您可以在应用程序内的浏览器中加载浏览器-在这种情况下,ChildBrowser不受相同cookie限制的限制

    我最近写了一篇关于如何使用Phonegap和Childbrowser for iOS实现这一点的教程


    请注意,本教程介绍的是使用OAuth 2.0,它与OAuth 1.0有些不同。

    您所建议的是破坏安全模型,因此它不可能实现。用户应该能够看到真实页面的URL进行验证。想象一下,当您使用Paypal进行支付时,您可能会在输入重要数据之前检查您是否在Paypal.com上,对吗?这同样适用于所有其他应用程序。这是一个非常丑陋的流程,但它是当今行业中最好的流程

    理想的流程是将用户重定向到第三方网站或应用程序,用户登录并授权,然后重定向回您。一个本机应用程序有切换到另一个本机应用程序的好处,因此流程不那么难看


    解决这一问题的方法是让一个应用程序向第三方服务请求用户名和密码,然后在幕后进行身份验证。这可能会阻止用户使用你的应用程序,这是非常危险的。我不建议这样做。

    您能否澄清一下您的应用程序在哪里工作,也就是说,这是一个用户在自己的浏览器中访问的web应用程序,是一个本机应用程序/什么平台等?它是一个基于主干和朋友的web应用程序,也可以使用PhoneGap在手机上下载。我可能可以将Dropbox SDK与PhoneGap一起使用,所以这个问题主要集中在浏览器web-app上。感谢您的快速澄清!我已经发布了我的答案,如果我误解了请告诉我:-)谢谢你的回答。您提出的解决方案非常适合将所有内容都保存在一个窗口中,但它并不是真正的“单页”。单页应用程序在后台加载大量数据、JS和HTML,以提供无刷新体验,即点击链接不会触发整个页面加载,而只会触发相关部分的页面更改。使用您的方法,当用户通过回调返回应用程序时,需要重新加载整个应用程序数据,从而破坏了使用单页web应用程序的好处。因为我使用的是服务器端身份验证,令牌通过get参数发送到dropbox并返回回调,我怀疑cookie限制不会成为问题。我将使我的应用程序既可以作为网络应用程序使用,也可以作为包装在phonegap中的本机应用程序使用,因此教程可能会派上用场。iframe方法是否也适用于phonegap?如果Cookie不是问题,那么在phonegap的iframe上使用儿童浏览器有什么好处?非常感谢你的回答!是的,webapp中的所有功能都可以在phonegap中使用。无论应用程序的实现如何,您都可能会遇到cookie限制问题,当用户与Dropbox身份验证登录页面交互时,可能会限制用户设置cookie,这可能会导致错误。我明白了。有没有一种方法可以在不首先实现整个过程的情况下更确定这是否会成为问题?顺便说一句,同样的方法不仅适用于iFrame,也适用于独立的子窗口。你