[Preguntas de la entrevista a nivel de proyecto] ¿Puede hablar sobre la autenticación de front-end en detalle?

Si alguien le pregunta: "Ha estado desarrollando durante tantos años, ¿puede hablar sobre la autenticación de front-end en detalle?". ¿Cómo debe responder, tiene una idea completa en su mente?

¿Puede manejar conceptos como Token , Cookie, Sesión, JWT, inicio de sesión único , sus funciones, escenarios de aplicación, cómo usar y almacenar, cómo garantizar la seguridad, etc.?

Plataforma de gestión digital
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
blog personal

Otro ejemplo es la autenticación, la autorización, la autenticación, el control de autoridad y la relación entre ellos ¿Realmente entiendes a fondo?

inserte la descripción de la imagen aquí

1. Autenticación, Autorización, Autenticación, Control de Autoridad

1.1 ¿Qué es la certificación?

认证(Identification)Se refiere a la confirmación de la identidad del declarante en función de la información de identificación exclusiva del declarante.

La lengua vernácula significa: 你需要用身份证证明你自己是你自己.

Por ejemplo, nuestra tecnología de autenticación común:

tarjeta de identificación
nombre de usuario y contraseña
Teléfono móvil del usuario: mensaje de texto de teléfono móvil, escaneo de código QR de teléfono móvil, contraseña de gesto
correo electrónico del usuario
Datos biométricos del usuario: huellas dactilares, voz, iris de los ojos
Big data identificación de usuarios
etc.

1.2 ¿Qué es la autorización?

授权(Authorization): En el campo de la seguridad de la información, se refiere a 资源所有者la delegación 执行者, que otorga 执行者derechos de operación de recursos en un rango específico, para realizar operaciones relacionadas con los recursos.

En el campo de la vida real, por ejemplo: tarjeta bancaria (emitida por el banco), tarjeta de control de acceso (emitida por la oficina de administración de la propiedad), llave (emitida por el propietario), estas son la realización de la autorización en la vida real.

En el ámbito de Internet, por ejemplo: el mecanismo de sesión del servidor web, el mecanismo de cookies del navegador web, y la emisión de tokens de autorización (token), etc. son todos mecanismos de autorización.

1.3 ¿Qué es la autenticación?

鉴权(Authentication)En el campo de la seguridad de la información, se refiere al proceso de identificación y confirmación de la autenticidad de los derechos de identidad declarados por un declarante .

Si comienza desde la autorización, será más fácil entender la autenticación. La autorización y la autenticación son dos relaciones de coincidencia ascendentes y descendentes, primero la autorización y luego la autenticación .

En el campo de la vida real: la tarjeta de control de acceso debe pasar por el reconocedor de tarjetas de control de acceso, y la tarjeta bancaria debe pasar por el reconocedor de tarjetas bancarias;

En el campo Internet: Verificar la legitimidad y vigencia de sesión/cookie/token

鉴权Es un vínculo entre lo anterior y lo siguiente, el upstream acepta la salida autorizada, verifica su autenticidad y luego obtiene el permiso (permission), que estará listo para el siguiente paso de control de permisos.

1.4 ¿Qué es el control de permisos?

权限控制(Access/Permission Control)Defina operaciones ejecutables como una lista de permisos y luego determine si la operación está permitida/prohibida

Para el control de permisos, se puede dividir en dos partes para su comprensión: una es permiso y la otra es control. El permiso es un concepto lógico abstracto, mientras que el control es una implementación concreta.

En el campo de la vida real: tome como ejemplo la implementación de permisos de tarjetas de control de acceso. Una tarjeta de control de acceso tiene la autoridad para abrir todas las puertas de la empresa; una tarjeta de control de acceso tiene la autoridad del rol de administrador, por lo que puede abrir todas las puertas de la empresa.

En el ámbito de Internet: a través de servicios web backend, para controlar el acceso a la interfaz, permitir o denegar solicitudes de acceso.

1.5 ¿Cuál es la relación entre autenticación, autorización, autenticación y control de autoridad?

Al ver esto, debemos entender que 认证, 授权, 鉴权y 权限控制estos cuatro enlaces son uno 前后依次发生y 上下游están relacionados;

inserte la descripción de la imagen aquí

Cabe señalar que estos cuatro enlaces a veces ocurren simultáneamente. Por ejemplo en los siguientes escenarios:

Use la tarjeta de control de acceso para abrir la puerta: los cuatro enlaces de autenticación, autorización, autenticación y control de autoridad se completan de una sola vez y ocurren simultáneamente en un instante
Inicio de sesión del usuario en el sitio web: cuando un usuario inicia sesión con un nombre de usuario y una contraseña, la autenticación y la autorización se completan juntas, mientras que la autenticación y el control de permisos ocurren en solicitudes de acceso posteriores, como al comprar artículos o pagar.

