¿Cómo hacer la autenticación de Dropbox en una aplicación de una sola página sin abrir una nueva ventana?

Question

Tengo una aplicación de una sola página que se integra con otros servicios como Dropbox y LinkedIn. Dropbox, por ejemplo, tiene una API excelente y la autenticación funcionaba abriendo el enlace de autenticación de Dropbox en otra ventana. Una vez que el usuario se autentica, les pido que cierren esa nueva ventana para regresar a mi aplicación.

Claramente esto no es óptimo ya que aleja al usuario de mi aplicación, y aún más engorroso en las tabletas.

¿Cómo puedo hacer la autenticación dentro de la aplicación, como en un lightbox o en un formulario modal?

Tenga en cuenta que la integración en sí sucede en el lado del servidor y no en el lado del cliente. Actualmente, la página de autenticación de Dropbox tiene una página de devolución de llamada que indica a mi servidor que la autenticación fue exitosa, y que la almaceno en la tabla del usuario en la base de datos para uso futuro.

Nota: El comentario de recompensas debe decir: Un ejemplo de código es muy deseada, pero no requerido.

Answer 1

Lo que está proponiendo es vencer el modelo de seguridad, por lo que no debería ser posible. El usuario debe poder ver la URL de la página real para la verificación. Imagínese que cuando realiza un pago con Paypal, es probable que compruebe que está en paypal.com antes de ingresar sus datos importantes, ¿verdad? Lo mismo se aplica a todas las demás aplicaciones. Es un flujo muy feo, pero lo mejor que la industria ha logrado hoy.

El flujo ideal es que redirija al usuario al sitio web o la aplicación de terceros, el usuario inicia sesión y lo autoriza, y luego le redirige a usted. Una aplicación nativa tiene la ventaja de cambiar a otra aplicación nativa, por lo que el flujo es un poco menos feo.

El trabajo que haría lo que desea es una aplicación que pida el nombre de usuario y la contraseña al servicio de terceros, y luego realice la auth dance detrás de las escenas. Esto probablemente disuada a los usuarios de su aplicación y es muy peligroso. No lo recomiendo.

Answer 2

Si su aplicación es una aplicación web, la mejor manera de simplificar el flujo es simplemente redirigir la página actual (por ejemplo, How to redirect to another webpage in JavaScript/jQuery?) a la página/autorizar en Dropbox, con un oauth_callback a una página en su aplicación que indica el proceso fue completado.

De esta manera el flujo es simplemente:

1. (en su aplicación) user botón hace clic para iniciar el flujo de OAuth
2. (su aplicación redirige a Dropbox página autorizar a) usuario autoriza aplicación
3. (redirecciones Dropbox por oauthallamada a su aplicación) la aplicación tiene token de acceso y está lista para usar la integración

Y todo esto sucede dentro de una sola página, sin cerrar/abrir ventanas adicionales.

Answer 3

Puede cargar el punto final de autorización en un iframe en su página web. Sin embargo, observe que algunos navegadores tienen limitaciones en las cookies enviadas al proveedor de inicio de sesión dentro de un iFrame. Normalmente (Safari, iOS) solo tiene acceso de lectura a las cookies, que es suficiente si la cookie de sesión ya está configurada en el proveedor.

En su página de devolución de llamada - donde se le envía de nuevo desde Dropbox después de la autenticación; tendrá que llamar a una función de JavaScript para activar un evento en la página principal, esa autenticación se realiza.

window.parent.AppController.authenticationComplete(); 

El padre puede entonces quitar el iframe, y proceder como autenticado.

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

---

Debido al potencial problema de galletas, Yo lo recomendaría llevar a cabo todos los pasos de autenticación iniciadas desde el lado del servidor, antes de la página HTML principal se sirve en absoluto. Luego, se asegurará de que su aplicación no se cargue dos veces. Este es el comportamiento típico de muchas soluciones de software middleware de autenticación/identidad.

---

Cuando se menciona aplicación no está claro si se refiere a una aplicación web pura, o si tiene el control disponibles en una aplicación híbrida mediante el uso de marcos tales como Phonegap. Con Phonegap o similar, puede cargar un navegador dentro del navegador dentro de la aplicación; en ese caso, el explorador infantil no está limitado con las mismas limitaciones de cookies.

Recientemente escribí un tutorial sobre cómo hacer que esto funcione con Phonegap y Childbrowser para iOS.

• OAuth 2.0 Guide for Phonegap using ChildBrowser and JSO

en cuenta que este tutorial es sobre el uso de OAuth 2.0 que es algo diferente de OAuth 1.0.