angularjs - hacer - ionic login authentication

Autenticación en la aplicación Ionic/Cordova

Question

Primero, no soy profesional.

En mi búsqueda para convertirme en un mejor desarrollador, intento comprender qué es lo que se necesita y cómo lograr crear un registro / inicio de sesión para una aplicación Ionic-Framework.

La mayoría de las aplicaciones de una sola página (SPA) manejan la autenticación en un servidor de nodo que también está sirviendo el HTML para el cliente. En mi caso, el teléfono en sí mismo estará sirviendo el código HTML, así que supongo que puedo estar enfrentando algunos problemas de CORs.

Entiendo que Ionic-Framework usa estados y repositorio angular-client-side-auth basado en que debo autenticar cada vez que cambio de estado en mi aplicación.

Tengo una configuración inicial de la aplicación, pero ahora estoy un poco confundido a dónde ir desde aquí.

Las herramientas que tengo a mi disposición:

• Servidor Node.JS: gracias a DigitalOcean (¿Debería usar esto como proxy de mi base de datos?)
• Servidor CouchDB (pila completa aquí venimos)

Preguntas mías:

1. ¿Cuál es el enfoque estándar para la autenticación cuando se utilizan aplicaciones híbridas?
2. ¿Debo usar Node.JS como un proxy para la base de datos?
3. ¿Debo omitir node.js y autenticarme directamente con el servidor CouchDB? (He oído hablar de esto)
4. ¿Estoy haciendo esto de la manera incorrecta?
5. ¿Cuáles son mis posibles bloques de ruta?
6. ¿Cómo funciona CORS con aplicaciones híbridas?
7. ¿Algo que me falta?

Gracias por ayudarme a ser un mejor desarrollador.

Answer 1

De hecho, necesitaba algo así para algunas aplicaciones en las que estoy trabajando. Pasé bastante tiempo investigando esto y pude lograr eso.

Estoy muy contento con el resultado, además de la autenticación de correo electrónico / contraseña, he agregado una autenticación social que funciona de la misma manera.

1. abrir URL en el lado del cliente con la URL del proveedor (facebook / twitter / instagram) para iniciar sesión
2. el usuario inicia sesión y se redirige a la url de devolución de llamada del servidor (mi servidor está escrito en nodejs)
3. una vez que tengo el token de acceso del proveedor. Guardo este token y luego creo un token para que el cliente reutilice cada vez que el usuario quiera acceder a un recurso protegido.

Descargue la aplicación y apk .

Si esto es lo que está buscando, puede consultar el código del lado del cliente en: https://github.com/malikov/Authenticate.me-client-cordova-ionic

Y el código del lado del servidor en: https://github.com/malikov/Authenticate.me-Node-Server

Answer 2

OK, hay mucho para responder. Pero la respuesta corta es simplemente mantener las cosas simples y autenticarse como lo haría con una aplicación web normal.

En una aplicación web normal:

• En una aplicación web normal enviaría una solicitud a un servidor y verificaría las credenciales con una base de datos para autenticar al usuario

En una aplicación móvil:

• En una aplicación móvil, hará lo mismo mediante solicitudes ajax (utilizando $ http en el caso de angular).
• Una vez completada la autenticación en el servidor, envíe una respuesta a la aplicación (por ej., Json / xml) que indique al inicio el resultado de la autenticación.

¿Cuál es el enfoque estándar?

• No estoy seguro acerca del estándar, pero este parece ser el enfoque más fácil. Los estándares siempre cambian porque siempre hay una mejor manera de hacerlo. De modo que mientras haga el trabajo, avance, mejore después.

¿Debo usar Node.JS como un proxy para la base de datos?

• No he usado mucho nodeJs así que no sé a qué te refieres. Pero si ayuda saber, utilizo php en el servidor que recibe la solicitud ajax, maneja la autenticación con la base de datos mysql y devuelve la respuesta a la aplicación móvil.

¿Estoy haciendo esto de la manera incorrecta?

• No he visto tu configuración inicial. En lo que respecta a la autentificación cada vez que cambia los estados en la aplicación, puede usar localStorage para almacenar la información del usuario después de un inicio de sesión exitoso. Al cerrar la sesión, borre localStorage. Entonces, todo lo que necesita hacer es verificar si el valor existe en localStorage para confirmar si el usuario ha iniciado sesión.

¿Cuáles son mis posibles bloques de ruta?

• Le sugiero que empiece a hacer su aplicación y lo sabrá lo suficientemente pronto. En general, ionic + cordova hace las cosas bastante simples y elimina la mayoría de los obstáculos para el desarrollo de aplicaciones.

¿Cómo funciona CORS con aplicaciones híbridas?

• Cordova permite la solicitud de dominio cruzado de forma predeterminada, por lo que no tendrá ningún problema con las solicitudes de dominio cruzado y, por lo tanto, puede acceder directamente a su servidor para la autenticación.

