[Link]
ly/3MQ4KVi
1. Crearemos el API REST sobre el proyecto de SiSChampions2022
[Link]
[Link]
2. Trabajaremos sobre la tabla schools
3. CRUD API REST
-Creamos un controlador:
Si queremos agregar los métodos usamos --resource
-En routes/[Link]
Podemos ver la lista de rutas con: php artisan route:list
-Creamos un form request para las validaciones POST
-1-
[Link]
- En app/Http/Controllers/[Link]
4. Probando los servicios con POSTMAN
Petición GET
-2-
[Link]
Petición POST
Es necesario configurar como $fillable o $guarded en el modelo para inserciones
masivas
-3-
[Link]
Petición PUT
Petición Delete
*Actividad implemente los servicios para la tabla places
5. CREAMOS PROYECTO ANGULAR
Verificar que se tiene instalado Node y el cliente de angular
npm install @angular/cli -g
Creamos los componentes:
-4-
[Link]
Creamos el servicio
Creamos el modelo
6. LISTAR
Primero an [Link] agregar las librerías que usaremos
En la class model school
En el servicio:
Inyectamos Http para usar los métodos get, post put y delete
Declaramos la base url del rest api
Creamos el método para obtener la lista
En [Link]
Creamos una variable para obtener la lista del servicio y pasar al template
y también inyectamos el servicio usando el constructor
-5-
[Link]
Creamos los métodos para obtener la lista del servicio
El método onOninit() se ejecuta automáticamente al cargar el template
En el template [Link]
<div class="container wrapper">
<div class="row">
<!-- table -->
<div class="col-md-12">
<div class="inner">
<h3>Escuelas Profesionales</h3>
<a class="btn btn-primary text-white add" routerLink="add-school">
<i class="fas fa-user-plus"></i> Agregar
</a>
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Nombre</th>
<th scope="col">Fecha registro</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of schoolList">
<th scope="row">{{[Link]}}</th>
<td>{{[Link]}}</td>
<td>{{item.created_at}}</td>
<td>
<button type="button" class="btn btn-success btn-sm move-right"
[routerLink]="['/edit-issue/', [Link]]">Edit</button>
<button type="button" class="btn btn-danger btn-sm"
(click)="deleteSchool([Link])">Remove</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
-6-
[Link]
7. CREAR
En el servicio necesitamos una variable que contenga el objeto school
Declaramos el encabezado que pasara juntamente con el http post
Creamos el método
En [Link]
Inyectamos las dependencias
Creamos los métodos para enviar el formulario al servicio y limpiar el formulario
En [Link]
<div class="card mt-5">
<div class="card-body">
<h4 class="text-center">Registro de Escuela profesional</h4>
<form #schoolForm="ngForm" (ngSubmit)="submitForm(schoolForm)">
<input type="hidden" name="id" [(ngModel)]="[Link]">
<div class="form-group mb-3">
<input type="text" class="form-control" name="name"
[(ngModel)]="[Link]"
placeholder="Nombres">
</div>
<div class="form-group ">
<button class="btn btn-primary me-2" type="submit">
<i class="fas fa-plus-circle" ></i> Agregar
</button>
<button class="btn btn-secondary me-2" type="reset" (click)="resetForm(schoolForm)">
<i class="fas fa-sync-alt"></i> Resetear
</button>
<button class="btn btn-secondary" type="button" routerLink="/">
-7-
[Link]
<i class="fas fa-hand-point-left"></i> Cancelar
</button>
</div>
</form>
</div>
</div>
8. EDITAR
En el servicio
En [Link]
En [Link]
En el botón editar
En [Link]
9. ELIMINAR
10. SEGURIDAD CON JWT
[Link]
composer require tymon/jwt-auth:dev-develop --prefer-source
-8-
[Link]
Agregamos el provider en: config/[Link]
Tymon\JWTAuth\Providers\LaravelServiceProvider::class,
Publicamos la configuración, puede ser en forma directa o seleccionando el provider
a publicar:
php artisan vendor:publish --provider="Tymon\JWTAuth\Providers\
LaravelServiceProvider"
Generamos una clave secreta
php artisan jwt:secret
La clave secreta se agrega al final del archivo .env, que juntamente con el archivo en
config/[Link] que se creó servirán para firmar los tokens.
Cambiar o agregar la forma de autenticación, en config/[Link]
-9-
[Link]
'api' => [
'driver' => 'jwt',
'provider' => 'users',
],
En app/Models/[Link]
public function getJWTIdentifier(){
return $this->getKey();
}
public function getJWTCustomClaims(){
return [];
}
El primer método devuelve el identificador del JWT, el segundo define un arreglo
para almacenar Claims del JWT
11. GESTIÓN DE USUARIOS Y ACCESOS
Creamos un controlador:
php artisan make:controller AuthController
En routes/[Link], definimos las rutas
Route::group(['middleware' => 'api','prefix' => 'auth'], function ($router) {
-10-
[Link]
Route::post('login',[AuthController::class,'login']);
Route::post('logout',[AuthController::class,'logout']);
Route::post('refresh',[AuthController::class,'refresh']);
Route::post('register',[AuthController::class,'register']);
Route::get('me',[AuthController::class,'me']);
});
Codificamos los métodos en el controlador
[Link]
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Validator;
use App\Models\User;
class AuthController extends Controller{
public function __construct(){
$this->middleware('auth:api', ['except' => ['login','register']]);
}
public function login(){
$credentials = request(['email', 'password']);
if (! $token = auth()->attempt($credentials)) {
return response()->json(['error' => 'Unauthorized'], 401);
}
return $this->respondWithToken($token);
}
public function me(){
return response()->json(auth()->user());
}
public function logout(){
auth()->logout();
return response()->json(['message' => 'Successfully logged out']);
}
public function refresh(){
return $this->respondWithToken(auth()->refresh());
}
protected function respondWithToken($token){
return response()->json([
'access_token' => $token,
'token_type' => 'bearer',
'expires_in' => auth()->factory()->getTTL() * 60
]);
}
public function register(Request $request){
$validator=Validator::make($request->all(),[
'name'=>'required',
'email'=>'required|string|email|max:100|unique:users',
'password'=>'required|string|min:6'
]);
-11-
[Link]
if($validator->fails()){
return response()->json($validator->errors()->toJson(),400);
}
$user=User::create([
'name' => $request->name,
'email' => $request->email,
'password' => bcrypt($request->password)
]);
return response()->json([
'message'=>'User successfully registered',
'user'=>$user
],201);
}
}
Probamos con postman
a. Crear usuario
b. Loguearse
-12-
[Link]
Si el usuario existe en la base de datos nos devuelve el token, tipo de token y tipo de
expiración
c. Accedemos a la ruta de perfil de usuario que está protegida
Pasamos en Authorization el tipo de token bear y copiamos el token generado al loguearse
y nos devuelve los datos del usuario.
12. LOGIN EN ANGULAR CON JWT
En el backend:
En [Link], agregar el constructor para bloquear el acceso
public function __construct(){
$this->middleware('auth:api');
}
Podemos agregar: $this->middleware('auth:api', ['except' => ['login','register']]);
-13-
[Link]
Agregamos a las rutas públicas dentro del middleware
EN EL FRONTEND
Creamos los componentes:
ng g component login/login
ng g component components/dashboard
Creamos un servicio:
ng g service services/auth
En [Link]
API="[Link]
loginEmail(email:string, pass:string){
return [Link]([Link]+"/login",{ email:email,password:pass });
}
logout() :void {
[Link]('isLoggedIn','false');
[Link]('token');
}
En [Link]
public email:string="";
public password:string="";
onSubmitLogin(){
[Link]([Link],[Link]).subscribe((token:any)=>{
[Link](token.access_token);
[Link]('isLoggedIn',"true");
[Link]('token', token.access_token);
//[Link]('Bienvenido: '+[Link]);
[Link](['/dashboard']);
},err=>{
[Link]("error: "+err);
}
);
}
En [Link]
<main class="form-signin text-center mt-5">
<form (submit)="onSubmitLogin()">
<img class="mb-4" src="assets/[Link]" alt="" width="72" height="57">
<h1 class="h3 mb-3 fw-normal">Please sign in</h1>
<div class="form-floating">
<input type="email" class="form-control" name="email" [(ngModel)]="email"
-14-
[Link]
placeholder="name@[Link]">
<label for="floatingInput">Email address</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" name="password" [(ngModel)]="password"
placeholder="Password">
<label for="floatingPassword">Password</label>
</div>
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="w-100 btn btn-lg btn-primary" type="submit">Sign in</button>
<p class="mt-5 mb-3 text-muted">© 2017–2021</p>
</form>
</main>
En [Link]
En [Link], agregamos el botón de logout
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link btn btn-secondary ms-4" (click)="logout()"><i class="fas fa-sign-out-alt"></i>
Logout</a>
</li>
</ul>
En [Link]
logout() {
[Link]();
[Link](['/']);
}
Protegemos el listado de escuelas con el JWT
En [Link], pasamos el JWT que se genera y captura en el login
reqHeader=new HttpHeaders({
'Content-Type':'aplication/json',
'Authorization':'bearer'+[Link]('token')
});
constructor(private http:HttpClient) { }
baseurl='[Link]
//metodo GET
GetSchools():Observable<School>{
return [Link]<School>([Link]+'schools/',{headers:[Link]});
}
13. GUARDS
-15-
[Link]
Creamos un guard: ng g guard guards/auth
En [Link], Agregamos el siguiente metodo
isLoggedIn(){
let status = false; //No se actuliza el inLogin a true
if ([Link]('isLoggedIn') == "true") {
status = true;
}else {
status = false;
}
return status;
}
En guards/[Link]
constructor(private router:Router, private authservice:AuthService) { }
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
if ([Link]()) {
return true;
}
// navigate to login page as user is not authenticated
[Link](['/']);
return false;
}
14.
-16-
