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.php
y api/protected.php
y 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-app
herramienta 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 utils
carpeta y luego cree un JWTAuth.js
archivo dentro de ella:
$ mkdir utils
$ touch JWTAuth.js
Abra el src/utils/JWTAuth.js
archivo 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_URL
variable 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.php
ruta.
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/await
sintaxis 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.php
ruta. 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 localStorage
para eliminar las teclas access_token
y 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.js
archivo e importe los métodos login()
, register()
y logout()
del src/utils/JWTAuth.js
archivo:
import { login, register, logout } from "./utils/JWTAuth.js";
A continuación, defina un login()
método en el App
componente 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.js
con 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
0 Comentarios
Dejanos tu comentario para seguir mejorando!