Tutorial de autenticación de React & Axios JWT con PHP & MySQL Server: registro, inicio de sesión y cierre de sesión

 En este tutorial, aprenderemos cómo usar React para construir un sistema de inicio de sesión, registro y cierre de sesión y Axios para enviar llamadas a API y manejar tokens JWT.

Para crear la aplicación PHP que implementa la API REST protegida por JWT, consulte el Tutorial de autenticación PHP JWT .

Usaremos la misma aplicación construida en el tutorial anterior como backend para nuestra aplicación React que crearemos en este tutorial.

Prerrequisitos

Deberá tener los siguientes requisitos previos para seguir este tutorial paso a paso:

• Conocimiento de JavaScript,
• Conocimiento de React,
• Conocimiento de PHP,
• PHP, Composer y MySQL instalados en su máquina de desarrollo,
• Node.js y NPM instalados en su sistema.

Eso es. ¡Empecemos!

Clonación de la aplicación PHP JWT

Nuestra aplicación de ejemplo implementa la autenticación JWT. Expone tres puntos finales

• api/login.php
• api/register.php
• api/protected.php

Cómo ejecutar la aplicación PHP

Primero clona el repositorio de GitHub:

$ git clone https://github.com/techiediaries/php-jwt-authentication-example.git

A continuación, navegue dentro de la carpeta del proyecto y ejecute los siguientes comandos para instalar las dependencias de PHP e iniciar el servidor de desarrollo:

$ cd php-jwt-authentication-example
$ composer install
$ php -S 127.0.0.1:8000

Habilitando CORS

Dado que usaremos dos aplicaciones frontend y backend: el servidor de desarrollo React / Webpack y el servidor PHP que se ejecutan desde dos puertos diferentes en nuestra máquina local (considerados como dos dominios diferentes), necesitaremos habilitar CORS en nuestra aplicación PHP.

Abra los archivos api/register.php, api/login.phpy api/protected.phpy agregue el siguiente encabezado CORS para permitir que cualquier dominio envíe solicitudes HTTP a estos puntos finales:

<?php
header("Access-Control-Allow-Origin: *");
>

Instalando create-react-app

Comencemos instalando la create-react-appherramienta que se utilizará para crear el proyecto React. Abra una nueva terminal y ejecute el siguiente comando:

$ npm install -g create-react-app

create-react-app es la herramienta oficial creada por el equipo de React para comenzar rápidamente a desarrollar aplicaciones React.

Crear un proyecto de React

Generemos ahora nuestro proyecto React. En su terminal, ejecute el siguiente comando:

$ create-react-app php-react-jwt-app

Esto generará un proyecto React con una estructura de directorio mínima.

Instalación de Axios y consumo de la API REST de JWT

Usaremos JWT para enviar solicitudes HTTP a nuestra API REST PHP JWT, por lo que primero tendremos que instalarlo. Regrese a su terminal y ejecute los siguientes comandos para instalar Axios desde npm:

$ cd php-react-jwt-app
$ npm install axios --save

Al momento de escribir estas axios líneas , esto instalará v0.18.0 .

A continuación, creemos un componente que encapsule el código para comunicarse con la API REST de JWT. En la src/carpeta, cree una utilscarpeta y luego cree un JWTAuth.jsarchivo dentro de ella:

$ mkdir utils
$ touch JWTAuth.js

Abra el src/utils/JWTAuth.jsarchivo y agregue el siguiente código:

import axios from 'axios';
const SERVER_URL = "http://127.0.0.1:8000";

Importamos axios y definimos la SERVER_URLvariable que contiene la URL del servidor de autenticación JWT.

A continuación, defina el login()método que se utilizará para iniciar la sesión de los usuarios:

const login = async (data) => {
    const LOGIN_ENDPOINT = `${SERVER_URL}/api/login.php`;

    try {

        let response = await axios.post(LOGIN_ENDPOINT, data);

        if(response.status === 200 && response.data.jwt && response.data.expireAt){
            let jwt = response.data.jwt;
            let expire_at = response.data.expireAt;

            localStorage.setItem("access_token", jwt);
            localStorage.setItem("expire_at", expire_at);

        }


    } catch(e){
        console.log(e);
    }
}

Primero, construimos el punto final concatenando la URL del servidor con la /api/login.phpruta.

A continuación, enviamos una solicitud POST al punto final de inicio de sesión con los datos pasados ​​como parámetro al login()método.

A continuación, si la respuesta es correcta, almacenamos el token JWT y la fecha de vencimiento en el almacenamiento local.

Nota : Dado que Axios, devuelve una promesa, usamos la async/awaitsintaxis para que nuestro código parezca sincrónico.

A continuación, defina el register()método que crea un nuevo usuario en la base de datos:

const register = async (data) => {
    const SIGNUP_ENDPOINT = `${SERVER_URL}/api/register.php`;
    try {
        let response = await axios({
            method: 'post',
            responseType: 'json',
            url: SIGNUP_ENDPOINT,
            data: data
          });
    } catch(e){
        console.log(e);
    }
}

Primero construimos el punto final concatenando la URL del servidor con la /api/register.phpruta. Luego, usamos Axios para enviar una solicitud POST al punto final del registro con los datos pasados ​​como parámetro al método.

Nota : Usamos la sintaxis async / await para evitar trabajar con Promises.

Finalmente, definamos el logout()método que simplemente elimina el token de acceso JWT y la fecha de vencimiento del almacenamiento local:

const logout = () => {
    localStorage.removeItem("access_token");
    localStorage.removeItem("expire_at");
}

Usamos el removeItem()método de localStoragepara eliminar las teclas access_tokeny expire_at.

Ahora, necesitamos exportar estos métodos para que puedan importarse de los otros componentes de React:

export { login, register, logout } 

Llamar a los métodos JWTAuth en el componente React

Ahora asegurémonos de que nuestro sistema de inicio de sesión funcione como se esperaba. Abra el src/App.jsarchivo e importe los métodos login(), register()y logout()del src/utils/JWTAuth.jsarchivo:

import { login, register, logout } from "./utils/JWTAuth.js";

A continuación, defina un login()método en el Appcomponente de la siguiente manera:

class App extends Component {

  async login(){
    let info = {
      email: "kaima.abbes@email.com",
      password: "123456789"
    };

    await login(info);

  }

Este método simplemente llama al login()método de JWTAuth.jscon información de usuario codificada para iniciar sesión.

A continuación, defina el register()método de la siguiente manera:

  async register(){
    let info = {
      first_name: "kaima",
      last_name: "Abbes",
      email: "kaima.abbes@email.com",
      password: "123456789"
    };

    await register(info); 
  }

Nota : No necesitamos ajustar el logout()método ya que no tenemos que pasar ningún parámetro al método.

Finalmente, actualice el render()método para crear los botones para iniciar sesión, registrarse y cerrar sesión:

  render() {

    return (
      <div className="container">
      <div className="row">
        <h1>React JWT Authentication Example</h1>

        <button className="btn btn-primary" onClick = { this.register }>Sign up</button>

        <button className="btn btn-primary" onClick = { this.login }>Log in</button>

        <button className="btn btn-primary" onClick = { logout }>Log out</button>

      </div>
      </div>
    );
  }

Debería poder utilizar estos botones para probar los métodos register(), login()y logout().

Nota : Usamos Bootstrap para diseñar la interfaz de usuario.

En el siguiente tutorial, crearemos el inicio de sesión real y registraremos las IU con formularios para obtener la información del usuario y enviarla al servidor de autenticación PHP JWT.

Conclusión

En este tutorial, hemos visto cómo implementar la autenticación JWT en React con Axios, PHP y MySQL