Formularios de autorización y registro de jquery. Registro paso a paso con jQuery

En este artículo, aprenderá cómo crear un formulario de registro y autorización utilizando HTML, JavaScript, PHP y MySql. Estos formularios se utilizan en casi todos los sitios, independientemente de su tipo. Se crean tanto para el foro como para la tienda online y para las redes sociales (como, por ejemplo, Facebook, Twiter, Odnoklassniki) y para muchos otros tipos de sitios.

Si tiene un sitio en su computadora local, espero que ya lo tenga. Nada funcionará sin él.

Crear una tabla en la base de datos

Para implementar el registro de usuario, en primer lugar, necesitamos una base de datos. Si ya lo tiene, genial, de lo contrario, debe crearlo. En este artículo, explico en detalle cómo hacer esto.

Y entonces, tenemos una base de datos (abreviada como base de datos), ahora necesitamos crear una tabla usuarios en el que agregaremos nuestros usuarios registrados.

También expliqué cómo crear una tabla en una base de datos en el artículo. Antes de crear una tabla, necesitamos definir qué campos contendrá. Estos campos corresponderán a los campos del formulario de registro.

Entonces, pensamos, imaginamos qué campos tendrá nuestro formulario y creamos una tabla usuarios con campos como este:

• identificación- Identificador. Campo identificación todas las tablas de la base de datos deberían tener.
• primer nombre- Para guardar el nombre.
• apellido- Para guardar apellidos.
• Email- Guardar la dirección postal. Usaremos el correo electrónico como inicio de sesión, por lo que este campo debe ser único, es decir, debe tener un índice ÚNICO.
• email_status- Campo para indicar si el correo está confirmado o no. Si el correo es confirmado, tendrá el valor 1, en caso contrario el valor 0. Por defecto, este campo tendrá el valor 0.
• contraseña- Para guardar la contraseña.

Todos los campos de tipo "VARCHAR" deben tener un valor predeterminado de NULL.

Si desea que su formulario de registro tenga más campos, también puede agregarlos aquí.

Todo, nuestra mesa usuarios Listo. Pasemos al siguiente paso.

Conexión de base de datos

Hemos creado la base de datos, ahora necesitamos conectarnos a ella. Nos conectaremos usando la extensión PHP MySQLi.

En la carpeta de nuestro sitio, cree un archivo llamado dbconnect.php, y en él escribimos el siguiente script:

Error de conexión a la base de datos... Descripción del error: ".mysqli_connect_error ()".

"; exit ();) // Establecer la codificación de la conexión $ mysqli-> set_charset (" utf8 "); // Para mayor comodidad, agreguemos aquí una variable que contendrá el nombre de nuestro sitio $ address_site =" http: // testite.local ";?>

Este archivo dbconnect.php necesitará estar conectado para formar controladores.

Presta atención a la variable $ address_site, aquí indiqué el nombre de mi sitio de prueba en el que estaré trabajando. Debe indicar el nombre de su sitio en consecuencia.

Estructura del sitio

Ahora echemos un vistazo a la estructura HTML de nuestro sitio.

Moviremos el encabezado y pie de página del sitio a archivos separados, header.php y footer.php... Los incluiremos en todas las páginas. Es decir, en el principal (archivo index.php), a la página con el formulario de registro (archivo form_register.php) y a la página con el formulario de autorización (archivo form_auth.php).

Bloquear con nuestros enlaces, registro y autorización, agréguelo al encabezado del sitio para que se muestren en todas las páginas. Un enlace entrará en página del formulario de registro(expediente form_register.php) y el otro a la página con formulario de autorización(expediente form_auth.php).

Contenido del archivo header.php:

Nombre de nuestro sitio

Como resultado, la página principal se ve así:

Por supuesto, su sitio puede tener una estructura completamente diferente, pero esto no es importante para nosotros ahora. Lo principal es que existen enlaces (botones) para el registro y la autorización.

Ahora pasemos al formulario de registro. Como ya entendiste, lo tenemos en el archivo. form_register.php.

Vaya a la Base de datos (en phpMyAdmin), abra la estructura de la tabla usuarios y ver qué campos necesitamos. Esto significa que necesitamos campos para ingresar el nombre y apellido, un campo para ingresar una dirección postal (correo electrónico) y un campo para ingresar una contraseña. Y por motivos de seguridad, agregaremos un campo para ingresar captcha.

En el servidor, como resultado del procesamiento del formulario de registro, pueden ocurrir varios errores, por lo que el usuario no podrá registrarse. Por lo tanto, para que el usuario comprenda por qué falla el registro, es necesario mostrar mensajes sobre estos errores.

Antes de mostrar el formulario, agregue un bloque para mostrar los mensajes de error de la sesión.

Y una cosa más, si el usuario ya ha iniciado sesión, y por el bien de su interés ingresa directamente a la página de registro escribiendo en la barra de direcciones del navegador site_address / form_register.php, entonces en este caso, en lugar del formulario de registro, le mostraremos un título indicando que ya se ha registrado.

En general, el código de archivo form_register.php lo tenemos así:

Ya está registrado

En el navegador, la página del formulario de registro se ve así:

Mediante el uso atributo requerido, hemos hecho que todos los campos sean obligatorios.

Preste atención al código del formulario de registro donde se muestra captcha:

Especificamos la ruta al archivo en el valor del atributo src para la imagen. captcha.php que genera este captcha.

Veamos el código del archivo. captcha.php:

El código está bien comentado, por lo que me centraré en un solo punto.

Dentro de la función imageTtfText (), se especifica la ruta a la fuente verdana.ttf... Entonces, para que el captcha funcione correctamente, debemos crear una carpeta fuentes y coloque el archivo de fuente allí verdana.ttf... Puede encontrarlo y descargarlo de Internet, o tomarlo del archivo con los materiales de este artículo.

Hemos terminado con la estructura HTML, es hora de seguir adelante.

Comprobando la validez del correo electrónico con jQuery

Cualquier formulario debe verificar la validez de los datos ingresados, tanto en el lado del cliente (usando JavaScript, jQuery) como en el lado del servidor.

Debemos prestar especial atención al campo Correo electrónico. Es muy importante que la dirección postal ingresada sea válida.