2. Esquema de autenticación de front-end

2.1 Autenticación básica HTTP

En HTTP, 基本认证方案（Basic Access Authentication)es para permitir que el cliente (generalmente se refiere al navegador web) verifique la identidad del usuario al proporcionar el nombre de usuario y la contraseña cuando lo solicite.

Diagrama de flujo de autenticación

inserte la descripción de la imagen aquí

Análisis de los pasos de autenticación
- Cliente (como un navegador): solicite uno al servidor 受限的列表数据或资源, por ejemplo, los campos son los siguientes
  
  GET /list/ HTTP/1.1 Host: www.baidu.com Authorization: Basic aHR0cHdhdGNoOmY=
- Servidor : Hola cliente, este recurso se encuentra en la zona de seguridad baidu.com, que es un recurso restringido y requiere autenticación básica;
  
  Y devuelva un código de estado 401 (No autorizado no autorizado) al cliente y proporcione un dominio de autenticación www-Authenticate: Basic realm=”baidu.com”para solicitar la autenticación;
  
  Entre ellos Basicestá el modo de verificación, y realm="baidu.com"significa que el cliente debe ingresar el nombre de usuario y la contraseña de este dominio de seguridad, no de otros dominios.
  
  HTTP/1.1 401 Unauthorizedwww-Authenticate: Basic realm= "baidu.com"
- Cliente: servidor, le he traído el nombre de usuario y la contraseña, eche un vistazo; (Nota: si el cliente es un navegador, aparecerá automáticamente una ventana emergente en este momento, lo que le permitirá al usuario ingresar el nombre de usuario y contraseña);
  
  Después de ingresar el nombre de usuario y la contraseña, el cliente envía el nombre de usuario y la contraseña al servidor en cifrado Base64
  
  El formato de transmisión es el siguiente (el contenido de Basic es: nombre de usuario: forma de contraseña ase64 ):
  
  GET /list/ HTTP/1.1Authorization: Basic Ksid2FuZzp3YW5n==
- Servidor: Hola cliente, he verificado Authorizationsu nombre de usuario y contraseña en el campo y son correctos, este es el recurso que desea.
  
  HTTP/1.1 200 OK ...
ventaja

Simple, básicamente todos los navegadores populares son compatibles
defecto
- No es seguro:
  
  Debido a que se basa en la transmisión HTTP, casi se propaga en la red.Aunque utiliza Base64 para codificar, esta codificación se puede decodificar fácilmente.
  
  Incluso si el contenido de autenticación no se puede decodificar en el nombre de usuario y la contraseña originales, no es seguro. Los usuarios maliciosos pueden usar su servidor de intercambio continuo para iniciar solicitudes después de obtener el contenido de autenticación. Este es el llamado ataque de repetición.
- No se puede cerrar sesión activamente :
  
  Porque el protocolo HTTP no proporciona un mecanismo para borrar la información de autenticación básica en el navegador, a menos que se cierre la pestaña o el navegador, o que el usuario borre el historial.
Escenas a utilizar

Red interna, o una red que no tiene altos requisitos de seguridad.

Casi todos los sitios web en línea no usarán este esquema de certificación, por lo que todos pueden entender este esquema.

2.2 Autenticación de cookies de sesión

Session-CookieLa autenticación es un modo de autenticación de comunicación de front-end y back-end realizado mediante el uso de la sesión (sesión ) en el lado del servidor y la cookie en el navegador (lado del cliente) .
Antes de entender esta oración, entendamos brevemente 什么是 Cookiey 什么是 Session?
1. que son las galletas
  
  Como todos sabemos, HTTP 是无状态的协议(no hay capacidad de memoria para el procesamiento de transacciones, y el servidor no guardará ninguna información de sesión cada vez que se complete la sesión del cliente y del servidor);
  
  Por lo tanto, para que el servidor distinga diferentes clientes, debe mantener activamente un estado, que se utiliza para informar al servidor si las dos solicitudes anteriores y posteriores provienen del mismo navegador. Y este estado se puede Cookielograr yendo.
  
  Características:
  - Las cookies se almacenan en el lado del cliente y se pueden manipular a voluntad, lo que no es seguro
  - Hay un límite de tamaño, hasta 4kb
  - Hay un límite en la cantidad de cookies. Generalmente, un navegador solo puede almacenar no más de 20 cookies para un sitio web, y un navegador generalmente solo permite almacenar 300 cookies.
  - Android e IOS no admiten bien las cookies
  - Las cookies no son de dominio cruzado, pero se permite compartir el nombre de dominio de primer nivel y el nombre de dominio de segundo nivel (dependiendo del dominio)
