Header Ads Widget

Ticker

6/recent/ticker-posts

Formulario De Registro De Usuario Con PHP, MySQL Y Google ReCAPTCHA

 Anteriormente, compartí un tutorial sobre el sistema de inicio de sesión PHP simple usando MySQL y jQuery AJAX . Este tutorial es la segunda parte del módulo de usuario para crear un registro de usuario usando php y MySQL con captcha de Google. Estoy usando Bootstrap para crear el formulario de registro y el complemento de validación jQuery para la validación del formulario. Haremos la validación de captcha de PHP de Google desde el lado del servidor.

usuario-registro-captcha

Puede consultar otro tutorial recomendado del módulo de usuario en PHP,


Usaré los siguientes archivos para este tutorial de registro de usuario,

  • index.php : Este archivo es el archivo de entrada principal de la aplicación de gestión de usuarios.
  • response.php : Este archivo contendrá el método de registro del usuario.
  • partials/: Esta carpeta tendrá como archivo parcial header.phpfooter.phparchivo.
  • connect/db_cls_connect.php : Esta carpeta contendrá el archivo de conexión a la base de datos MySQL.
  • libs/ : Esta carpeta tendrá todos los archivos de dependencias.

Necesitamos crear los archivos anteriores y la estructura de 'php_ajax_registraion_with_php_jquery'carpetas en la carpeta.

¿Qué Es Captcha?

CAPTCHA significa "Prueba de Turing pública completamente automatizada para diferenciar a las computadoras de los humanos" , es una funcionalidad muy común que se utiliza al momento de enviar datos para evitar que las máquinas accedan a su sitio web.

Crear Tabla De Registro Y Conexión A La Base De Datos MySQL

Crearemos una 'test'base de datos en el servidor MySQL y crearemos una 'tbl_users'tabla en esta base de datos usando el siguiente script SQL,

db_cls_connect.phpCreemos un archivo en la carpeta de conexión si aún no lo ha creado, agregaremos a continuación la información de conexión de MySQL a php de conexión con MySQL.

Como puede ver, he pasado por debajo de los parámetros de la base de datos MySQL.

  • $servername : Host del servidor MySQL // localhost
  • $username : Nombre de usuario de la base de datos MySQL // root
  • $password : Paso de base de datos MySQL
  • $dbname : Nombre de la base de datos MySQL // prueba

Cómo Utilizar Google ReCAPTCHA

Es muy fácil de usar e integrar con cualquier aplicación. Google proporciona documentos bien definidos para cada aplicación del lado del servidor. Estoy usando el lenguaje PHP. Así que usaré el proceso php para integrar google reCaptcha. Puede descargar desde PHP google reCaptcha Lib .

Registrar Nombre De Host Con Google ReCAPTCHA

Estamos creando un formulario de registro de usuario con funcionalidad captcha. Puede usar o crear captcha personalizado, así como un script CAPTCHA simple usando PHP . Para utilizar Google reCAPTCHA, debe registrar el nombre de host del sitio web con Google reCAPTCHA .

Google proporciona la clave del sitio y la clave secreta contra el dominio / sitio web registrado. Utilizará la clave del sitio y la clave secreta en su formulario de registro para validar el formulario de captcha. También hay un jsarchivo que debe incluir en el encabezado de su solicitud.

Cómo Mostrar Google ReCAPTCHA En Formato HTML

Vamos a pasar class namedata-sitekeyatributo de sitio con código de imagen en el contenedor HTML, el recipiente puede ser HTML divli spanetc.

Registro De Usuario De PHP Con MySQL Y Google ReCAPTCHA

Creemos un formulario de registro de usuario usando bootstrap 3 y agreguemos algo de código jquery para enviar el formulario HTML usando ajax. El jQuery ajax envió los valores del formulario en el lado del servidor usando php.

Realizaremos la validación de captcha de Google aquí y enviaremos un mensaje de excepción si la validación falló. Después de validar con éxito los valores del formulario, guardaremos la información del usuario en una tabla HTML.

Paso 1: Supongo que ya ha agregado los archivos bootstrap y jQuery lib en el index.phparchivo, si no agregó, sí, agregue en la sección principal del index.phparchivo; de lo contrario, agregue solo el archivo captcha js de google.

Paso 2: Cree la vista html de registro de usuario utilizando bootstrap 3 y agregue el código HTML a continuación en el register.phparchivo.

He definido un div ( #error) que se utilizará para mostrar el mensaje de error y '#success'div para mostrar el mensaje de éxito. Usaré el formulario id ( #register-form) para validar los campos de entrada y la identificación del botón para mostrar el proceso de inicio de sesión
al final del formulario, he agregado div para mostrar google reCaptcha usando el data-sitekeyatributo.

Paso 3: Cree el método de registro de envío en el common.jsarchivo.

registerForm()El método se usará en el siguiente paso para validar el formulario usando la validación de jQuery, se pasó la URL AJAX 'response.php?action=register', por lo que necesito crear un método en el response.phparchivo para manejar la solicitud de registro de usuario y enviar la respuesta.

Paso 4: Usaremos el código de validación del formulario jquery en el common.jsarchivo. Agregaremos el siguiente código en este archivo.

Definí roles para cada campo de entrada y pasé un mensaje de validación fallida, ya que estoy usando jQuery, por lo que todo el proceso de validación se maneja por el lado del cliente. He pasado el registerFormmétodo para submitHandlervalidar una vez con éxito todos los campos del formulario de registro.

Paso 5: método de registro creado en el response.phparchivo.

Hemos agregado php google recaptcha en el response.phparchivo para acceder a los métodos de reCaptcha. Primero obtendremos todos los datos publicados del lado del cliente y los pasaremos al método de registro. Verificaremos el valor vacío y validaremos google recaptcha, después de una validación exitosa, estamos guardando la información del usuario en MySQL tabla de usuario.

Puede descargar el código fuente y ver la demostración desde el siguiente enlace.

Publicar un comentario

0 Comentarios