Añada autenticación de usuario a su aplicación React
Cuando se crean aplicaciones web, la autenticación de usuario es una característica necesaria para añadir a su aplicación. La autenticación de usuarios permite a los usuarios verificados acceder a las funciones que están a su disposición en su aplicación y deniega el acceso a los usuarios no verificados.
Integrar la autenticación de usuarios en aplicaciones React no es tarea fácil y requiere mucho tiempo, ya que implica varios procesos complejos, como el hash de contraseñas, la generación y gestión de tokens de autenticación, y muchos más.
Sin embargo, con plataformas como Back4App, integrar la autenticación de usuario con tus aplicaciones React es simple y fácil. En este artículo, explorarás cómo añadir autenticación de usuario a tu aplicación React usando Back4App.
Contents
Autenticación de usuarios
La autenticación de usuario es el proceso de determinar la identidad de una persona que intenta acceder a su aplicación.
Requiere que la persona que intenta acceder a su aplicación proporcione credenciales verificables, que pueden ser en forma de nombre de usuario y contraseña, datos biométricos, claves/tokens de acceso, etc.
Si el mecanismo de autenticación considera que las credenciales son válidas, concede al usuario acceso a la aplicación; de lo contrario, rechaza la solicitud de autenticación con el mensaje de error correspondiente.
Métodos comunes de autenticación
Algunos métodos de autenticación habituales son los siguientes:
- Nombre de usuario y contraseña: este método de autenticación requiere que un usuario proporcione un nombre de usuario y una contraseña válidos para autenticar su identidad. Después de que un usuario proporcione un nombre de usuario y una contraseña, este mecanismo de autenticación los compara con los datos almacenados en la base de datos y solo aprueba la solicitud de autenticación si coinciden.
- Autenticación multifactor (AMF): MFA se refiere a la combinación de múltiples mecanismos de autenticación para autenticar a un usuario. En un sistema de autenticación MFA, el usuario debe validar su identidad más de una vez. Por ejemplo, un usuario puede tener que introducir un código de autenticación después de autenticar su identidad utilizando un nombre de usuario y una contraseña.
- Autenticación biométrica: La autenticación biométrica se refiere a los mecanismos de autenticación que dependen de características biológicas como la cara, los patrones de iris, las huellas dactilares o el reconocimiento de voz para autenticar a un usuario.
- OAuth: OAuth es un protocolo de autenticación que permite a tus usuarios autenticar sus identidades concediendo a tu aplicación acceso a su proveedor de OAuth preferido, como Facebook o X (antes Twitter). Cuando un usuario intenta autenticarse utilizando OAuth, será redirigido a la pantalla de inicio de sesión del proveedor de OAuth para autenticar su identidad.
- Tokens Web JSON (JWT): Los JWT son formatos de token compactos portátiles y seguros para URI que se utilizan normalmente para transmitir detalles de autenticación y autorización de forma segura entre diferentes partes. La autenticación con JWT implica que el usuario envíe el token de acceso JWT en sus peticiones para validar su identidad.
Añadir autenticación de usuario a su aplicación con Back4app
Back4app es una plataforma en la nube que ofrece una amplia gama de servicios, incluida una función Backend-as-a-service (BaaS). La opción BaaS de Back4app ofrece varias funciones, incluida la autenticación de usuarios.
Implementar la autenticación de usuario con Back4app implica unos pocos pasos. En este tutorial, crearás una sencilla aplicación de gestión bancaria con React.
Esta aplicación integrará las funciones de autenticación de Back4app, lo que le permitirá crear una cuenta, iniciar sesión en su cuenta, acceder a su información de inicio de sesión actual y cerrar sesión.
Creación de una aplicación React
Para crear una nueva aplicación React, empieza por crear una nueva aplicación React usando Vite. Vite es una herramienta de desarrollo web que proporciona una experiencia de desarrollo más rápida y eficiente.
Ejecuta el siguiente comando en tu terminal para crear la nueva aplicación React:
npm init vite
Después de ejecutar el comando anterior, aparecerán en pantalla una serie de mensajes pidiéndole que especifique el nombre de la aplicación, el framework elegido y la variante de idioma que desea utilizar.
Así:
En la imagen anterior, el nombre de la aplicación es react-authentication-app, el framework seleccionado es React y la variante de lenguaje es JavaScript.
A continuación, cambie su directorio actual por el directorio de la aplicación e instale las dependencias necesarias ejecutando los comandos que se indican a continuación:
cd react-authentication-app && npm install
A continuación, instala el router React en tu aplicación ejecutando el siguiente comando:
npm install react-router-dom
A continuación, abra su aplicación React en un IDE (Entorno de Desarrollo Integrado) y modifique el archivo main.jsx sustituyendo el contenido por el bloque de código siguiente.
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import { BrowserRouter } from 'react-router-dom'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>,
)
Este bloque de código importa el componente BrowserRouter del paquete react-router-dom y envuelve el componente App.
Esto habilita el enrutamiento en toda la aplicación. En su componente App, defina las diferentes rutas en la aplicación.
Así:
import { Route, Routes } from "react-router-dom";
import Signup from "./pages/Signup";
import Login from "./pages/Login";
import Home from "./pages/Home";
function App() {
return (
<>
<Routes>
<Route path="/home" element={<Home />} />
<Route path="" element={<Signup />}/>
<Route path="/login" element={<Login />}/>
</Routes>
</>
)
}
export default App
El bloque de código anterior define tres rutas distintas, que permiten a los usuarios navegar entre las páginas de registro, inicio de sesión e inicio en función de las rutas URL.
Ahora, crea una carpeta components en el directorio src de la aplicación. En esta carpeta, crea un archivo Authnavbar.jsx. Este componente contendrá una barra de navegación que se mostrará en las páginas de registro e inicio de sesión.
En el componente Authnavbar, escriba este código:
import React from "react";
import { Link } from "react-router-dom";
function Authnavbar(props) {
return (
<nav>
<h3>Banka</h3>
{props.type === "signup" ? (
<div>
If you already have an account{""}
<Link to="/login" className="link">
Log in
</Link>
</div>
) : props.type === "login"? (
<div>
If you don't have an account{""}
<Link to="/" className="link">
Sign Up
</Link>
</div>
) : null}
</nav>
);
}
export default Authnavbar;
El bloque de código anterior crea una barra de navegación con renderizado condicional basado en el valor de la propiedad type, permitiendo a los usuarios navegar entre las páginas de registro e inicio de sesión dentro de la aplicación.
A continuación, genere una carpeta pages en el directorio src de la aplicación. En esta carpeta, crea tres componentes: Home.jsx, Sign-up.jsx, y Login.jsx. Estos archivos servirán como páginas de inicio, registro e inicio de sesión.
La página de registro contendrá un formulario en el que los usuarios podrán introducir sus datos, como el nombre de usuario, el correo electrónico y la contraseña.
Por ejemplo:
import React from "react";
import Authnavbar from "../components/Authnavbar";
function Signup() {
const [formData, setFormData] = React.useState({
username: "",
email: "",
password: "",
});
const handleChange = (event) => {
setFormData((prevState) => ({
...prevState,
[event.target.name]: event.target.value,
}));
};
return (
<>
<Authnavbar type= "sign-up"/>
<form>
<input
type= "text"
name= "username"
placeholder= "Username..."
onChange={handleChange}
value={formData.username}
/>
<input
type= "email"
name= "email"
placeholder= "Email..."
onChange={handleChange}
value={formData.email}
/>
<input
type= "password"
name= "password"
placeholder= "Password..."
onChange={handleChange}
value={formData.password}
/>
<div>
<button>Sign Up</button>
</div>
</form>
</>
);
}
export default Sign-up;
Este bloque de código representa una página de registro. Contiene un formulario con campos de entrada, incluidos el nombre de usuario, el correo electrónico y la contraseña del usuario.
También hay un estado formData que almacena los valores de los campos de entrada nombre de usuario, correo electrónico y contraseña. La función handleChange actualiza el estado formData cada vez que el usuario escribe en los campos de entrada.
En el componente Login, escriba las siguientes líneas de código:
import React from "react";
import Authnavbar from "../components/Authnavbar";
function Login() {
const [formData, setFormData] = React.useState({
username: "",
password: "",
});
const handleChange = (event) => {
setFormData((prevState) => ({
...prevState,
[event.target.name]: event.target.value,
}));
};
return (
<>
<Authnavbar type= "login"/>
<form>
<input
type= "text"
name= "username"
placeholder= "Username..."
onChange={handleChange}
value={formData.username}
/>
<input
type= "password"
name= "password"
placeholder= "Password..."
onChange={handleChange}
value={formData.password}
/>
<div>
<button>Log In</button>
</div>
</form>
</>
);
}
export default Login;
La página de inicio de sesión es bastante similar a la página de registro, excepto que no hay campo de entrada de correo electrónico en el formulario de inicio de sesión, y el estado del objeto formData carece de la propiedad email.
Ahora, modifique el estilo de su aplicación sustituyendo el código de su archivo index.css por las siguientes líneas de código:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
color: #333333;
background-color: #E8F7F5;
inline-size: 50%;
margin: auto;
font-family: "Montserrat", sans-serif;
}
input{
padding: 0.7rem 1rem;
border-radius: 10px;
border: none;
outline: none;
color: #333333;
background-color: #FFFFFF;
font-family: "Montserrat", sans-serif;
inline-size: 100%;
}
input::placeholder{
font-family: "Montserrat", sans-serif;
font-weight: 500;
}
button{
padding: 0.7rem 1rem;
background-color: #00C3A5;
color: #FFFFFF;
font-family: "Montserrat", sans-serif;
font-size: 14px;
border-radius: 7px;
border: none;
}
form{
margin-block-start: 25%;
display: flex;
flex-direction: column;
gap: 2rem;
align-items: center;
}
nav{
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 0;
}
.link{
text-decoration: none;
color: #00C3A5;
}
Después de dar estilo a su aplicación, ejecute el siguiente comando para iniciar su aplicación:
npm run dev
La ejecución del comando anterior le proporcionará el enlace http://localhost:5173/. Navegue hasta este enlace en su navegador web para ver su aplicación.
Con los estilos definidos, la página de registro debería tener el aspecto que se muestra a continuación:
Su página de inicio de sesión debe parecerse a la imagen de abajo:
Ahora que has creado tu aplicación React, necesitas crear una nueva aplicación Back4app para manejar tu autenticación.
Creación de una nueva aplicación Back4App
Para usar Back4app, necesitas tener una cuenta. Puedes registrarte gratis si no tienes una.
Para este tutorial, usted creará una nueva aplicación Back4app usando el agente Back4app AI. El Agente AI de Back4app es un ayudante AI que te ayuda a ejecutar tareas en Back4app usando prompts.
Inicie sesión en su cuenta Back4app y localice y haga clic en el botón “Agente AI” en la barra de navegación de su tablero (Ver imagen abajo).
Para utilizar el Agente AI de Back4app para generar una aplicación, introduzca la solicitud que aparece a continuación:
create a new application named react-authenticationDebería obtener una respuesta similar a la que se muestra en la siguiente imagen:
Como se muestra en la imagen anterior, el Agente AI de Back4app creó una aplicación llamada react-authentication. Puede encontrar esta aplicación en la página web “My App”.
Alternativamente, puede crear una nueva aplicación Back4app utilizando la intuitiva UI (Interfaz de Usuario) de Back4app.
En la aplicación react-authentication en Back4app, crea una clase de cartera. Esta clase de monedero contendrá información valiosa sobre el monedero del usuario.
Puede crear la clase con el Agente AI utilizando la siguiente instrucción:
Create a Wallet class and add the following fields: balance, owner(relation to the User class indicating which user owns the wallet), createdAt, and updatedAt in the react-authentication appEl Agente AI iniciará el proceso de creación de la clase de cartera y añadirá lo especificado, como se muestra en la siguiente imagen.
Conectando tu aplicación React a Back4app
Después de crear tu aplicación Back4app, necesitas conectar tu aplicación Back4app a tu aplicación React usando el SDK Parse.
Instala Parse en tu aplicación ejecutando el siguiente comando:
npm install parse
A continuación, inicialícelo en su aplicación importando el objeto Parse en su componente de aplicación y configurándolo con las claves de su aplicación Back4app.
Así:
import Parse from 'parse';
Parse.initialize('YOUR_APP_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = '<https://parseapi.back4app.com/>';
Sustituye 'YOUR_APP_ID' y 'YOUR_JAVASCRIPT_KEY ‘ por las respectivas claves proporcionadas por Back4App. Encontrarás las claves de tu app en la pantalla después de crear tu app con el Agente AI de Back4app.
Ten en cuenta que siempre debes asegurar las claves adecuadamente en tu aplicación, preferiblemente usando variables env.
Implementación de la autenticación de usuarios mediante el SDK de Parse
Con Parse inicializado, ya puedes implementar la autenticación de usuario en tu aplicación React.
Back4App provee automáticamente una clase Usuario para la autenticación de usuarios. Esta clase tiene campos predeterminados como nombre de usuario, contraseña, correo electrónico, etc.
Añade las siguientes líneas de código al componente Sign-up para implementar el registro de usuarios en tu aplicación React.
import Parse from "parse"
import { useNavigate } from "react-router-dom";
const navigate = useNavigate();
const signUpUser = async () => {
try {
const newUser = new Parse.User();
newUser.set("username", formData.username);
newUser.set("email", formData.email);
newUser.set("password", formData.password);
const user = await newUser.signUp();
let Wallet = Parse.Object.extend("Wallet");
let wallet = new Wallet();
let userPointer = {
__type: "Pointer",
className: "_User",
objectId: user.id,
};
wallet.set("owner", userPointer);
wallet.set("balance", 100);
wallet.save();
console.log(`${user} have successfully signed up`);
navigate("/login");
} catch (error) {
console.log("you encountered an error signing up");
}
};
El bloque de código anterior utiliza el hook useNavigate de react-router-dom para navegar programáticamente a diferentes rutas. El hook useNavigate devuelve una función navigate asignada a la variable navigate.
La función signUpUser es responsable de dar de alta a un nuevo usuario. La función crea un nuevo objeto Parse User newUser utilizando el método Parse.User y establece los valores de sus propiedades username, email y password a los valores de las propiedades correspondientes del estado del objeto formData. A continuación, llama al método signUp de forma asíncrona en el objeto newUser.
Después de que el código crea un nuevo usuario, define una clase Parse llamada “Cartera” con el método Parse.Object.extend.
A continuación, crea un objeto userPointer, que representa un puntero al usuario con el nombre de clase _User y el ID de objeto del usuario recién registrado. Utilizando el método set, el código establece el propietario del monedero al objeto userPointer y establece el saldo inicial del monedero en 100.
Si el registro se realiza correctamente, la función registra un mensaje de éxito y redirige a la ruta de inicio de sesión utilizando la función de navegación. Si se produce un error durante el registro, lo detecta y registra un mensaje de error.
A continuación, cree una función handleSubmit que invoque la función signUpUser. Vincula esta función al formulario de registro mediante el controlador de eventos onSubmit.
Esto asegura que cuando un usuario envía el formulario de registro, la función handleSubmit se activa automáticamente.
La función handleSubmit debería tener este aspecto:
const handleSubmit = (event) => {
event.preventDefault();
signUpUser();
};
Para implementar el inicio de sesión de usuario, crearás una función logInUser que contiene la lógica para el inicio de sesión de un usuario.
Añada el siguiente bloque de código a su componente Login:
import Parse from "parse"
import { useNavigate } from "react-router-dom";
const navigate = useNavigate();
const logInUser = async () => {
try {
const user = await Parse.User.logIn(formData.username, formData.password);
console.log("User logged in successfully:", user);
navigate("/home");
} catch (error) {
console.log("Error logging in user:", error);
}
};
const handleSubmit = (event) => {
event.preventDefault();
logInUser();
};
La función logInUser llama al método logIn de la clase Parse.User de forma asíncrona, pasando los valores de las propiedades username y password del estado del objeto formData.
La función comprueba si el nombre de usuario y la contraseña introducidos por el usuario coinciden con los almacenados en la clase Usuario de Back4App. Si coinciden, el usuario iniciará sesión con éxito.
Vincula la función handleSubmit al formulario de login usando el evento onSubmit. La función handleSubmit llamará a la función logInUser e intentará iniciar la sesión del usuario.
Después de iniciar sesión, el SDK de Parse gestiona la sesión del usuario. Puede acceder al usuario actual con el método Parse.User.current. Harás uso de este método en el componente Home.
Abra el componente Inicio y escriba este código:
import React from "react";
import Parse from "parse";
import { useNavigate } from "react-router-dom";
function Home() {
const navigate = useNavigate();
const [balance, setBalance] = React.useState(0);
const user = Parse.User.current();
const fetchBalance = async () => {
const Wallet = await Parse.Object.extend("Wallet");
const query = new Parse.Query(Wallet);
query.equalTo("owner", user);
const wallet = await query.first();
setBalance(wallet.get("balance"));
};
fetchBalance();
return (
<>
<nav>
<h1 className="title">Banka</h1>
<button>Log out</button>
</nav>
<div className="home">
<p className="top">Welcome {user.get("username")}</p>
<div className="balance-card">
<p>Total Wallet Balance</p>
<h1>{balance}</h1>
<button>Top Up</button>
</div>
<div className="features">
<div className="card">
<p>Pay Bills</p>
</div>
<div className="card">
<p>Airtime/Data</p>
</div>
<div className="card">
<p>Transfers</p>
</div>
<div className="card">
<p>Withdraw</p>
</div>
</div>
</div>
</>
);
}
export default Home;
Este bloque de código representa la página de inicio de tu aplicación. La función fetchBalance obtiene el saldo del monedero del usuario actual.
Consulta la clase “Cartera” con el método Parse.Query y establece una restricción en la consulta para recuperar la cartera donde la propiedad owner es igual al usuario actual utilizando el método query.equalTo.
El método query.first ejecuta la consulta y devuelve el primer resultado que coincida con las restricciones de la consulta.
Con la función setBalance, el código establece el saldo del monedero al estado de saldo. El código muestra el nombre del usuario y el saldo de su monedero.
En la sección JSX del bloque de código, encontrará el botón “recargar” en la etiqueta div con la clase saldo-tarjeta.
Al pulsar este botón, el saldo del monedero aumentará en 10. Para que esto sea posible, crearás una función topUp que contenga la lógica para aumentar el saldo.
Así:
const topUp = async () => {
const Wallet = await Parse.Object.extend("Wallet");
const query = new Parse.Query(Wallet);
query.equalTo("owner", user);
const wallet = await query.first();
wallet.increment("balance", 10);
const newBalance = await wallet.save();
setBalance(newBalance.get("balance"));
};
Este código obtiene el monedero del usuario desde el backend de Parse, incrementa el saldo en 10 con el método increment, guarda el monedero actualizado en el backend y actualiza el estado del saldo. Vincula la función topUp al botón “recargar ” usando el manejador de eventos click.
A continuación, en el componente Home, añada una función logOutUser responsable de cerrar la sesión del usuario. La función debe tener este aspecto:
const logOutUser = async () => {
try {
const user = await Parse.User.logOut();
console.log("User logged out successfully:", user);
navigate("/");
} catch (error) {
console.error("Error logging out user:", error);
}
};
La función logOutUser llama al método logOut de la clase Parse. User de forma asíncrona para cerrar la sesión del usuario actual. Vincula la función logOutUser al botón “log out” en el componente Home usando el evento click.
Para dar estilo al componente Home, añada las clases CSS definidas a continuación al archivo index.css.
.home{
display: flex;
flex-direction: column;
gap: 3rem;
margin-block-start: 4rem;
}
.title{
text-align: center;
margin-block-start: 2rem;
}
.top{
font-size: 25px;
font-weight: 500;
}
.balance-card{
background-color: #FFFFFF;
inline-size: 40%;
padding: 1rem 2rem;
border-radius: 7px;
display: flex;
flex-direction: column;
gap: 2rem;
}
.features{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
.card{
background-color: #FFFFFF;
color: #00C3A5;
margin-block-end: 1rem;
padding: 1rem 2rem;
font-size: 25px;
border-radius: 10px;
}
.card:hover{
opacity: 0.6;
}
Pruebe su aplicación
Una vez que haya terminado de construir la aplicación React e implementar la autenticación de usuario con Back4app.
El siguiente paso es probar la aplicación. Para ello, navegue hasta el enlace http://localhost:5173/ en su navegador web, y la página de registro aparecerá en su pantalla.
Rellene el formulario de inscripción y envíelo.
Después de registrarse, usted puede confirmar si el registro fue exitoso visitando el tablero de su aplicación en Back4app. Si el registro es exitoso, Back4app agregará los detalles del usuario a la clase Usuario en su aplicación.
Así:
Después de inscribirse, la aplicación le redirigirá a la página de inicio de sesión, donde deberá identificarse con el nombre de usuario y la contraseña que utilizó en el formulario de inscripción.
Por ejemplo:
Una vez iniciada la sesión, aparecerá en su pantalla la página de inicio, que debería tener el siguiente aspecto:
Ahora haz clic en el botón “recargar ” para aumentar tu saldo en 10.
Desplegando tu aplicación React en Back4app
Para desplegar tu aplicación React en Back4app, utilizarás la aplicación Container as a Service (CaaS) de Back4app.
El CaaS de Back4app le permite desplegar y gestionar contenedores Docker en el entorno cloud proporcionado por Back4App.
Antes de que puedas desplegar tu aplicación React, primero necesitas dockerizar la aplicación. Para ello, crea un Dockerfile en el directorio raíz de tu aplicación y añade las siguientes líneas de código:
FROM node:16
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 5173
CMD ["npm", "run", "dev"]
Este Dockerfile configura un entorno Node.js, crea un directorio de trabajo, instala dependencias, copia el código de la aplicación, expone un puerto y especifica el comando por defecto para ejecutar la aplicación.
Además, cree un archivo .dockerignore. En el archivo .doc kerignore, añada los archivos y directorios excluidos del contexto al compilar imágenes Docker.
Por ejemplo:
#.dockerignore
node_modules
Desde que creaste la aplicación React con Vite, debes actualizar el archivo de configuración de Vite para soportar Docker. En su archivo vite.config.js, sustituya el código existente por el bloque de código siguiente:
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// <https://vitejs.dev/config/>
export default defineConfig({
plugins: [react()],
server: {
host: true,
strictPort: true,
port: 5173,
},
})
Este bloque de código establece el servidor para utilizar el host por defecto, por lo general localhost. Establece el número de puerto que el servidor de desarrollo escuchará en el puerto 5173 y asegura que Vite no iniciará el servidor si el puerto especificado no está disponible.
Ahora puedes construir la imagen docker de tu aplicación ejecutando el siguiente comando en tu terminal:
docker build -t quote-generator .
Asegúrese de empujar su aplicación a su cuenta de GitHub antes de intentar desplegar la aplicación en Back4app. Una vez que haya terminado de empujar la aplicación, integre su cuenta de GitHub con Back4app.
Puedes hacerlo con la aplicación Back4app Github. Después de integrar tu GitHub con Back4app, ya puedes desplegar tu aplicación usando el Agente AI de Back4app.
Para desplegar la aplicación, introduzca la solicitud siguiente:
Deploy my repository <<repository-url>> on Back4app containers
En el bloque de código anterior, sustituye repository-url por la URL del repositorio GitHub de tu aplicación.
Como se muestra en la imagen anterior, cuando se comunique con el agente de IA, proporcione el enlace del repositorio de GitHub de la aplicación que desea desplegar.
Después de que el Agente AI de Back4app inicie el despliegue de la aplicación, espere un par de minutos y confirme el estado actual del despliegue.
Por ejemplo:
Una vez desplegada correctamente, el Agente AI de Back4app actualizará el estado de despliegue de la aplicación a “desplegada” y le proporcionará un enlace para acceder a la aplicación en su navegador.
Puedes encontrar la aplicación terminada en este repositorio de GitHub y la aplicación en vivo en esta URL.
Conclusión
En este artículo se explica cómo añadir autenticación a una aplicación React utilizando un backend como servicio.
La integración de la autenticación de usuario en su aplicación React utilizando Back4App es un proceso sencillo que mejora significativamente la seguridad y la funcionalidad de su aplicación.
Al aprovechar los servicios de Back4App, puede centrarse en crear sus aplicaciones web con excelentes experiencias de usuario y dejar la gestión del backend y las tareas de autenticación en manos de una plataforma fiable.
