Tutorial Completo: Autenticación API con Laravel Sanctum y Ionic, Requisitos previos:
- PHP (8.0 o superior), Composer, Node.js (16.0 o superior), npm y Ionic CLI instalados en tu sistema.
Parte 1: Configuración del Backend con Laravel Sanctum
Paso 1: Crear un Nuevo Proyecto Laravel
Primero, abre una terminal y crea el proyecto Laravel para nuestro backend. Ejecuta el siguiente comando:
composer create-project laravel/laravel backendEste comando crea una nueva carpeta llamada backend en el directorio actual, donde Laravel instalará todos sus archivos.
Paso 2: Configurar Sanctum en Laravel
- Instalar Laravel Sanctum: Ve a la carpeta
backendy ejecuta el siguiente comando:composer require laravel/sanctumEsto instalará Sanctum, la herramienta de autenticación para Laravel. - Publicar el archivo de configuración de Sanctum: Este archivo de configuración permite personalizar el comportamiento de Sanctum. Para publicarlo, ejecuta:
php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"Este comando creará el archivo de configuración enbackend/config/sanctum.php. - Ejecutar migraciones de Sanctum: Las migraciones crearán las tablas necesarias en la base de datos. Corre el siguiente comando para ejecutarlas:
php artisan migrate
Paso 3: Configurar Middleware en Kernel
Laravel Sanctum requiere un middleware específico para las solicitudes. En el archivo backend/app/Http/Kernel.php, agrega la siguiente línea dentro del grupo de middleware api:
'api' => [
\Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
\Illuminate\Routing\Middleware\SubstituteBindings::class,
],Esta configuración permite que Laravel procese las solicitudes del frontend correctamente.
Paso 4: Crear Controlador de Autenticación
Vamos a generar un controlador llamado AuthController para manejar el registro, el inicio de sesión y el cierre de sesión. Ejecuta el siguiente comando en tu terminal:
php artisan make:controller AuthControllerEsto creará un archivo AuthController.php en backend/app/Http/Controllers/. Abre este archivo y añade el siguiente código:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\User;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Hash;
class AuthController extends Controller
{
public function register(Request $request)
{
$request->validate([
'name' => 'required|string|max:255',
'email' => 'required|string|email|max:255|unique:users',
'password' => 'required|string|min:8|confirmed',
]);
$user = User::create([
'name' => $request->name,
'email' => $request->email,
'password' => Hash::make($request->password),
]);
$token = $user->createToken('auth_token')->plainTextToken;
return response()->json(['access_token' => $token, 'token_type' => 'Bearer']);
}
public function login(Request $request)
{
if (!Auth::attempt($request->only('email', 'password'))) {
return response()->json(['message' => 'Invalid login details'], 401);
}
$user = User::where('email', $request->email)->firstOrFail();
$token = $user->createToken('auth_token')->plainTextToken;
return response()->json(['access_token' => $token, 'token_type' => 'Bearer']);
}
public function logout(Request $request)
{
$request->user()->tokens()->delete();
return response()->json(['message' => 'Successfully logged out']);
}
}Paso 5: Configurar las Rutas de Autenticación en api.php
En backend/routes/api.php, define las rutas para registrar, iniciar sesión y cerrar sesión. Agrega el siguiente código:
use App\Http\Controllers\AuthController;
Route::post('/register', [AuthController::class, 'register']);
Route::post('/login', [AuthController::class, 'login']);
Route::middleware('auth:sanctum')->post('/logout', [AuthController::class, 'logout']);Paso 6: Configurar Cors
Para asegurar que tu frontend pueda comunicarse con el backend, habilita el CORS. En el archivo backend/config/cors.php, asegúrate de que supports_credentials esté configurado en true.
Parte 2: Configuración del Frontend con Ionic
Paso 1: Crear un Nuevo Proyecto Ionic
Para el frontend, crea un proyecto en blanco con Ionic usando el siguiente comando en tu terminal:
ionic start frontend blank --type=angularEsto generará un proyecto Ionic llamado frontend.
Paso 2: Instalar Dependencias de Angular para HTTP y Formularios
Instala las siguientes dependencias para gestionar solicitudes HTTP y formularios en Angular:
npm install @angular/forms @angular/common @angular/httpPaso 3: Crear un Servicio de Autenticación en Ionic
Genera un servicio para manejar el inicio de sesión, registro y cierre de sesión:
ionic generate service authEsto creará src/app/auth.service.ts. Abre el archivo y agrega el siguiente código:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class AuthService {
private apiUrl = 'http://localhost:8000/api';
constructor(private http: HttpClient) {}
register(name: string, email: string, password: string, password_confirmation: string): Observable<any> {
return this.http.post(`${this.apiUrl}/register`, { name, email, password, password_confirmation });
}
login(email: string, password: string): Observable<any> {
return this.http.post(`${this.apiUrl}/login`, { email, password });
}
logout(): Observable<any> {
return this.http.post(`${this.apiUrl}/logout`, {});
}
}Paso 4: Crear una Página de Login
Genera una página para que los usuarios puedan iniciar sesión:
ionic generate page loginEn src/app/login/login.page.html, agrega el formulario de inicio de sesión:
<ion-header>
<ion-toolbar>
<ion-title>Login</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<form (ngSubmit)="onLogin()">
<ion-item>
<ion-label position="floating">Email</ion-label>
<ion-input [(ngModel)]="email" name="email" type="email" required></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating">Password</ion-label>
<ion-input [(ngModel)]="password" name="password" type="password" required></ion-input>
</ion-item>
<ion-button expand="full" type="submit">Login</ion-button>
</form>
</ion-content>En el archivo src/app/login/login.page.ts, agrega el siguiente código para manejar la autenticación al enviar el formulario:
import { Component } from '@angular/core';
import { AuthService } from '../auth.service';
import { Router } from '@angular/router';
@Component({
selector: 'app-login',
templateUrl: './login.page.html',
styleUrls: ['./login.page.scss'],
})
export class LoginPage {
email: string;
password: string;
constructor(private authService: AuthService, private router: Router) {}
onLogin() {
this.authService.login(this.email, this.password).subscribe(
(response) => {
localStorage.setItem('token', response.access_token);
this.router.navigate(['/home']);
},
(error) => {
console.error('Login failed', error);
}
);
}
}Este tutorial debería proporcionar todos los detalles necesarios para obtener un token al intentar iniciar sesión. Avísame si deseas agregar alguna otra funcionalidad o pasos adicionales.
Acontinuacion mostraremos todo lo que puedes hacer con este token y su importancia de haberlo obtenido con los pasos anteriores.
Ahora aprenderás a proteger las vistas de tu aplicación Ionic utilizando el token generado con Laravel Sanctum. Abordaremos desde los conceptos básicos hasta los comandos de código detallados para la protección de vistas, actualización de tokens, cierre de sesión y autenticación obligatoria en rutas. Este es un recurso integral que servirá tanto para desarrolladores principiantes como avanzados.
Pasos detallados para implementar seguridad en tu app móvil
Parte 2.“Cómo Usar el Token de Laravel Sanctum en Ionic para Proteger Vistas, Validar Acceso y Gestionar Sesiones de Usuario”
Para comenzar, asegúrate de contar con dos proyectos básicos:
Proteger Vistas en Ionic mediante Laravel Sanctum
Paso 1: Generar las Páginas Necesarias en Ionic
En este primer paso, generamos las páginas que serán utilizadas para implementar la estructura de vistas protegidas en nuestra app. Las vistas de Home, Profile, y UpdateProfile serán las zonas donde los usuarios interactúan después de autenticarse, y cada una de estas secciones requerirá protección para evitar accesos no autorizados. Estas vistas reflejan escenarios comunes en aplicaciones reales, como la visualización de información de perfil, la actualización de datos y el acceso a la pantalla principal.
Utilizando el comando ionic generate page, podemos crear rápidamente estas páginas en el entorno de Ionic. El comando es esencial para automatizar la estructura inicial de cada vista y configurar los archivos necesarios en nuestra app. Tener cada página separada permite implementar componentes específicos de seguridad y redirecciones para cada una, lo que facilita el control de acceso de manera organizada y eficiente.Para este tutorial, generaremos tres páginas
ionic generate page home
ionic generate page profile
ionic generate page update-profileUtilizando el comando ionic generate page, podemos crear rápidamente estas páginas en el entorno de Ionic. El comando es esencial para automatizar la estructura inicial de cada vista y configurar los archivos necesarios en nuestra app. Tener cada página separada permite implementar componentes específicos de seguridad y redirecciones para cada una, lo que facilita el control de acceso de manera organizada y eficiente.
Estas páginas formarán la estructura de vistas que protegeremos, cada una representando una sección específica de la aplicación que requiere autenticación.
Paso 2: Configurar el Servicio de Autenticación en Ionic
Este paso consiste en crear el archivo auth.service.ts, que actúa como el núcleo para gestionar las operaciones de autenticación en el frontend. Aquí definimos métodos que permiten al usuario iniciar sesión, verificar el estado de autenticación y cerrar sesión. Uno de los aspectos cruciales en este servicio es la función validateToken, que se utiliza para verificar si el token almacenado es válido antes de permitir el acceso a vistas protegidas.
Código de Ejemplo en auth.service.ts:
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Router } from '@angular/router';
@Injectable({
providedIn: 'root'
})
export class AuthService {
private apiUrl = 'http://localhost:8000/api';
constructor(private http: HttpClient, private router: Router) {}
// Obtención del token
login(email: string, password: string): Observable<any> {
return this.http.post(`${this.apiUrl}/login`, { email, password });
}
// Verificación del token para autenticación
isAuthenticated(): boolean {
return !!localStorage.getItem('token');
}
// Validación de token antes de acceder a vistas protegidas
validateToken(): Observable<any> {
const headers = new HttpHeaders({
'Authorization': `Bearer ${localStorage.getItem('token')}`
});
return this.http.get(`${this.apiUrl}/validate-token`, { headers });
}
// Cierre de sesión
logout(): void {
const headers = new HttpHeaders({
'Authorization': `Bearer ${localStorage.getItem('token')}`
});
this.http.post(`${this.apiUrl}/logout`, {}, { headers }).subscribe(() => {
localStorage.removeItem('token');
this.router.navigate(['/login']);
});
}
}Al centralizar la autenticación en un servicio dedicado, es más fácil actualizar la lógica de seguridad sin afectar el funcionamiento de la aplicación en general. Además, esta estructura de servicio permite que el token se envíe en el encabezado de cada solicitud HTTP hacia el backend, lo que asegura que todas las rutas protegidas reciban la autenticación necesaria. Este enfoque organiza la lógica de autenticación de forma reutilizable y escalable.
3. Protección de Rutas en Ionic con AuthGuard
Paso 1: Crear el AuthGuard
En este paso, implementamos un AuthGuard, un mecanismo de Angular que intercepta las solicitudes de navegación y protege el acceso a rutas específicas en la app. El AuthGuard evalúa si el usuario tiene un token válido antes de permitir el acceso a páginas protegidas como Home, Profile, y UpdateProfile. En caso de que el token sea inválido o no esté presente, el usuario es redirigido automáticamente a la página de inicio de sesión.
ionic generate guard authCrear un AuthGuard no solo mejora la seguridad sino también la experiencia del usuario, evitando que este navegue a secciones para las cuales no está autorizado. Al combinar el guard con el servicio de autenticación, podemos gestionar los flujos de acceso y redirección sin necesidad de repetir lógica en cada componente, mejorando la eficiencia de desarrollo y el mantenimiento de la app.
Modifica el archivo generado auth.guard.ts para interceptar las rutas y permitir el acceso solo a usuarios autenticados.
Código de Ejemplo en auth.guard.ts:
import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { AuthService } from './auth.service';
import { Observable, of } from 'rxjs';
import { map, catchError } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class AuthGuard implements CanActivate {
constructor(private authService: AuthService, private router: Router) {}
canActivate(): Observable<boolean> {
if (this.authService.isAuthenticated()) {
return this.authService.validateToken().pipe(
map(() => true),
catchError(() => {
this.router.navigate(['/login']);
return of(false);
})
);
} else {
this.router.navigate(['/login']);
return of(false);
}
}
}Este guard protegerá rutas y redirigirá a los usuarios no autenticados al login.
4. Configurar Rutas Protegidas en el Archivo de Rutas
Abre app-routing.module.ts y protege las rutas necesarias añadiendo el guard AuthGuard a las rutas de Home, Profile, y UpdateProfile.
Este paso implica la configuración de las rutas en app-routing.module.ts, el archivo central para gestionar la navegación en aplicaciones Angular/Ionic. Aquí especificamos qué rutas estarán protegidas por AuthGuard, lo cual implica que los usuarios deben estar autenticados para acceder a estas. La idea es redirigir automáticamente al usuario a la página de inicio de sesión si intenta acceder a una ruta sin un token válido.
import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { AuthGuard } from './auth.guard';
const routes: Routes = [
{ path: 'home', loadChildren: () => import('./home/home.module').then(m => m.HomePageModule), canActivate: [AuthGuard] },
{ path: 'profile', loadChildren: () => import('./profile/profile.module').then(m => m.ProfilePageModule), canActivate: [AuthGuard] },
{ path: 'update-profile', loadChildren: () => import('./update-profile/update-profile.module').then(m => m.UpdateProfilePageModule), canActivate: [AuthGuard] },
{ path: 'login', loadChildren: () => import('./login/login.module').then(m => m.LoginPageModule) },
{ path: '', redirectTo: 'login', pathMatch: 'full' }
];La configuración en el archivo de rutas es clave para centralizar la lógica de acceso y proteger múltiples vistas de la aplicación de manera uniforme. Esto facilita el mantenimiento y escalabilidad de la app, ya que las rutas protegidas pueden modificarse en un solo lugar sin necesidad de cambiar la lógica en cada componente individual. Además, al definir las rutas de acceso y sus redirecciones aquí, garantizamos una estructura de navegación segura y fácil de comprender para el equipo de desarrollo.
5. Implementar el Redireccionamiento Post-Login y Post-Logout
En login.page.ts, redirige al usuario a Home si el login es exitoso:
El redireccionamiento post-login y post-logout es esencial para crear una experiencia de usuario fluida y coherente. Después de un inicio de sesión exitoso, el usuario debe ser llevado a una vista donde pueda interactuar con las funcionalidades de la aplicación, en este caso, Home. Si el usuario cierra sesión, se redirige a la página de inicio de sesión para evitar accesos no autorizados.
async login() {
try {
const response = await this.authService.login(this.email, this.password).toPromise();
localStorage.setItem('token', response.access_token);
this.router.navigate(['/home']);
} catch (error) {
// Manejador de errores para login fallido
}
}En logout, elimina el token y redirige a Login:
logout() {
this.authService.logout();
}Implementar redireccionamientos en el flujo de autenticación no solo es conveniente, sino también una buena práctica de seguridad. Asegura que los usuarios tengan una experiencia clara y ordenada en su navegación, sin necesidad de recordar rutas específicas. Este manejo de sesiones organiza el flujo de interacción en la aplicación y refuerza la seguridad al eliminar tokens tras cerrar sesión.
Cabeceras en las solicitudes.
const headers = new HttpHeaders({
'Authorization': `Bearer ${localStorage.getItem('token')}`
});Este paso es fundamental, pues garantiza que el backend pueda identificar y validar la identidad de cada solicitud. Incluir el token en cada solicitud permite a Laravel Sanctum gestionar la autenticación y dar una respuesta apropiada, como permitir el acceso a la vista o devolver un error de autenticación si el token es inválido. La autenticación continua a través del encabezado es una práctica recomendada para maximizar la seguridad en aplicaciones que interactúan frecuentemente con APIs protegidas.
veremos a detalle detalle cómo configurar correctamente las cabeceras en cada solicitud, cómo guardar el token en el almacenamiento local, y cómo usar HttpClient para validar el token y gestionar el cierre de sesión.
Paso 6: Guardar el Token de Autenticación en el Almacenamiento Local
Cuando el usuario inicie sesión con éxito, será necesario guardar el token en el almacenamiento local de la aplicación para poder utilizarlo en solicitudes futuras. Esto asegura que cada vez que el usuario accede a una vista protegida o realiza alguna acción autenticada, el token esté disponible para enviar en el encabezado de la solicitud. Solo añade la linea localStorage.setItem(‘token’, response.access_token); a tu antigua funcion de login del HomePage
Para manejar correctamente las solicitudes autenticadas, configuraremos el HttpClientModule en el archivo app.module.ts. Esto permite enviar peticiones HTTP a nuestro backend y configurar los encabezados en cada solicitud para incluir el token de autenticación. Agregar HttpClientModule es un paso esencial para poder utilizar HttpClient en los servicios de nuestra aplicación.
Primero, importa HttpClientModule en el archivo app.module.ts y añádelo a la lista de imports:
import { HttpClientModule } from '@angular/common/http';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
HttpClientModule, // Agregar aquí
IonicModule.forRoot(),
AppRoutingModule
],
bootstrap: [AppComponent]
})
export class AppModule {}Con HttpClientModule configurado, podemos utilizar HttpClient en el servicio de autenticación (auth.service.ts) para enviar peticiones con el token en los encabezados, lo cual es necesario para proteger las rutas y permitir el acceso solo a usuarios autenticados.
Paso 8: Configurar Cabeceras con el Token para Solicitudes Autenticadas
Ahora que HttpClient está listo para usarse, debemos asegurarnos de que cada solicitud protegida lleve el token en el encabezado Authorization. Esto permite al backend validar que la solicitud proviene de un usuario autenticado. En el servicio de autenticación (auth.service.ts), crea métodos que incluyan el token en los encabezados. Aquí tienes dos ejemplos básicos para validar el token y cerrar sesión:
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class AuthService {
private apiUrl = 'https://your-backend-url.com/api'; // Cambia por tu URL
constructor(private http: HttpClient) {}
// Método de registro
register(userData: any): Observable<any> {
return this.http.post(`${this.apiUrl}/register`, userData);
}
// Método de inicio de sesión
login(credentials: any): Observable<any> {
return this.http.post(`${this.apiUrl}/login`, credentials);
}
// Método para validar el token
validateToken(): Observable<any> {
const token = localStorage.getItem('token');
const headers = new HttpHeaders({
Authorization: `Bearer ${token}`
});
return this.http.get(`${this.apiUrl}/validate-token`, { headers });
}
// Método para cerrar sesión
logout(): Observable<any> {
const token = localStorage.getItem('token');
const headers = new HttpHeaders({
Authorization: `Bearer ${token}`
});
return this.http.post(`${this.apiUrl}/logout`, {}, { headers });
}
}
Estos métodos utilizan HttpHeaders para incluir el token en cada solicitud. Al validar el token, se asegura que solo usuarios con un token válido puedan acceder a rutas protegidas. En el caso del cierre de sesión, se elimina el token del almacenamiento local, lo cual revoca el acceso a las vistas protegidas. De esta forma, el sistema garantiza que cualquier solicitud sin el encabezado Authorization recibirá una respuesta de error desde el backend.
Paso 9 : ACTUALIZA LOGIN Y REGISTRO:
login.page.ts
En la vista de login.page.ts, se encargará de almacenar el token recibido en el localStorage.
import { Component } from '@angular/core';
import { AuthService } from '../services/auth.service';
@Component({
selector: 'app-login',
templateUrl: './login.page.html',
styleUrls: ['./login.page.scss'],
})
export class LoginPage {
credentials = {
email: '',
password: ''
};
constructor(private authService: AuthService) {}
login() {
this.authService.login(this.credentials).subscribe((response: any) => {
localStorage.setItem('token', response.token); // Guardar el token en localStorage
console.log('Login exitoso!');
}, (error) => {
console.error('Error en login', error);
});
}
}
Ahora que tenemos nuestra lógica de autenticación configurada en el servicio AuthService, es hora de crear la vista que permitirá a los usuarios registrarse en nuestra aplicación. Para ello, utilizaremos el comando de Ionic para generar una nueva página.
Abre tu terminal en la raíz de tu proyecto Ionic y ejecuta el siguiente comando:
ionic generate page registerregister.page.ts
Genera la viste «register» coloca el siguiente codigo en el html y En la vista de register.page.ts, también se almacena el token en el localStorage después de un registro exitoso.
<ion-header>
<ion-toolbar>
<ion-title>Registro</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<form (ngSubmit)="register()">
<ion-item>
<ion-label position="floating">Nombre</ion-label>
<ion-input type="text" [(ngModel)]="userData.name" name="name" required></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating">Correo Electrónico</ion-label>
<ion-input type="email" [(ngModel)]="userData.email" name="email" required></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating">Contraseña</ion-label>
<ion-input type="password" [(ngModel)]="userData.password" name="password" required></ion-input>
</ion-item>
<ion-button expand="full" type="submit" [disabled]="!userData.name || !userData.email || !userData.password">
Registrarse
</ion-button>
</form>
<ion-row>
<ion-col class="ion-text-center">
<p>¿Ya tienes una cuenta? <a routerLink="/login">Inicia sesión</a></p>
</ion-col>
</ion-row>
</ion-content>
Este comando generará una nueva carpeta llamada register dentro de la carpeta src/app/, que contendrá los siguientes archivos esenciales para la nueva vista:
register.page.ts: El archivo TypeScript que contendrá la lógica de nuestra página de registro.register.page.html: El archivo HTML donde definiremos la estructura visual de la página.register.page.scss: El archivo de estilos donde podremos personalizar el diseño de nuestra página.
Descripción del HTML y el Typescript de la pagina de registro:
- Header y Toolbar: El encabezado contiene un título para la vista de registro.
- Formulario: El formulario incluye tres campos de entrada:
- Nombre: Campo de texto para que el usuario ingrese su nombre.
- Correo Electrónico: Campo para el correo electrónico del usuario.
- Contraseña: Campo para la contraseña, que oculta el texto mientras el usuario lo escribe.
- Botón de Envío: Un botón que permite enviar el formulario. Está deshabilitado hasta que todos los campos obligatorios estén completos.
- Enlace de Navegación: Un enlace que redirige a la vista de inicio de sesión para los usuarios que ya tienen una cuenta.
Con esta estructura, los usuarios podrán registrarse fácilmente y los datos se enviarán al método register() en register.page.ts, donde se manejarán las solicitudes al backend. ¡Esto completa la vista de registro.
import { Component } from '@angular/core';
import { AuthService } from '../services/auth.service';
@Component({
selector: 'app-register',
templateUrl: './register.page.html',
styleUrls: ['./register.page.scss'],
})
export class RegisterPage {
userData = {
name: '',
email: '',
password: ''
};
constructor(private authService: AuthService) {}
register() {
this.authService.register(this.userData).subscribe((response: any) => {
localStorage.setItem('token', response.token); // Guardar el token en localStorage
console.log('Registro exitoso!');
}, (error) => {
console.error('Error en registro', error);
});
}
}
En el archivo auth.service.ts, se define el método register, el cual recibe un objeto userData con los datos necesarios para registrar al usuario (como name, email, y password). Este método usa HttpClient para realizar una solicitud POST al endpoint de registro en el backend de Laravel. La URL del backend debe configurarse en la variable apiUrl de AuthService, que representa la base de tu API (por ejemplo, https://your-backend-url.com/api). Este método devuelve un Observable, permitiendo manejar el flujo de respuesta asincrónica en la vista, lo cual es esencial para la reactividad y el manejo adecuado del estado en aplicaciones móviles.
En register.page.ts, la función register() llama al servicio authService.register y, si la solicitud es exitosa, guarda el token de autenticación en localStorage con localStorage.setItem('token', response.token);. Esto permite que el token esté disponible para futuras solicitudes protegidas y elimina la necesidad de que el usuario inicie sesión nuevamente tras registrarse. En caso de error, se registra un mensaje en la consola, lo cual es útil para depuración durante el desarrollo. La vista también presenta campos para que el usuario introduzca sus datos, generando una experiencia de usuario completa.
Estos pasos adicionales completan la configuración de autenticación segura en la aplicación, asegurando que todas las solicitudes relevantes incluyan el token y que los usuarios no autorizados sean redirigidos o reciban mensajes de error cuando intenten acceder a vistas protegidas.
Conclusión
Creando una Aplicación Móvil Segura con Ionic y Laravel Sanctum desde Cero hasta la Protección de Vistas
Al embarcarnos en el desarrollo de una aplicación móvil segura, este proceso en dos partes ha sido esencial para implementar autenticación y autorización robustas, comenzando desde la creación de proyectos en blanco hasta la protección total de vistas en Ionic mediante tokens de autenticación Laravel Sanctum. Cada paso ha sido desglosado de forma detallada para brindar una comprensión clara y completa tanto a principiantes como a profesionales que buscan profundizar en la implementación de soluciones avanzadas de seguridad en aplicaciones móviles.
al inicio comenzamos configurando el backend en Laravel y el frontend en Ionic, creando dos proyectos separados pero complementarios. En el lado de Laravel, configuramos Sanctum para la autenticación basada en tokens, proporcionando así una base de seguridad sólida que controla el acceso del usuario. Paso a paso, agregamos rutas y controladores específicos para el registro y el inicio de sesión, los cuales permiten que Laravel emita tokens que nuestros usuarios puedan usar para acceder a la aplicación de forma segura. Luego, en el proyecto Ionic, creamos las vistas para el registro e inicio de sesión, integrando el servicio HTTP en Angular para gestionar las peticiones al backend y almacenar el token en localStorage. Este almacenamiento local facilita que el token esté accesible durante la sesión del usuario, lo cual es clave para mantener una experiencia de usuario fluida y continua.
Una vez que recibimos el token se estableció el sistema de autenticación y la «actualización» de tokens en Laravel, el segundo objetivo del tutorial se enfocó en cómo usar el token para asegurar la aplicación móvil y proteger vistas específicas en Ionic. Desde la implementación de las cabeceras HTTP con el token de acceso hasta la creación de métodos en el servicio para validar el token y cerrar sesión, avanzamos en la creación de una lógica robusta de autenticación. Estos pasos permiten que cada solicitud protegida incluya el token de autenticación, verificando la validez del usuario antes de otorgar acceso a las rutas o vistas restringidas. Para ilustrar este flujo, agregamos un ejemplo de vistas como HomePage, Profile, y UpdateProfilePage, cada una configurada para exigir autenticación y redirigir a los usuarios no autenticados a la pantalla de inicio de sesión.
Al integrar estas funcionalidades en Ionic, logramos una aplicación que no solo ofrece acceso seguro mediante el inicio de sesión y registro, sino que también asegura que las vistas y funciones sensibles solo estén disponibles para usuarios autenticados. Al final de este recorrido, tienes una aplicación móvil donde las credenciales del usuario se verifican en cada punto de acceso crítico, proporcionando así una experiencia segura y profesional. Además, el uso de localStorage para almacenar el token y su integración con los servicios HTTP en Angular permite una solución eficiente, manejable y segura para futuras expansiones de la aplicación.
En conjunto, estos dos tutoriales permiten que cualquier desarrollador, sin importar su nivel de experiencia, pueda construir una aplicación segura que combina la flexibilidad de Ionic con la solidez de Laravel Sanctum. Este proceso ha abarcado desde la configuración inicial de proyectos en blanco hasta la creación de una estructura de seguridad avanzada que protege vistas específicas y garantiza la validez de la sesión en tiempo real. Al seguir esta serie completa, estás en camino de crear aplicaciones móviles seguras y eficientes, equipadas para satisfacer tanto a usuarios como a administradores con un sistema de autenticación moderno y adaptable.