Para este campo de entrada, hemos configurado el tipo de correo electrónico (type = "email"), esto nos advierte un poco contra formatos incorrectos. Pero, esto no es suficiente, porque a través del inspector de código que nos proporciona el navegador, puedes cambiar fácilmente el valor del atributo escribe con Email sobre texto y listo, nuestro cheque ya no será válido.

Y en ese caso, necesitamos hacer una verificación más confiable. Para ello, usaremos la biblioteca jQuery de JavaScript.

Para conectar la biblioteca jQuery, en el archivo header.php entre etiquetas , antes de la etiqueta de cierre , agregue esta línea:

Inmediatamente después de esta línea, agregue el código de verificación de validación del correo electrónico. Aquí agregamos un código para verificar la longitud de la contraseña ingresada. Su longitud debe ser de al menos 6 caracteres.

Con la ayuda de este script, verificamos la validez de la dirección de correo electrónico ingresada. Si el usuario ingresó un correo electrónico incorrecto, mostramos un error al respecto y desactivamos el botón para enviar el formulario. Si todo está bien, eliminamos el error y activamos el botón para enviar el formulario.

Y así, hemos terminado con la validación del formulario en el lado del cliente. Ahora podemos enviarlo al servidor, donde también haremos un par de comprobaciones y añadiremos los datos a la base de datos.

Registro de usuario

Enviamos el formulario para su procesamiento al archivo. register.php, a través del método POST. El nombre de este archivo de controlador, especificado en el valor del atributo acción... Y el método de envío se especifica en el valor del atributo método.

Abriendo este archivo register.php y lo primero que debemos hacer es escribir una función para iniciar una sesión y conectar el archivo que creamos anteriormente dbconnect.php(En este archivo, hicimos una conexión a la base de datos). Y sin embargo, declaremos inmediatamente las celdas error de mensajes y mensajes_de_exito en la matriz global de la sesión. V mensajes_error registraremos todos los mensajes de error que se produzcan durante el procesamiento del formulario, y en succes_messages, grabaremos mensajes alegres.

Antes de continuar, debemos verificar fue el formulario enviado en absoluto... Un atacante podría ver el valor de un atributo acción del formulario y averigüe qué archivo está procesando este formulario. Y puede tener la idea de ir directamente a este archivo escribiendo la siguiente dirección en la barra de direcciones del navegador: http: //arees_site/register.php

Por lo tanto, debemos verificar la presencia de una celda en la matriz POST global, cuyo nombre coincide con el nombre de nuestro botón "Registrarse" del formulario. Por lo tanto, verificamos si se hizo clic en el botón "Registrarse" o no.

Si un atacante intenta acceder directamente a este archivo, recibirá un mensaje de error. Permítame recordarle que la variable $ address_site contiene el nombre del sitio y se declaró en el archivo dbconnect.php.

¡Error! página de inicio.

"); } ?>

El valor del captcha en la sesión se agregó cuando se generó, en el archivo captcha.php... Como recordatorio, te mostraré este fragmento de código del archivo nuevamente. captcha.php donde el valor de captcha se agrega a la sesión:

Ahora procedamos a la verificación en sí. En archivo register.php, dentro del bloque if, donde verificamos si se hizo clic en el botón "Registrarse", o mejor dicho, donde se especifica el comentario " // (1) Lugar para el siguiente fragmento de código"nosotros escribimos:

// Verifica el captcha resultante // Recorta los espacios desde el principio y el final de la línea $ captcha = trim ($ _ POST ["captcha"]); if (isset ($ _ POST ["captcha"]) &&! empty ($ captcha)) (// Compara el valor recibido con el valor de la sesión. if (($ _ SESSION ["rand"]! = $ captcha ) && ($ _SESSION ["rand"]! = "")) (// Si el captcha no es correcto, devolvemos al usuario a la página de registro, y allí mostraremos un mensaje de error de que ingresó el captcha incorrecto . $ mensaje_error = "

¡Error! Ingresaste el captcha incorrecto

"; // Guarde el mensaje de error en la sesión. $ _SESSION [" error_messages "] = $ error_message; // Regrese al usuario al encabezado de la página de registro (" HTTP / 1.1 301 Moved Permanently "); header (" Ubicación: " . $ Address_site. "/ Form_register.php"); // Detiene el script exit ();) // (2) Lugar para el siguiente fragmento de código) else (// Si el captcha no se pasa o está vacío exit ( "

¡Error! No hay código de verificación, es decir, el código captcha. Puede ir a la página de inicio.

"); }

A continuación, necesitamos procesar los datos recibidos de la matriz POST. En primer lugar, debemos verificar el contenido de la matriz POST global, es decir, si hay celdas con los nombres correspondientes a los nombres de los campos de entrada de nuestro formulario.

Si la celda existe, recortamos los espacios desde el principio y desde el final de la línea de esta celda; de lo contrario, redirigimos al usuario a la página con el formulario de registro.

Además, después de haber recortado los espacios, agregamos una línea a la variable y verificamos que esta variable no esté vacía, si no está vacía, entonces adelante, de lo contrario, redirigimos al usuario a la página con el formulario de registro.

Pega este código en la ubicación especificada " // (2) Lugar para el siguiente fragmento de código".