2. ¿Qué es la sesión?
  1. El concepto abstracto de Sesión es una sesión, que es una abstracción de la interacción entre el usuario y el servidor para realizar la operación de interrupción/continuación en el proceso de comunicación del protocolo sin estado;
  2. Específicamente, es una estructura de sesión generada por el servidor, que se puede guardar de varias maneras, como memoria, base de datos, archivos, etc. Los sitios web grandes generalmente tienen clústeres de servidores de sesión dedicados para guardar sesiones de usuario;
  3. Proceso de principio:
  4. 1. Cliente: el usuario envía una solicitud al servidor por primera vez;
    2. Servidor: Reciba los datos y cree automáticamente una Sesión / ID de sesión específica para que el usuario identifique al usuario y realice un seguimiento del proceso de sesión actual del usuario;
    3. Cliente: El navegador recibe la respuesta para obtener información de la sesión, y traerá el Session/Session ID en la próxima solicitud;
    4. Servidor: después de la extracción, el servidor lo comparará con el ID de sesión guardado localmente para encontrar la sesión del usuario específico y luego obtener el estado de la sesión;
    5. Hasta ahora, la comunicación entre el cliente y el servidor se ha convertido en una comunicación con estado;
  5. Características:
  6. - La sesión se guarda en el servidor;
    - A través del protocolo de encriptación que viene con el servidor;
  7. Diferencias con las cookies:
  8. - Seguridad: dado que las cookies se almacenan en el lado del cliente, se pueden manipular a voluntad, mientras que las sesiones se almacenan en el lado del servidor de manera diferente y no se pueden falsificar, por lo que las sesiones son más seguras;
    - Los tipos de valores de acceso son diferentes: la cookie solo admite datos de cadena y la sesión puede almacenar cualquier tipo de datos;
    - El período de validez es diferente: la cookie se puede configurar para que se mantenga durante mucho tiempo, y la sesión generalmente tiene un tiempo de vencimiento más corto;
    - El tamaño de almacenamiento es diferente: los datos guardados por la cookie no pueden exceder los 4K;
  9. Al ver esto, algunos estudiantes pueden haber pensado en ello, ¿ Session-Cookiesolo está Sessionalmacenado en el archivo del cliente Cookie?
    
    Bingo , eso es verdad, sigamos adelante
3. Diagrama de flujo de autenticación de cookies de sesión

inserte la descripción de la imagen aquí

Análisis de pasos de autenticación de cookies de sesión
- Cliente: envíe la información de inicio de sesión nombre de usuario/contraseña al servidor para solicitar la verificación de inicio de sesión;
- Servidor: verifique la información de inicio de sesión, cree automáticamente una sesión después de pasar la verificación (guarde la sesión en la memoria o en Redis) y luego genere una credencial de identidad de sesión de cadena de identificación única (comúnmente conocida como ) para esta sesión session_idy establezca este identificador único en sidel encabezado de respuesta ;Set-Cookie
  
  Nota: puede usar la firma para sidcifrar y el servidor secretla descifrará de acuerdo con la clave correspondiente (no es un paso necesario)
- Cliente: después de recibir la respuesta del servidor, analizará el encabezado de la respuesta y lo sidguardará automáticamente en la Cookie local, y el navegador adjuntará automáticamente la información de la Cookie bajo el nombre de dominio al encabezado de la solicitud en la siguiente solicitud HTTP;
- Servidor: al recibir una solicitud de un cliente, analizará la cookie en el encabezado de la solicitud , y luego irá al cliente guardado por el servidor siden función de esto , y luego juzgará si la solicitud es legal;sidsid
Ventajas de las cookies de sesión
- Las cookies son fáciles de usar.
- Los datos de la sesión se almacenan en el lado del servidor, que es más fácil de administrar que JWT, es decir, cuando un usuario inicia sesión y cierra sesión activamente, solo necesita agregar y eliminar la sesión correspondiente, lo cual es conveniente para la administración
- Solo se requiere la operación de back-end, y el front-end se puede operar sin ningún sentido;
Desventajas de las cookies de sesión
- Confíe en las cookies, una vez que el usuario deshabilite las cookies en el lado del navegador, entonces GG Smecta;
- Muy inseguras, las cookies exponen datos al navegador, lo que aumenta el riesgo de robo de datos (fácil de ser atacado por CSRF);
- La sesión se almacena en el lado del servidor, lo que aumenta la sobrecarga del lado del servidor y reducirá en gran medida el rendimiento del servidor cuando la cantidad de usuarios sea grande;
- No es amigable con el soporte móvil;
Escenas a utilizar
- En general, se aplican sitios web medianos y grandes (excepto terminal móvil APP);
- Dado que la sesión general debe almacenarse centralmente en el servidor de memoria (como Redis), esto aumentará el presupuesto del servidor, así que elija con cuidado si el presupuesto no es suficiente;
Bibliotecas de sesión recomendadas comúnmente utilizadas en el front-end
- Usar express: sesión express [1]
- También se usa: sesión de koa [2]