Prefacio
Dado que Angular es una aplicación de una sola página, la mayoría de los recursos se cargarán en el navegador desde el principio, por lo que debe prestar más atención al momento de la verificación y garantizar que solo los usuarios que hayan aprobado la verificación puedan ver la interfaz correspondiente.
La autenticación en este artículo se refiere a cómo determinar si el usuario ha iniciado sesión y asegurarse de que las necesidades de verificación del servidor se puedan satisfacer en cada comunicación con el servidor. Tenga en cuenta que no incluye el juicio sobre si hay una autoridad específica.
Para iniciar sesión, es principalmente aceptar el nombre de usuario y la entrada de contraseña del usuario , enviarlo al servidor para su verificación , procesar la respuesta de verificación y crear datos de autenticación en el lado del navegador .
Dos formas de implementar la autenticación de identidad
En la actualidad, hay dos categorías principales de métodos para implementar la autenticación de identidad:
Galletas
Las páginas web tradicionales del navegador usan cookies para verificar la identidad. De hecho, en la capa de aplicación del navegador, básicamente no hay necesidad de preocuparse por la verificación de identidad. El servidor completan la configuración de las cookies. Al enviar la solicitud, el navegador adjunta automáticamente la información de cookies correspondiente. Por lo tanto, en el código JavaScript, no hay necesidad de escribir un código especial para esto. Pero cada vez que solicito, traeré todos los datos de las cookies.
Con la aplicación de CDN y el aumento gradual de los dispositivos móviles, las cookies no pueden satisfacer las complejas necesidades de autenticación de dominios múltiples.
Llave
De hecho, la autenticación basada en clave no ha surgido recientemente, ha existido, incluso más tiempo que la historia de las cookies. Cuando el navegador solicita el servidor, adjunta la clave a la solicitud de manera específica, como en los encabezados de la solicitud. Para hacer esto, se requiere que se escriba un código especial del cliente para la gestión.
El estándar de clave web recientemente emergente basada en JSON （JSON Web Token） es una autenticación típica que usa una clave.
En aplicaciones web, si está construyendo API, debe dar prioridad al uso del método clave.
Iniciar sesión en el proceso
Iniciar sesión es el primer paso en la verificación de identidad. Solo iniciando sesión se pueden organizar los datos de verificación de identidad correspondientes.
¿Necesita usar una página de inicio de sesión separada?
Hay dos formas de lidiar con las páginas de inicio de sesión:
Una página de inicio de sesión separada saltará a la aplicación de una sola página después de completar el inicio de sesión. Esto permite el control de acceso de los recursos de la aplicación de una sola página para evitar que los usuarios no login accedan, y es adecuado para escenarios de aplicación de antecedentes o herramientas de gestión. Pero en realidad reduce la experiencia del usuario de las aplicaciones de una sola página
Ejecute Iniciar sesión dentro de una aplicación de una sola página , que está más en línea con el concepto de diseño de una aplicación de una sola página y es más adecuado para escenarios de productos populares, porque las personas maliciosas siempre pueden obtener el código front-end de su aplicación de una sola página.
Una página de inicio de sesión separada
En términos generales, el propósito de usar una página de inicio de sesión separada es proteger las páginas que se saltan después de iniciar sesión de los usuarios anónimos. Por lo tanto, en la página de inicio de sesión, se construye un formulario y se usa directamente el método de envío de recomendación tradicional (no AJAX). Después de que el backend valida el nombre de usuario y la contraseña correctamente, se emite el HTML de la página de la aplicación de un solo lado después del inicio de sesión.
En este caso, puede colocar directamente la información de autenticación en la salida HTML, por ejemplo, puede usar Jade para construir una página como esta:
< window.token =! {json.stringify (token)}; Div.md-Padding (UI-View) Script (src = "/assets/app.84b1e53df1b4b23171da.js")Después de que la verificación de nombre de usuario y contraseña sea exitosa, el backend puede usar el siguiente método para representar y emitir HTML:
return res.render ('tablilla', {token: token});Una vez que se lanza la aplicación angular, puede comunicarse con la autenticación. También garantiza que solo los usuarios que han iniciado sesión con éxito pueden ingresar esta página.
Organizaciones que inician sesión en una sola aplicación de página
Para aplicaciones angulares de visión múltiple, el enrutamiento generalmente se usa. Dentro de la página, generalmente hay un menú de barra lateral fija o un menú de navegación superior, y el área de texto está controlada por el módulo de enrutamiento.
El siguiente código de muestra utiliza material angular para organizar la página, y el módulo de enrutamiento utiliza UI-Router. Cuando se abre la aplicación, hay una animación de carga especial. Después de completar la carga, la página que se muestra es utilizada por el controlador AppController . Para los usuarios que no están registrados, se mostrará un formulario de inicio de sesión. Después de completar el inicio de sesión, la página se divide en tres partes: una es la navegación superior de pan de pan , el segundo es el menú de la barra lateral y la otra es la parte principal del control de ruta .
El código es el siguiente:
<Body ng-app = "app" lentout = "row"> <div id = "carging"> <!-Page de carga de carga-> </div> <div flex diseño = "row" ng-cloak ng-confontroller = "appController" ng-init = "load ()"> <div ng-if = "! Isuserauth", ng-controller = "logincontroller"> < </md-toolbar> <md-content> <!-enrutamiento-> <div ui-view> </div> </md-content> </md-content> </div> </div> </body>
Para cargar animaciones, están fuera AppController y se pueden ocultar en AppController . Esto logra el propósito de cargar la desaparición después de que se cargue todo CSS/JavaScript.
Hay una variable en AppController isUserAuth Es false cuando se inicializa. Cuando la información de la sesión almacenada localmente es válida, o después de completar el inicio de sesión, este valor se establecerá en ture . Debido al control de ng-if , se puede lograr el propósito de ocultar el formulario de inicio de sesión y mostrar el contenido de la aplicación. Cabe señalar que solo mediante el uso de ng-if en lugar de ng-show/ng-hide aquí, el primero realmente eliminará y agregará elementos DOM, mientras que el segundo solo modificará los atributos CSS de un elemento DOM. Esto es muy importante. Solo de esta manera podemos asegurarnos de que después de iniciar sesión, el contenido en la aplicación de una sola página se cargará para evitar que el código del controlador en la ruta actual se ejecute directamente antes de iniciar sesión.
¿Por qué los clientes también encriptan las contraseñas?
Un proceso de inicio de sesión ideal basado en el nombre de usuario y la contraseña es el siguiente:
1 md5(username + md5(md5(password)))
2. El back -end obtiene la sal correspondiente basada en el nombre de usuario, utiliza el valor de hash de nombre de usuario y contraseña, calcula un texto cifrado y busca la base de datos en función del nombre de usuario y la contraseña
3. Si la consulta es exitosa, genere la clave, devuélvala al navegador y realice el paso 4
4. El backend genera una nueva sal y genera un nuevo texto cifrado basado en la nueva sal y el valor de hash de contraseña enviado por el navegador. Actualizar sal y texto cifrado en la base de datos
Quizás el 80% de las personas no pueden entender por qué un inicio de sesión es tan complicado. Esto puede requerir un artículo especial para explicar claramente. Aquí explicaré por qué el navegador hash la contraseña, y las razones son las siguientes:
1. Proteja la contraseña del usuario de la fuente para asegurarse de que solo haciendo registros clave puede obtener la contraseña original del usuario
2. Incluso si la red se escucha a escasas y no se usa HTTPS, la contraseña robada es solo después del hash, lo que puede afectar los datos del usuario en este servidor como máximo, y no afecta a otros sitios web que usan la misma contraseña.
3. Incluso el propietario del servidor no puede obtener la contraseña original del usuario.
Este enfoque tiene el mayor riesgo para los usuarios, y los datos en la aplicación actual son robados. El rango de pérdidas no se ampliará, y nunca habrá problemas con CSDN u otras corrientes.
Iniciar sesión Notificación exitosa
Para algunas aplicaciones, no todas las páginas requieren que los usuarios inicien sesión. Es posible que solo necesiten iniciar sesión al realizar ciertas operaciones. En este caso, después de iniciar sesión, se debe notificar a toda la aplicación. Esto le permite usar la función de transmisión.
El código simple es el siguiente:
Angular .module ('app') .controller ('logincontroller', ['$ rootscope', logincontroller]); function logincontroller ($ rootscope) {// function llamado afterLoginSuccess () {$ rootscope. $ broadcast ('us.login.success', {// datos a ser transmitidos}); }}En otros controladores, puede escuchar esta transmisión y realizar las operaciones que deben realizarse después de que el inicio de sesión sea exitoso, como obtener una lista o detalles:
$ Scope. $ on ('user.login.success', function (manejo, data) {// procesamiento});Información de autenticación de identidad
Después de iniciar sesión con éxito, el servidor devuelve la clave, y las solicitudes de API posteriores deben traer la clave, y la respuesta devuelta por la solicitud también debe verificarse si es un error sobre la invalidez de la información de identidad. Esta serie de trabajo es bastante engorrosa y debe completarse automáticamente.
ahorrar
Hay aproximadamente las siguientes formas de guardar la clave:
1.Chookies: Como se mencionó anteriormente, esto no se recomienda. Al mismo tiempo, también tiene un límite máximo de 4K
2.SessionStorage: la página de pestañas es válida. Una vez cerrado o se abre una nueva página de pestaña, SessionStorage no se puede compartir.
3.LocalStorage: un método de almacenamiento ideal. A menos que los datos del navegador se limpien, los datos almacenados en LocalStorage siempre existirán.
4. Servicio de singleton angular: si se almacena en la aplicación, los datos se perderán después de refrescarse y, por supuesto, no se puede compartir entre las páginas de pestañas.
Un mejor enfoque es que la información de autenticación se almacena en LocalStorage, pero se inicializa en el servicio Singleton de Angular cuando comienza la aplicación.
Agregar información de autenticación a la solicitud
El propósito de la información de autenticación de identidad es indicar identidad al servidor y obtener datos. Por lo tanto, se requiere información de autenticación adicional en la solicitud.
En aplicaciones generales, la información de autenticación se coloca en los encabezados de la solicitud. Si establece encabezados uno por uno en cada solicitud, será demasiado lento y laborioso. $httpProvider en Angular proporciona un interceptor interceptors a través del cual se puede lograr un procesamiento unificado de cada solicitud y respuesta.
La forma de agregar un interceptor es la siguiente:
Angular .module ('app') .config (['$ httpprovider', function ($ httprovider) {$ httpprovider.interceptors.push (httpinterceptor);}]); La definición de HttpInterceptor es la siguiente:
Angular .module ('app') .factory ('httpinterceptor', ['$ q', httpinterceptor]); function httpinterceptor ($ q) {return {// antes de que se emita la solicitud, se puede usar para agregar varias solicitudes de información de autenticación: function (config) {if localStorage.token) {config. } return config; }, // Se produjo un error al solicitar se emite requesterror: function (err) {return $ q.reject (err); }, // Respuesta de respuesta: function (res) {return res; }, // El error de respuesta devuelto, incluyendo cuando el backend devuelve la respuesta, el código de estado HTTP de Non200 está establecido: function (err) {return $ q.reject (err); }};}Los interceptores proporcionan el procesamiento completo del ciclo de vida desde la solicitud a la respuesta de retorno, que generalmente se puede usar para hacer lo siguiente:
1. Agregue datos a las solicitudes emitidas de manera uniforme, como agregar información de autenticación
2. Manejo de errores unificados, incluidos los errores cuando se emite la solicitud (como la red en el lado del navegador no está conectada), y los errores cuando se devuelve la respuesta
3. Procesamiento de respuesta unificada, como caché algunos datos, etc.
4. Muestra la barra de progreso de la solicitud
En el código de ejemplo anterior, cuando localStorage incluye el token de valor, se agrega un valor token al jefe de cada solicitud.
Fracaso y manejo
En general, el backend debe establecer el código de estado HTTP de respuesta en 401 cuando token falla, de modo que se pueda manejar de manera uniforme en el Interceptor responseError :
ResponseError: function (err) {if (-1 === Err.status) {// El servidor remoto no responde} else if (401 === Err.Status) {// El error 401 generalmente se usa para la falla de la autenticación. Depende del error lanzado por el backend cuando la autenticación falla} else if (404 === Err.Status) {// El servidor devuelve 404} return $ q.reject (err);}Resumir
De hecho, siempre que el código de estado devuelto por el servidor no sea 200, se llamará responseError . Aquí, el error se puede manejar de manera uniforme y exhibida.
El contenido anterior está relacionado con la verificación de inicio de sesión e identidad en aplicaciones de desarrollo angular. Espero que sea útil para todos aprender Angular.