¿Algo que me falta?

• IonicFramework es solo un framework front-end HTML5. Por sí solo no puede convertirte en una aplicación móvil. Te dará una interfaz de usuario agradable para trabajar. IonicFramework le proporciona algunas características agradables de javascript que implementa utilizando angular. Por lo tanto, para obtener el máximo provecho de iones debe ser competente con angularJs. Aprender angular vale la pena el esfuerzo, así que adelante.

• La aplicación real es compilada por Cordova. Cordova toma tus archivos regulares html / css / javascript y los empaqueta en la ipa apk o iphone de Android para que puedan ser instalados en el os respectivo como aplicaciones nativas.

• Cordova es lo que te permitirá acceder a las características del teléfono nativo, como la cámara, la galería, los contactos, etc.

Actualizado el 3 de junio de 2015

Autenticación basada en tokens : creo que es una alternativa. Es una forma más limpia y segura de manejar la autenticación que ahora está disponible fácilmente.

Para obtener más información, consulte los siguientes enlaces:

• Jwt angular (para aplicaciones que usan angular en el front-end)
• Video Talk: hacer que sus aplicaciones sean seguras utilizando JWT (por los creadores de jwt.io)
• Jwt.io (sitio web oficial de jwt)
• Jwt-Auth para Laravel (para aquellos que usan Laravel en el back-end)

¿Cuáles son los beneficios de usar un enfoque basado en token?

Cross-domain / CORS: cookies + CORS no funcionan bien en diferentes dominios. Un enfoque basado en token le permite hacer llamadas AJAX a cualquier servidor, en cualquier dominio porque usa un encabezado HTTP para transmitir la información del usuario. Sin estado (también conocido como escalabilidad del lado del servidor): no es necesario mantener un almacén de sesión, el token es una entidad autocontenida que transmite toda la información del usuario. El resto del estado vive en cookies o en el almacenamiento local en el lado del cliente.

CDN: puede servir todos los activos de su aplicación desde un CDN (por ejemplo, javascript, HTML, imágenes, etc.), y su lado del servidor es solo la API. Desacoplamiento: no estás vinculado a un esquema de autenticación particular. El token se puede generar en cualquier lugar, por lo tanto, se puede llamar a su API desde cualquier lugar con una única forma de autenticar esas llamadas.

Preparado para dispositivos móviles: cuando comienzas a trabajar en una plataforma nativa (iOS, Android, Windows 8, etc.) las cookies no son ideales cuando consumes una API segura (tienes que ocuparte de los contenedores de cookies). Adoptar un enfoque basado en token simplifica mucho esto. CSRF: dado que no confía en las cookies, no necesita protegerse contra las solicitudes cruzadas (por ejemplo, no sería posible para su sitio, generar una solicitud POST y reutilizar la cookie de autenticación existente porque no habrá ninguna) .

Rendimiento: aquí no presentamos ningún punto de referencia de rendimiento , pero una ida y vuelta de red (por ejemplo, encontrar una sesión en la base de datos) probablemente tome más tiempo que calcular un HMACSHA256 para validar un token y analizar sus contenidos.

La página de inicio de sesión no es un caso especial: si usa Protractor para escribir sus pruebas funcionales, no necesita manejar ningún caso especial para iniciar sesión. Basado en estándares: su API podría aceptar un Token Web JSON (JWT) estándar. Este es un estándar y existen múltiples bibliotecas de back-end (.NET, Ruby, Java, Python, PHP) y compañías que respaldan su infraestructura (por ejemplo, Firebase, Google, Microsoft). A modo de ejemplo, Firebase permite a sus clientes utilizar cualquier mecanismo de autenticación, siempre que genere un JWT con ciertas propiedades predefinidas y firmado con el secreto compartido para llamar a su API.

Answer 3

nathvarun dio una respuesta muy completa, pero me gustaría compartir los pasos que paso para la autenticación en mi aplicación.

1. Enviar email + password través de ajax al servidor
2. Genera un token en el servidor y lo envía de vuelta a la aplicación
3. Tienda de email + token en localStorage
4. Por cada solicitud que hago al servidor, envío un email + token través de POST
5. En el servidor verifico la autenticidad de ese usuario con ese token, si es true el método se ejecuta, si es false , devuelvo a la aplicación un error (401)
6. Si la aplicación recibe el éxito, está bien, si recibe un error, lo redirecciono a la pantalla de inicio de sesión.

Lo bueno es que cuando la aplicación está abierta, puede obtener el token + email de localStorage , enviar al servidor, si ese token está bien para ese usuario, redirigir a la pantalla principal, de lo contrario, redirigir para iniciar sesión. Luego, cada vez que el usuario borre la caché de la aplicación, se le redirige a la pantalla de inicio de sesión.