/ * Verifica si la matriz global $ _POST contiene los datos enviados desde el formulario y encierra los datos enviados en variables ordinarias. * / If (isset ($ _ POST ["first_name"])) (// Recorta los espacios desde el principio y desde el final de la cadena $ first_name = trim ($ _ POST ["first_name"]); // Verifique que la variable no esté vacía if (! empty ($ first_name)) (// Por seguridad, convierta los caracteres especiales en entidades HTML $ first_name = htmlspecialchars ($ first_name, ENT_QUOTES);) else (// Guarde el mensaje de error en la sesión. $ _SESSION ["error_messages"]. = "

Introduzca su nombre

Falta el campo de nombre

"; // Devolver al usuario al encabezado de la página de registro (" HTTP / 1.1 301 Moved Permanently "); header (" Ubicación: ". $ Address_site." / Form_register.php "); // Detener el script exit (); ) if (isset ($ _ POST ["last_name"])) (// Recortar espacios desde el principio y el final de la cadena $ last_name = trim ($ _ POST ["last_name"]); if (! empty ($ last_name )) (// Por seguridad, convierta caracteres especiales en entidades HTML $ last_name = htmlspecialchars ($ last_name, ENT_QUOTES);) else (// Guarde el mensaje de error en la sesión. $ _SESSION ["error_messages"]. = "

Ingrese su apellido

"; // Devolver al usuario al encabezado de la página de registro (" HTTP / 1.1 301 Moved Permanently "); header (" Ubicación: ". $ Address_site." / Form_register.php "); // Detener el script exit (); )) else (// Guarde el mensaje de error en la sesión. $ _SESSION ["error_messages"]. = "

Falta el campo de apellido

"; // Devolver al usuario al encabezado de la página de registro (" HTTP / 1.1 301 Moved Permanently "); header (" Ubicación: ". $ Address_site." / Form_register.php "); // Detener el script exit (); ) if (isset ($ _ POST ["email"])) (// Recortar espacios desde el principio y el final de la línea $ email = trim ($ _ POST ["email"]); if (! empty ($ email )) ($ email = htmlspecialchars ($ email, ENT_QUOTES); // (3) Lugar del código para verificar el formato de la dirección de correo electrónico y su singularidad) else (// Guarde el mensaje de error en la sesión. $ _SESSION [ "error_messages"]. = "

Introduce tu correo electrónico

"; // Devolver al usuario al encabezado de la página de registro (" HTTP / 1.1 301 Moved Permanently "); header (" Ubicación: ". $ Address_site." / Form_register.php "); // Detener el script exit (); )) else (// Guarde el mensaje de error en la sesión. $ _SESSION ["error_messages"]. = "

"; // Devolver al usuario al encabezado de la página de registro (" HTTP / 1.1 301 Moved Permanently "); header (" Ubicación: ". $ Address_site." / Form_register.php "); // Detener el script exit (); ) if (isset ($ _ POST ["contraseña"])) (// Recorta los espacios desde el principio y el final de la cadena $ contraseña = trim ($ _ POST ["contraseña"]); if (! empty ($ contraseña)) ($ contraseña = htmlspecialchars ($ contraseña, ENT_QUOTES); // Cifre el paprol $ contraseña = md5 ($ contraseña. "top_secret");) else (// Guarde el mensaje de error en la sesión. $ _SESSION [" error_messages "]. ="

Ingresa tu contraseña

"; // Devolver al usuario al encabezado de la página de registro (" HTTP / 1.1 301 Moved Permanently "); header (" Ubicación: ". $ Address_site." / Form_register.php "); // Detener el script exit (); )) else (// Guarde el mensaje de error en la sesión. $ _SESSION ["error_messages"]. = "

"; // Devolver al usuario al encabezado de la página de registro (" HTTP / 1.1 301 Moved Permanently "); header (" Ubicación: ". $ Address_site." / Form_register.php "); // Detener el script exit (); ) // (4) Lugar para el código para agregar un usuario a la base de datos

De particular importancia es el campo Email... Tenemos que comprobar el formato de la dirección postal recibida y su unicidad en la base de datos. Es decir, ¿hay algún usuario ya registrado con la misma dirección postal?

En la ubicación especificada " // (3) Lugar del código para comprobar el formato de la dirección postal y su unicidad"agregue el siguiente código:

// Verifique el formato de la dirección de correo electrónico recibida usando la expresión regular $ reg_email = "/^**@(+(*+)*\.)++/i"; // Si el formato de la dirección de correo electrónico recibida no coincide con la expresión regular if (! Preg_match ($ reg_email, $ email)) (// Guarde el mensaje de error en la sesión. $ _SESSION ["error_messages"]. = "

Ingresaste un correo electrónico no válido

"; // Devolver al usuario al encabezado de la página de registro (" HTTP / 1.1 301 Moved Permanently "); header (" Ubicación: ". $ Address_site." / Form_register.php "); // Detener el script exit (); ) // Comprobamos si ya existe dicha dirección en la base de datos. $ Result_query = $ mysqli-> query ("SELECT` email` FROM` users` WHERE` email` = "". $ Email. "" "); // Si el número de filas recibidas es exactamente uno, entonces un usuario con esta dirección de correo electrónico ya está registrado if ($ result_query-> num_rows == 1) (// Si el resultado no es falso if (($ row = $ result_query -> fetch_assoc ())! = false) (// Guarde el mensaje de error en la sesión. $ _SESSION ["error_messages"]. = "

Un usuario con esta dirección de correo ya está registrado.

"; // Devolver al usuario al encabezado de la página de registro (" HTTP / 1.1 301 Moved Permanently "); header (" Ubicación: ". $ Address_site." / Form_register.php ");) else (// Guardar el mensaje de error a la sesión. $ _SESSION ["error_messages"]. = "

Error en la consulta de la base de datos

"; // Devolver al usuario al encabezado de la página de registro (" HTTP / 1.1 301 Moved Permanently "); header (" Ubicación: ". $ Address_site." / Form_register.php ");) / * cerrar la selección * / $ result_query-> close (); // Detener el script exit ();) / * cerrando la selección * / $ result_query-> close ();

Y así, hemos terminado con todas las comprobaciones, es hora de agregar el usuario a la base de datos. En la ubicación especificada " // (4) Lugar para el código para agregar un usuario a la base de datos"agregue el siguiente código:

// Solicitud para agregar un usuario a la base de datos $ result_query_insert = $ mysqli-> query ("INSERT INTO` users` (first_name, last_name, email, password) VALUES (" ". $ First_name." "," ". $ Last_name . "", "". $ correo electrónico. "", "". $ contraseña. "") "); if (! $ result_query_insert) (// Guarde el mensaje de error en la sesión. $ _SESSION ["error_messages"]. = "

No se pudo agregar un usuario a la solicitud de la base de datos

"; // Devolver al usuario al encabezado de la página de registro (" HTTP / 1.1 301 Moved Permanently "); header (" Ubicación: ". $ Address_site." / Form_register.php "); // Detener el script exit (); ) else ($ _SESSION ["success_messages"] = "

Registro completado con éxito !!!
Ahora puede iniciar sesión con su nombre de usuario y contraseña.

"; // Envía al usuario al encabezado de la página de autorización (" HTTP / 1.1 301 Moved Permanently "); header (" Ubicación: ". $ Address_site." / Form_auth.php ");) / * Completando la solicitud * / $ result_query_insert-> close (); // Cerrar la conexión de la base de datos $ mysqli-> close ();

Si ocurre un error en la solicitud para agregar un usuario a la base de datos, agregamos un mensaje sobre este error a la sesión y devolvemos al usuario a la página de registro.

De lo contrario, si todo salió bien, también agregamos un mensaje a la sesión, pero ya más agradable, es decir, le decimos al usuario que el registro fue exitoso. Y lo redireccionamos a la página con el formulario de autorización.

El script para verificar el formato de la dirección de correo electrónico y la longitud de la contraseña está en el archivo header.php, por lo que también actuará en los campos de este formulario.

La sesión también se inicia en el archivo. header.php, entonces en el archivo form_auth.php no es necesario que inicies la sesión, porque obtendremos un error.

Como dije, el script para verificar el formato de la dirección de correo electrónico y la longitud de la contraseña también funciona aquí. Por lo tanto, si el usuario ingresa una dirección de correo electrónico incorrecta o una contraseña corta, inmediatamente recibirá un mensaje de error. Y el boton entrar se volverá inactivo.

Después de eliminar los errores, el botón entrar se activa y el usuario podrá enviar el formulario al servidor donde será procesado.

Autorización de usuario

Para atribuir valor acción la autorización para discapacitados tiene un archivo auth.php, esto significa que el formulario se procesará en este archivo.

Y entonces, abre el archivo auth.php y escriba el código para procesar el formulario de autorización. Lo primero que debe hacer es iniciar una sesión y conectar el archivo. dbconnect.php para conectarse a la base de datos.

// Declare una celda para agregar errores que puedan ocurrir al procesar el formulario. $ _SESSION ["error_messages"] = ""; // Declara la celda para agregar mensajes exitosos $ _SESSION ["success_messages"] = "";

/ * Compruebe si se envió el formulario, es decir, si se hizo clic en el botón Iniciar sesión. En caso afirmativo, continúe, si no, muestre al usuario un mensaje de error de que fue directamente a esta página. * / if (isset ($ _ POST ["btn_submit_auth"]) &&! empty ($ _ POST ["btn_submit_auth"])) (// (1) Espacio para el siguiente fragmento de código) else (exit ("

¡Error! Ha ingresado a esta página directamente, por lo que no hay datos que procesar. Puede ir a la página de inicio.

"); }

// Verifica el captcha resultante if (isset ($ _ POST ["captcha"])) (// Recorta los espacios desde el principio y el final de la línea $ captcha = trim ($ _ POST ["captcha"]); if (! Empty ($ captcha)) (// Compara el valor recibido con el valor de la sesión. If (($ _ SESSION ["rand"]! = $ Captcha) && ($ _SESSION ["rand"]! = " ")) (// Si el captcha no es correcto, devolvemos al usuario a la página de autorización, y allí mostraremos un mensaje de error de que ingresó el captcha incorrecto. $ Error_message ="

¡Error! Ingresaste el captcha incorrecto

"; // Guarde el mensaje de error en la sesión. $ _SESSION [" error_messages "] = $ error_message; // Regrese al usuario al encabezado de la página de autorización (" HTTP / 1.1 301 Moved Permanently "); header (" Ubicación: " . $ Address_site. "/ Form_auth.php"); // Detener el script exit ();)) else ($ error_message = "

¡Error! El campo de entrada del captcha no debe estar vacío.

"; // Guarde el mensaje de error en la sesión. $ _SESSION [" error_messages "] = $ error_message; // Devuelva al usuario al encabezado de la página de autorización (" HTTP / 1.1 301 Moved Permanently "); header (" Ubicación: " . $ Address_site. "/ Form_auth.php"); // Detener el script exit ();) // (2) Lugar para procesar la dirección de correo // (3) Lugar para procesar la contraseña // (4) Lugar para haciendo una consulta a la base de datos) else (// Si no se pasa captcha exit ("

¡Error! No hay código de verificación, es decir, el código captcha. Puede ir a la página de inicio.

"); }

Si el usuario ingresó el código de verificación correctamente, entonces continúe, de lo contrario lo regresaremos a la página de autorización.

Comprobación de la dirección postal

// Recorta los espacios desde el principio y el final de la línea $ email = trim ($ _ POST ["email"]); if (isset ($ _ POST ["email"])) (if (! empty ($ email)) ($ email = htmlspecialchars ($ email, ENT_QUOTES); // Verifica el formato de la dirección de correo electrónico recibida usando la expresión regular $ reg_email = "/^**@(+(*+)*\.)++/i"; // Si el formato de la dirección de correo electrónico recibida no coincide con la expresión regular if (! preg_match ($ reg_email, $ email)) (// Guardar en el mensaje de error de la sesión. $ _SESSION ["error_messages"]. = "

Ingresaste un correo electrónico incorrecto

"; // Devolver al usuario al encabezado de la página de autorización (" HTTP / 1.1 301 Moved Permanently "); header (" Ubicación: ". $ Address_site." / Form_auth.php "); // Detener el script exit (); )) else (// Guarde el mensaje de error en la sesión. $ _SESSION ["error_messages"]. = "

El campo para ingresar la dirección postal (correo electrónico) no debe estar vacío.

"; // Devolver al usuario al encabezado de la página de registro (" HTTP / 1.1 301 Moved Permanently "); header (" Ubicación: ". $ Address_site." / Form_register.php "); // Detener el script exit (); )) else (// Guarde el mensaje de error en la sesión. $ _SESSION ["error_messages"]. = "

Falta el campo de correo electrónico

"; // Devolver al usuario al encabezado de la página de autorización (" HTTP / 1.1 301 Moved Permanently "); header (" Ubicación: ". $ Address_site." / Form_auth.php "); // Detener el script exit (); ) // (3) Espacio para procesar la contraseña

Si el usuario ingresó una dirección postal en un formato incorrecto o el valor del campo de dirección postal está vacío, lo devolvemos a la página de autorización donde mostramos un mensaje al respecto.

Confirmacion de contraseña

El siguiente campo que se procesará es el campo de contraseña. A la ubicación especificada " // (3) Lugar para procesar la contraseña", nosotros escribimos:

If (isset ($ _ POST ["contraseña"])) (// Recorta los espacios desde el principio y el final de la cadena $ contraseña = trim ($ _ POST ["contraseña"]); if (! Empty ($ contraseña )) ($ contraseña = htmlspecialchars ($ contraseña, ENT_QUOTES); // Cifre la contraseña $ contraseña = md5 ($ contraseña. "top_secret");) else (// Guarde el mensaje de error en la sesión. $ _SESSION ["error_messages "]. ="

Ingresa tu contraseña

"; // Devolver al usuario al encabezado de la página de registro (" HTTP / 1.1 301 Moved Permanently "); header (" Ubicación: ". $ Address_site." / Form_auth.php "); // Detener el script exit (); )) else (// Guarde el mensaje de error en la sesión. $ _SESSION ["error_messages"]. = "

No hay ningún campo para ingresar una contraseña

"; // Devolver al usuario al encabezado de la página de registro (" HTTP / 1.1 301 Moved Permanently "); header (" Ubicación: ". $ Address_site." / Form_auth.php "); // Detener el script exit (); )

Aquí, usando la función md5 (), encriptamos la contraseña recibida, ya que las contraseñas están en forma encriptada en la base de datos. Una palabra secreta adicional en cifrado, en nuestro caso " ultra secreto"debe ser el que se utilizó al registrar al usuario.

Ahora necesita realizar una consulta a la base de datos en una muestra de un usuario cuya dirección de correo es igual a la dirección de correo recibida y la contraseña es igual a la contraseña recibida.

// Consulta en la base de datos sobre la selección del usuario. $ result_query_select = $ mysqli-> query ("SELECT * FROM` users` WHERE email =" ". $ email." "AND contraseña =" ". $ contraseña." ""); if (! $ result_query_select) (// Guarde el mensaje de error en la sesión. $ _SESSION ["error_messages"]. = "

Solicitar error al recuperar el usuario de la base de datos

"; // Devolver al usuario al encabezado de la página de registro (" HTTP / 1.1 301 Moved Permanently "); header (" Ubicación: ". $ Address_site." / Form_auth.php "); // Detener el script exit (); ) else (// Verificamos si no hay ningún usuario con tales datos en la base de datos, luego mostramos un mensaje de error if ($ result_query_select-> num_rows == 1) (// Si los datos ingresados ​​coinciden con los datos de la base de datos, luego guardamos el nombre de usuario y la contraseña en la matriz de sesión. $ _SESSION ["email"] = $ email; $ _SESSION ["contraseña"] = $ contraseña; // Devuelve al usuario al encabezado de la página principal ("HTTP / 1.1 301 Moved Permanently "); header (" Ubicación: ". $ Address_site." / Index.php ");) else (// Guarde el mensaje de error en la sesión. $ _SESSION [" error_messages "]. ="

Nombre de usuario y / o contraseña incorrectos

"; // Devolver al usuario al encabezado de la página de autorización (" HTTP / 1.1 301 Moved Permanently "); header (" Ubicación: ". $ Address_site." / Form_auth.php "); // Detener el script exit (); ))

Cerrar sesión en el sitio

Y lo ultimo que hacemos es procedimiento para salir del sitio... Por el momento, en el encabezado, mostramos enlaces a la página de autorización y a la página de registro.

En el encabezado del sitio (archivo header.php), utilizando la sesión comprobamos si el usuario ya está conectado. De lo contrario, mostramos los enlaces de registro y autorización; de lo contrario (si está autorizado), en lugar de los enlaces de registro y autorización mostramos el enlace Producción.

Pieza de código modificada del archivo header.php:

registro

Producción

Cuando hace clic en el enlace de salida del sitio, llegamos al archivo logout.php, donde simplemente destruimos las celdas con la dirección de correo y la contraseña de la sesión. Después de eso, devolvemos al usuario a la página en la que se hizo clic en el enlace. producción.

Código de archivo logout.php:

Eso es todo. Ahora sabes como Implementar y procesar formularios de registro y autorización. usuario en su sitio. Estos formularios se encuentran en casi todos los sitios, por lo que todo programador debe saber cómo crearlos.

También aprendimos cómo validar los datos de entrada, tanto en el lado del cliente (en el navegador, usando JavaScript, jQuery) como en el lado del servidor (usando el lenguaje PHP). También aprendimos implementar el procedimiento para salir del sitio.

Todos los scripts se prueban y funcionan. Puede descargar el archivo con los archivos de este pequeño sitio en este enlace.

En el futuro escribiré un artículo donde describiré. Y también planeo escribir un artículo donde lo explicaré (sin recargar la página). Entonces, para estar al tanto del lanzamiento de nuevos artículos, puede suscribirse a mi sitio.

Si tiene alguna pregunta, por favor, también, si nota algún error en el artículo, hágamelo saber.

Plan de lección (Parte 5):

1. Cree una estructura HTML para el formulario de inicio de sesión
2. Procesamos los datos recibidos
3. Mostramos el saludo del usuario en el encabezado del sitio.

¿Te gustó el artículo?

Si necesita que una de las secciones de su sitio esté disponible para un círculo de personas limitado pero indefinido, la forma más fácil de hacerlo es registrando y autorizando a los usuarios. Hay muchas formas de autorizar a los usuarios. Se pueden utilizar tanto herramientas de servidor web como herramientas de lenguaje de programación. Hablaremos del caso en el que se utilizan sesiones de PHP.

Probablemente le gustaría ver una forma más moderna de crear tal forma. Todavía tengo una presentación completa, moderna y actualizada, pero puede ver que el formulario de comentarios se puede construir utilizando técnicas orientadas a objetos en PHP.

Primero, analicemos todos los pasos que daremos a continuación. ¿Qué necesitamos siquiera? Necesitamos un script que registre a un usuario, autorice a un usuario, redirija al usuario a algún lugar después de la autorización. También necesitaremos crear una página que estará protegida contra el acceso de usuarios no autorizados. Para el registro y la autorización, necesitaremos crear formularios HTML. Almacenaremos información sobre los usuarios registrados en una base de datos. Esto significa que todavía necesitamos un script para conectarnos al DBMS. Todo nuestro trabajo será realizado por funciones que nosotros mismos escribiremos. Guardaremos estas funciones en un archivo separado.

Entonces, necesitamos los siguientes archivos:

• conexión con DBMS;
• funciones personalizadas;
• autorización;
• registro;
• página protegida;
• script de cierre del usuario;
• un script que verifica el estado de autorización del usuario;
• hoja de estilo para el diseño más simple de nuestras páginas.

Todo esto será inútil si no tiene una tabla correspondiente en su base de datos. Inicie su herramienta de administración DBMS (PhpMyAdmin o línea de comando, lo que sea más conveniente) y ejecute la siguiente consulta en ella:

CREATE TABLE `users` (` id` int (11) NOT NULL AUTO_INCREMENT, `login` char (16) NOT NULL,` password` char (40) NOT NULL, `reg_date` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (` id`)) ENGINE = MyISAM DEFAULT CHARSET = utf8 AUTO_INCREMENT = 1;

Nombraré nuestros archivos de script así (todos estarán en el mismo directorio):

• database.php;
• functions.php;
• login.php;
• registration.php;
• index.php;
• logout.php;
• checkAuth.php;
• style.css.

Estoy seguro de que el propósito de cada uno de ellos está claro para ustedes. Comencemos con el script de conexión DBMS. Lo has visto antes. Simplemente guarde el código para este script en un archivo llamado database.php. Declararemos funciones personalizadas en el archivo functions.php. ¿Cómo funcionará todo esto? Un usuario no autorizado intenta acceder al documento protegido index.php, el sistema verifica si el usuario está autorizado, si el usuario no está autorizado, se le redirige a la página de autorización. En la página de autorización, el usuario debería ver un formulario de autorización. Vamos a hacerlo.

Su nombre de usuario:

Tu contraseña:

Registrarse.

Ahora tenemos que darle a nuestra forma un cierto aspecto. Al mismo tiempo, definiremos las reglas para otros elementos. Les voy a dar el contenido completo de la hoja de estilo, mirando hacia el futuro.

/ * archivo style.css * / .row (margin-bottom: 10px; width: 220px;) .row label (display: block; font-weight: bold;) .row input.text (font-size: 1.2em; padding: 2px 5px;) .to_reg (tamaño de fuente: 0.9em;). instrucción (tamaño de fuente: 0.8em; color: #aaaaaa; margin-left: 2px; cursor: predeterminado;) .error (color: red; margen izquierdo: 3px;)

Si todo se hace correctamente, debería tener lo siguiente en su navegador:

Por supuesto, todavía no tenemos un solo usuario registrado, y para iniciar sesión, debe registrarse. Hagamos un formulario de registro.

Ingrese su nombre de usuario: " />

Escriba su contraseña:

Repita la contraseña ingresada:

Probablemente haya notado que hay variables PHP en el código HTML. Son el contenido de los atributos de los campos de texto de los formularios, el contenido de los contenedores destinados a mostrar errores. Pero no hemos inicializado estas variables. Vamos a hacer eso.

Ingrese su nombre de usuario: " />

El nombre de usuario solo puede contener caracteres latinos, números, símbolos "_", "-", ".". El nombre de usuario debe tener al menos 4 caracteres y no más de 16 caracteres

Escriba su contraseña:

En la contraseña, puede usar solo caracteres latinos, números, símbolos "_", "!", "(", ")". La contraseña debe tener al menos 6 caracteres y no más de 16 caracteres

Repita la contraseña ingresada:

Repita la contraseña ingresada previamente

No hay ningún parámetro especificado en el atributo de acción de la etiqueta de formulario. En este caso, cuando se envíen los datos del formulario, se procesarán en el mismo script desde el que se enviaron. Entonces necesitamos escribir el código que procesa los datos del formulario. Pero primero analicemos el algoritmo para su procesamiento.

Necesitamos que los campos de inicio de sesión y contraseña no estén vacíos. Luego, debe verificar que el inicio de sesión cumpla con los requisitos. La contraseña también debe cumplir con los requisitos descritos, y la contraseña repetida debe coincidir y, además, deben ser idénticas. Si no se cumple alguna de estas condiciones, se debe detener el procesamiento de los datos del formulario, se debe escribir la notificación correspondiente en la matriz de mensajes de error y se debe mostrar al usuario. Para la conveniencia del usuario, guardaremos el login ingresado por él (si él lo especificó), escribiendo su valor en la matriz $ fields.

Si todo está bien, en la ventana de su navegador, refiriéndose al documento registration.php, debería ver algo como esto:

Ahora, digamos que el usuario hace clic en el botón de registro sin completar los campos del formulario. Según nuestro algoritmo, el nombre de usuario y la contraseña no pueden estar vacíos. Si no se cumple esta condición, el registro no es posible. Tenemos en cuenta que el procesamiento de los datos del formulario se realiza en el script actual. Por lo tanto, debemos cambiar su código agregando las comprobaciones adecuadas. De inmediato estipularemos las siguientes comprobaciones. Si se ingresan tanto el nombre de usuario como la contraseña, debe verificar que cumplan con los requisitos especificados. Para verificar el nombre de usuario y la contraseña, crearemos funciones personalizadas en el archivo functions.php.

/ ** * functions.php * Archivo con funciones personalizadas * / // Incluir un archivo con parámetros para conectarse al DBMS require_once ("database.php"); // Comprobando la función de nombre de usuario checkLogin ($ str) (// Inicializa la variable con un posible mensaje de error $ error = ""; // Si no hay una cadena de inicio de sesión, devuelve un mensaje de error if (! $ Str) ($ error = "No ingresó un nombre de usuario"; return $ error;) / ** * Verifique el nombre de usuario usando expresiones regulares * El inicio de sesión debe tener al menos 4, no más de 16 caracteres * Debe contener caracteres latinos, números, * puede ser símbolos "_", "-", "." * / $ patrón = "/ ^ [-_. az \ d] (4,16) $ / i"; $ resultado = preg_match ($ patrón, $ str) ; // Si la verificación falla, devuelve un mensaje de error si (! $ Result) ($ error = "Caracteres no válidos en el nombre de usuario o el nombre de usuario es demasiado corto (largo)"; return $ error;) // Si todo está bien , return true return true;) // Verifica la función de contraseña del usuario checkPassword ($ str) (// Inicializa la variable con un posible mensaje de error $ error = ""; // Si no hay aparece una cadena con un inicio de sesión, devuelve un mensaje de error si (! $ str) ($ error = "No ingresó una contraseña"; return $ error; ) / ** * Verifique la contraseña del usuario usando expresiones regulares * La contraseña no debe tener menos de 6, ni más de 16 caracteres * Debe contener caracteres latinos, números, * puede contener símbolos "_", "!", "( ",") "* / $ patrón =" / ^ [_!) (. az \ d "(6,16) $ / i"; $ resultado = preg_match ($ patrón, $ str); // Si el cheque falló, devuelve un mensaje de error si (! $ resultado) ($ error = "Caracteres no válidos en la contraseña del usuario o la contraseña es demasiado corta (larga)"; devuelve $ error;) // Si todo está bien, devuelve verdadero devuelve verdadero ;)

Ahora necesitamos modificar el archivo registration.php para usar las funciones que hemos declarado. Agregaremos una condición al script para verificar que se haga clic en el botón de registro. Dentro de esta condición, se inicia una verificación de inicio de sesión y contraseña. Si alguna de las comprobaciones falla, volvemos a renderizar el formulario y mostramos un mensaje de error. Si no hay errores, registramos al usuario, ya no mostramos el formulario de registro, informamos al usuario sobre el registro exitoso y, utilizando la función header (), lo redireccionamos al formulario de autorización.

Te has registrado con éxito en el sistema. Ahora será redirigido a la página de inicio de sesión. Si esto no sucedió, acceda a él mediante un enlace directo.

"; header (" Refresh: 5; URL = login.php ");) // De lo contrario, informe al usuario sobre el error else ($ errors [" full_error "] = $ reg;)))?>

Ingrese su nombre de usuario: " />

El nombre de usuario solo puede contener caracteres latinos, números, símbolos "_", "-", ".". El nombre de usuario debe tener al menos 4 caracteres y no más de 16 caracteres

Escriba su contraseña:

En la contraseña, puede usar solo caracteres latinos, números, símbolos "_", "!", "(", ")". La contraseña debe tener al menos 6 caracteres y no más de 16 caracteres

Repita la contraseña ingresada:

Repita la contraseña ingresada previamente

Debería haber notado otra función nueva en el script: registro (). Y aún no lo hemos anunciado. Vamos a hacer eso.

// Función de registro de usuario registro de función ($ inicio de sesión, $ contraseña) (// Inicializar una variable con un posible mensaje de error $ error = ""; // Si no hay una cadena de inicio de sesión, devolver un mensaje de error si (! $ Iniciar sesión) ($ error = "Inicio de sesión no especificado"; return $ error;) elseif (! $ contraseña) ($ error = "Contraseña no especificada"; return $ error;) // Compruebe si el usuario ya está registrado // Conéctese al DBMS connect (); // Escribe una cadena de consulta $ sql = "SELECT` id` FROM` users` WHERE` login` = "". $ Login. "" "; // Haz una consulta a la base de datos $ query = mysql_query ($ sql) or die (""); // Mira el número de usuarios con este inicio de sesión, si hay al menos uno, // devuelve un mensaje de error if (mysql_num_rows ($ query)> 0) ($ error = "El usuario con el inicio de sesión especificado ya está registrado"; return $ error;) // Si no existe tal usuario, regístrelo // Escriba una cadena de consulta $ sql = "INSERT INTO` users` (` id`, `login `,` contraseña`) VALORES (NULL, "". $ login. " "," ". $ contraseña. "") "; // Realizar una consulta a la base de datos $ query = mysql_query ($ sql) o morir ("

No se puede agregar el usuario: ". Mysql_error ().". Se produjo un error en la línea ". __LINE__".

"); // No te olvides de desconectarte del DBMS mysql_close (); // Devuelve verdadero, indicando que el usuario se registró exitosamente return true;)

Si todo está bien, su usuario quedará registrado. Puede probar el formulario. Intente registrar usuarios con los mismos inicios de sesión. Después del registro exitoso, el usuario será redirigido al formulario de autorización. Anteriormente, acabamos de crear el marcado para mostrar este formulario. Dado que no hay ningún parámetro especificado en su atributo de acción, los datos enviados por el formulario se procesarán en el mismo script. Por lo tanto, debemos escribir el código para procesarlo y agregarlo al documento login.php.

Su nombre de usuario:

Tu contraseña:

Si no está registrado en el sistema, regístrese.

Probablemente haya notado que en el script de autorización tenemos otra función desconocida: autorización (). Esta función debe autorizar al usuario comprobando primero si hay un usuario registrado en la base de datos con el mismo nombre de usuario y contraseña. Si no se encuentra dicho usuario, la autorización se interrumpirá y se mostrará un mensaje de error en la pantalla. Si la verificación es exitosa, la función de autorización () iniciará una sesión y le escribirá los valores de nombre de usuario y contraseña, informará al script sobre el éxito de la autorización y el script redirigirá al usuario a la página de recursos protegidos.

/ ** * Función de autorización de usuario. * La autorización de los usuarios con nosotros se realizará * mediante sesiones PHP. * / autorización de función ($ inicio de sesión, $ contraseña) (// Inicializar una variable con un posible mensaje de error $ error = ""; // Si no hay una línea de inicio de sesión, devolver un mensaje de error si (! $ inicio de sesión) ($ error = "Inicio de sesión no especificado"; devuelve $ error;) elseif (! $ Contraseña) ($ error = "Contraseña no especificada"; devuelve $ error;) // Verifica si el usuario ya está registrado // Conéctate al DBMS connect ( ); // Necesitamos verificar si hay un usuario entre los registrados // Redactar una cadena de consulta $ sql = "SELECT` id` FROM` users` WHERE` login` = "". $ Login. "" AND ` password` = "". $ Password. "" "; // Ejecute la consulta $ query = mysql_query ($ sql) o muera ("

No se puede ejecutar la consulta: ". Mysql_error ().". Se produjo un error en la línea ". __LINE__".

"); // Si no hay ningún usuario con dichos datos, devuelve un mensaje de error if (mysql_num_rows ($ consulta) == 0) ($ error =" El usuario con los datos especificados no está registrado "; devuelve $ error;) // Si el usuario existe, inicie la sesión session_start (); // Y escriba el nombre de usuario y la contraseña en él // Para esto usamos la matriz superglobal $ _SESSION $ _SESSION ["login"] = $ login; $ _SESSION [" contraseña "] = $ contraseña; / / No olvide cerrar la conexión de la base de datos mysql_close (); // Devolver verdadero para el mensaje sobre la autorización exitosa del usuario return verdadero;)

Cuando un usuario ingresa a una página protegida, debe verificar la exactitud de sus datos de autorización. Para ello, necesitamos una función personalizada más. Llamémoslo checkAuth (). Su tarea será conciliar los datos de autorización del usuario con los que se encuentran almacenados en nuestra base de datos. Si los datos no coinciden, el usuario será redirigido a la página de autorización.

Función checkAuth ($ inicio de sesión, $ contraseña) (// Si no hay inicio de sesión o contraseña, devuelva falso si (! $ Inicio de sesión ||! $ Contraseña) devuelva falso; // Compruebe si dicho usuario está registrado // Conéctese al DBMS connect (); // Crear una cadena de consulta $ sql = "SELECT` id` FROM` users` WHERE` login` = "". $ Login. "" AND `password` =" ". $ Password." "" ; // Ejecuta la consulta $ query = mysql_query ($ sql) o muere ("

No se puede ejecutar la consulta: ". Mysql_error ().". Se produjo un error en la línea ". __LINE__".

"); // Si no hay ningún usuario con esos datos, devuelve falso; if (mysql_num_rows ($ consulta) == 0) (devuelve falso;) // No olvide cerrar la conexión a la base de datos mysql_close (); // De lo contrario , devuelve verdadero devuelve verdadero;)

Ahora que el usuario está en la página segura, debemos llamar a la función para verificar los datos de autorización. Colocaremos la llamada y el script de verificación en un archivo checkAuth.php separado y lo conectaremos a las páginas que se cerrarán para el acceso público.

/ ** * Script para verificar la autorización del usuario * / // Iniciar una sesión, de la cual extraeremos el nombre de usuario y la contraseña // de los usuarios registrados session_start (); // Incluir un archivo con funciones personalizadas require_once ("functions.php"); / ** * Para determinar si un usuario está conectado, necesitamos * verificar si hay registros en la base de datos para su nombre de usuario * y contraseña. Para hacer esto, usaremos la función personalizada * para verificar la exactitud de los datos de usuario registrados. * Si esta función devuelve falso, entonces no hay autorización. * En ausencia de autorización, simplemente redirigimos * al usuario a la página de autorización. * / // Si la sesión contiene datos de inicio de sesión y contraseña, // márquelos si (isset ($ _ SESSION ["inicio de sesión"]) && $ _SESSION ["inicio de sesión"] && isset ($ _ SESSION ["contraseña"] ) && $ _SESSION ["contraseña"]) (// Si falla la validación de los datos existentes if (! CheckAuth ($ _ SESSION ["login"], $ _SESSION ["contraseña"])) (// Redirigir al usuario al encabezado de la página de autorización ("location: login.php"); // Detener la ejecución del script exit;)) // Si no hay datos sobre el inicio de sesión o la contraseña del usuario, // considere que no hay autorización, redirija el usuario // a la página de autorización else (header ("location: login.php"); // Abortar la salida del script;)

Ahora creemos el código para nuestra página segura. Será bastante sencillo.

Autorización exitosa.

Ha accedido a una página segura. Puede cerrar la sesión del sistema.

Como puede ver, solo incluimos un archivo en el documento seguro: checkAuth.php. Todos los demás archivos se incluyen en otros scripts. Por lo tanto, nuestro código no parece engorroso. Organizamos el registro y autorización de usuarios. Ahora debe permitir que los usuarios cierren la sesión. Para hacer esto, crearemos un script en el archivo logout.php.

/ ** * Script de cierre de sesión del usuario. Dado que los usuarios están * autorizados a través de sesiones, su nombre de usuario y contraseña se almacenan * en la matriz supergloban $ _SESSION. Para cerrar la sesión *, simplemente destruya los valores * de la matriz $ _SESSION ["login"] y $ _SESSION ["contraseña"], después * de lo cual redirigimos al usuario a la página de autorización * / // Asegúrese de comenzar la sesión session_start (); unset ($ _ SESSION ["iniciar sesión"]); unset ($ _ SESSION ["contraseña"]); encabezado ("ubicación: login.php");

El script para el registro, la autorización y la verificación del usuario está listo. Puedes usarlo en casa, complementarlo, cambiarlo para que se adapte a tus necesidades. Si tiene alguna pregunta, puede hacerla en los comentarios. Puede descargar usted mismo todos los archivos mencionados aquí, empaquetados en un solo archivo.

PD Soy consciente de que es mejor escribir código orientado a objetos, sé que no vale la pena transmitir y almacenar la contraseña en texto claro, que la información ingresada en la base de datos debe ser verificada de antemano. Sé. No hablaré de esto aquí.

Todo sucede bajo el control de PHP y los datos se almacenan en una base de datos MySQL.

El sistema utiliza un excelente panel deslizable desarrollado por Web-kreation.

Paso 1 - MySQL

Primero, necesitamos crear una tabla que contendrá todos los datos sobre los usuarios registrados. El código de solicitud está disponible en el archivo table.sql en el archivo de origen.

table.sql

--
- La estructura de la tabla `tz_members`
--
CREAR TABLA `tz_members` (
`id` int (11) NOT NULL auto_increment,
`usr` varchar (32) collate utf8_unicode_ci NOT NULL predeterminado" ",
`pass` varchar (32) collate utf8_unicode_ci NOT NULL predeterminado" ",
`email` varchar (255) collate utf8_unicode_ci NOT NULL predeterminado" ",
`regIP` varchar (15) collate utf8_unicode_ci NOT NULL predeterminado" ",
`dt` datetime NOT NULL predeterminado" 0000-00-00 00:00:00 ",
CLAVE PRIMARIA (`id`),
CLAVE ÚNICA `usr` (` usr`)
) MOTOR = MyISAM DEFAULT CHARSET = utf8 COLLATE = utf8_unicode_ci;

Definimos id como un número entero con una opción autoincremento- se asignará automáticamente para cada nuevo usuario registrado. También usr definido como llave unica- la tabla no permite la existencia de dos registros con el mismo nombre de usuario.

Posteriormente, usaremos las propiedades especificadas durante el proceso de registro cuando se ingrese el nombre de usuario.

Después de crear la tabla, debe completar las variables para conectarse a su base de datos en el archivo connect.php para que el código pueda ejecutarse en su servidor.

Paso 2: XHTML

Primero, necesitamos incrustar el formulario de creación web en nuestra página.

demo.php

Hay declaraciones de PHP en varios lugares del código que comprueban si $ _SESSION ["usr"] o $ _SESSION ["id"]... Solo son verdaderas si el visitante de la página es un usuario registrado, lo que nos permite mostrar contenido oculto a los visitantes registrados.

Después del formulario, colocamos el resto del contenido de la página.