This is a project for testing and learning Laravel+angular.
Features:
Based on Udemy course for JWT authentication Github - Udemy Course
Created by: Daniel A Montoya
Github: Laravel+angular
Web: www.montolla.tk
The users module has a complete CRUD so you can create (singup), read (login), update (edit) and delete (remove) the users from the Frontend
At the backend, you have the necessary API calls for the CRUD and also the JWT token handle embedded.
Some API calls to the backend needs authorization using JWT token (bearer)
Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC8xMjcuMC4wLjE6ODAwMFwvYXBpXC9sb2dpbiIsImlhdCI6MTYyOTMwMzI4NSwiZXhwIjoxNjI5MzA2ODg1LCJuYmYiOjE2MjkzMDMyODUsImp0aSI6IkZkZVVEU1E4OFQ4ZmNBaTEiLCJzdWIiOjEsInBydiI6IjIzYmQ1Yzg5NDlmNjAwYWRiMzllNzAxYzQwMDg3MmRiN2E1OTc2ZjcifQ._lQmy6fRkUeVUD6nA2Kuf_rk_dmo1WLd1XkwdiooksI
Decoded with https://jwt.io
Header: ALGORITHM & TOKEN TYPE
{ "typ": "JWT", "alg": "HS256" }
PAYLOAD: DATA
{ "iss": "http://127.0.0.1:8000/api/login", "iat": 1629303285, "exp": 1629306885, "nbf": 1629303285, "jti": "FdeUDSQ88T8fcAi1", "sub": 1, "prv": "23bd5c8949f600adb39e701c400872db7a5976f7" }
VERIFY SIGNATURE
HMACSHA256( base64UrlEncode(header) + "." + base64UrlEncode(payload), your-256-bit-secret ) secret base64 encoded
POST /api/signup Host: 127.0.0.1:8000 Content-Type: application/json Accept: application/json Authorization: Bearer Body: { "name":"Pepe", "phone":"123", "movil":"897", "type":"Employee", "email":"pepe@montolla.tk", "password":"pepe", "password_confirmation":"pepe"} Response: { "access_token": "", "token_type": "bearer", "expires_in": 3600, "user": "Pepe" }
POST /api/login Host: 127.0.0.1:8000 Content-Type: application/json accept: application/json body: { "email":"montolla@montolla.tk", "password":"montolla" } Response: { "access_token": "", "token_type": "bearer", "expires_in": 3600, "user": "montolla" }
POST /api/logout Host: 127.0.0.1:8000 Content-Type: application/json Accept: application/json Authorization: Bearer Body: Response: { "message": "Successfully logged out" }
POST /api/me Host: 127.0.0.1:8000 Content-Type: application/json Accept: application/json Authorization: Bearer Body: Response: { "id": 2, "name": "Pepe", "email": "pepe@montolla.tk", "email_verified_at": null, "created_at": "2021-08-18T15:27:35.000000Z", "updated_at": "2021-08-18T15:27:35.000000Z", "phone": "123", "movil": "897", "type": "Employee", "photo": null }
POST /api/retrieveCategories Host: 127.0.0.1:8000 Content-Type: application/json Accept: application/json Authorization: Bearer Body: Response: [ { "id": 1, "name": "asdf2", "description": "11112", "created_at": "2021-08-18T13:29:12.000000Z", "updated_at": "2021-08-18T13:29:18.000000Z" } ]In order to use rest password functionality, you need to set the email server first with this settings:
/** * Use this service to test http://mailtrap.io/..... * Over .env set this settings * MAIL_HOST=smtp.mailtrap.io * MAIL_USERNAME=357f3605c3eed9 * MAIL_PASSWORD=a424605aaff236 * MAIL_ENCRYPTION=tls * MAIL_FROM_ADDRESS="sysadmin@Laravel_plus_angular.io" */
It was design on such was that the backend is located at http://127.0.0.1:8000 and the frontend at http://localhost:4200/ but this last one it is optional.
Also, that the backend server has CORS properly setup so the frontend can call it for API consume...
composer install composer updatephp artisan key:generate php artisan jwt:secret php artisan cache:clear php artisan config:clear
php artisan migrate php artisan db:seed
php artisan serve
npm install -g @angular/cli npm installng update ng serve
This project was generated with Angular CLI version 11.1.1.
Run ng serve
for a dev server. Navigate to http://localhost:4200/
. The app will automatically reload if you change any of the source files.
Run ng generate component component-name
to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module
.
Run ng build
to build the project. The build artifacts will be stored in the dist/
directory. Use the --prod
flag for a production build.
Run ng test
to execute the unit tests via Karma.
Run ng e2e
to execute the end-to-end tests via Protractor.
To get more help on the Angular CLI use ng help
or go check out the Angular CLI Overview and Command Reference page.
Thank you for considering contributing to the Laravel framework! The contribution guide can be found in the Laravel documentation.
In order to ensure that the Laravel community is welcoming to all, please review and abide by the Code of Conduct.
If you discover a security vulnerability within Laravel, please send an e-mail to Taylor Otwell via taylor@laravel.com. All security vulnerabilities will be promptly addressed.
The Laravel framework is open-sourced software licensed under the MIT license.