Implémentez la connexion, l'enregistrement des utilisateurs et l'authentification à deux facteurs avec Docker x Laravel 8 Jetstream
Laravel Jetstream est un nouveau package disponible auprès de Laravel8 et est le successeur de Laravel UI utilisé avant Laravel7.
Caractéristiques de Laravel Jetstream
--Fonction de connexion --Fonction d'enregistrement de l'utilisateur --Vérification du courrier
- Authentification à deux facteurs --Gestion de session
- Prise en charge de l'API par Laravel Sanctum --Gestion d'équipe
Fournit la fonctionnalité ci-dessus.
Caractéristiques de Laravel Jetstream
Jetstream est conçu en utilisant Tailwind CSS. En tant que modèle, Livewire ou [Inertia](https://jetstream.laravel.com/1.x/stacks/inertia. html) peut être sélectionné.
--Livewire est principalement destiné à ceux qui écrivent en Blade (SEO, OGP requis) --L'inertie est principalement destinée aux personnes qui écrivent dans Vue (SPA)
environnement
- PHP: 7.4.4
- Laravel: 8.1.0
- Node: 14.2.0
- Yarn: 1.22.4
- Laravel Jetstream: 0.6.0
Veuillez vous référer à cet article et au référentiel comme environnement.
- Créez l'environnement de développement Laravel le plus puissant à l'aide de Docker [nouvelle édition]
- https://github.com/ucan-lab/docker-laravel
$ git clone [email protected]:ucan-lab/docker-laravel.git
$ cd docker-laravel
$ make create-project
http://127.0.0.1
Si vous souhaitez vérifier le fonctionnement du courrier de réinitialisation de mot de passe, vous pouvez le vérifier en ajoutant un conteneur de courrier dans l'article suivant.
Installation de Livewire (Blade)
$ make app
$ composer require laravel/jetstream
$ php artisan jetstream:install livewire
$ php artisan migrate
$ exit
$ make web
$ yarn install
$ yarn dev
$ exit
http://127.0.0.1
Si l'écran de bienvenue s'affiche, c'est ok
Remarque: le fichier Livewire diff
$ git status -s
M .env.example
M app/Http/Kernel.php
M app/Models/User.php
M app/Providers/RouteServiceProvider.php
M composer.json
M composer.lock
M config/app.php
M config/session.php
M database/migrations/2014_10_12_000000_create_users_table.php
M package.json
M resources/css/app.css
M resources/views/welcome.blade.php
M routes/api.php
M routes/web.php
M webpack.mix.js
?? app/Actions/Fortify/CreateNewUser.php
?? app/Actions/Fortify/PasswordValidationRules.php
?? app/Actions/Fortify/ResetUserPassword.php
?? app/Actions/Fortify/UpdateUserPassword.php
?? app/Actions/Fortify/UpdateUserProfileInformation.php
?? app/Actions/Jetstream/DeleteUser.php
?? app/Providers/FortifyServiceProvider.php
?? app/Providers/JetstreamServiceProvider.php
?? app/View/Components/AppLayout.php
?? app/View/Components/GuestLayout.php
?? config/fortify.php
?? config/jetstream.php
?? config/sanctum.php
?? database/migrations/2014_10_12_200000_add_two_factor_columns_to_users_table.php
?? database/migrations/2019_12_14_000001_create_personal_access_tokens_table.php
?? database/migrations/2020_09_11_191956_create_sessions_table.php
?? public/css/app.css
?? resources/views/api/api-token-manager.blade.php
?? resources/views/api/index.blade.php
?? resources/views/auth/forgot-password.blade.php
?? resources/views/auth/login.blade.php
?? resources/views/auth/register.blade.php
?? resources/views/auth/reset-password.blade.php
?? resources/views/auth/two-factor-challenge.blade.php
?? resources/views/auth/verify-email.blade.php
?? resources/views/dashboard.blade.php
?? resources/views/layouts/app.blade.php
?? resources/views/layouts/guest.blade.php
?? resources/views/profile/delete-user-form.blade.php
?? resources/views/profile/logout-other-browser-sessions-form.blade.php
?? resources/views/profile/show.blade.php
?? resources/views/profile/two-factor-authentication-form.blade.php
?? resources/views/profile/update-password-form.blade.php
?? resources/views/profile/update-profile-information-form.blade.php
?? tailwind.config.js
Installation d'inertie (Vue)
$ make app
$ composer require laravel/jetstream
$ php artisan jetstream:install inertia --teams
$ php artisan migrate
$ exit
$ make web
$ yarn install
$ yarn dev
$ exit
http://127.0.0.1
Si l'écran de bienvenue s'affiche, c'est ok
Remarque: fichier d'inertie diff
$ git status -s
M backend/.env.example
M backend/app/Http/Kernel.php
M backend/app/Models/User.php
M backend/app/Providers/AuthServiceProvider.php
M backend/app/Providers/RouteServiceProvider.php
M backend/composer.json
M backend/composer.lock
M backend/config/app.php
M backend/config/session.php
M backend/database/migrations/2014_10_12_000000_create_users_table.php
M backend/package.json
M backend/resources/css/app.css
M backend/resources/js/app.js
M backend/resources/views/welcome.blade.php
M backend/routes/api.php
M backend/routes/web.php
M backend/webpack.mix.js
?? backend/app/Actions/Fortify/CreateNewUser.php
?? backend/app/Actions/Fortify/PasswordValidationRules.php
?? backend/app/Actions/Fortify/ResetUserPassword.php
?? backend/app/Actions/Fortify/UpdateUserPassword.php
?? backend/app/Actions/Fortify/UpdateUserProfileInformation.php
?? backend/app/Actions/Jetstream/AddTeamMember.php
?? backend/app/Actions/Jetstream/CreateTeam.php
?? backend/app/Actions/Jetstream/DeleteTeam.php
?? backend/app/Actions/Jetstream/DeleteUser.php
?? backend/app/Actions/Jetstream/UpdateTeamName.php
?? backend/app/Models/Membership.php
?? backend/app/Models/Team.php
?? backend/app/Policies/TeamPolicy.php
?? backend/app/Providers/FortifyServiceProvider.php
?? backend/app/Providers/JetstreamServiceProvider.php
?? backend/app/View/Components/GuestLayout.php
?? backend/config/fortify.php
?? backend/config/jetstream.php
?? backend/config/sanctum.php
?? backend/database/migrations/2014_10_12_200000_add_two_factor_columns_to_users_table.php
?? backend/database/migrations/2019_12_14_000001_create_personal_access_tokens_table.php
?? backend/database/migrations/2020_05_21_100000_create_teams_table.php
?? backend/database/migrations/2020_05_21_200000_create_team_user_table.php
?? backend/database/migrations/2020_09_11_221935_create_sessions_table.php
?? backend/public/css/app.css
?? backend/resources/js/Jetstream/ActionMessage.vue
?? backend/resources/js/Jetstream/ActionSection.vue
?? backend/resources/js/Jetstream/ApplicationLogo.vue
?? backend/resources/js/Jetstream/ApplicationMark.vue
?? backend/resources/js/Jetstream/Button.vue
?? backend/resources/js/Jetstream/ConfirmationModal.vue
?? backend/resources/js/Jetstream/DangerButton.vue
?? backend/resources/js/Jetstream/DialogModal.vue
?? backend/resources/js/Jetstream/Dropdown.vue
?? backend/resources/js/Jetstream/DropdownLink.vue
?? backend/resources/js/Jetstream/FormSection.vue
?? backend/resources/js/Jetstream/Input.vue
?? backend/resources/js/Jetstream/InputError.vue
?? backend/resources/js/Jetstream/Label.vue
?? backend/resources/js/Jetstream/Modal.vue
?? backend/resources/js/Jetstream/NavLink.vue
?? backend/resources/js/Jetstream/ResponsiveNavLink.vue
?? backend/resources/js/Jetstream/SecondaryButton.vue
?? backend/resources/js/Jetstream/SectionBorder.vue
?? backend/resources/js/Jetstream/SectionTitle.vue
?? backend/resources/js/Jetstream/SwitchableTeam.vue
?? backend/resources/js/Jetstream/Welcome.vue
?? backend/resources/js/Layouts/AppLayout.vue
?? backend/resources/js/Mixins/InteractsWithErrorBags.js
?? backend/resources/js/Pages/API/ApiTokenManager.vue
?? backend/resources/js/Pages/API/Index.vue
?? backend/resources/js/Pages/Dashboard.vue
?? backend/resources/js/Pages/Profile/DeleteUserForm.vue
?? backend/resources/js/Pages/Profile/LogoutOtherBrowserSessionsForm.vue
?? backend/resources/js/Pages/Profile/Show.vue
?? backend/resources/js/Pages/Profile/TwoFactorAuthenticationForm.vue
?? backend/resources/js/Pages/Profile/UpdatePasswordForm.vue
?? backend/resources/js/Pages/Profile/UpdateProfileInformationForm.vue
?? backend/resources/js/Pages/Teams/Create.vue
?? backend/resources/js/Pages/Teams/CreateTeamForm.vue
?? backend/resources/js/Pages/Teams/DeleteTeamForm.vue
?? backend/resources/js/Pages/Teams/Show.vue
?? backend/resources/js/Pages/Teams/TeamMemberManager.vue
?? backend/resources/js/Pages/Teams/UpdateTeamNameForm.vue
?? backend/resources/views/app.blade.php
?? backend/resources/views/auth/forgot-password.blade.php
?? backend/resources/views/auth/login.blade.php
?? backend/resources/views/auth/register.blade.php
?? backend/resources/views/auth/reset-password.blade.php
?? backend/resources/views/auth/two-factor-challenge.blade.php
?? backend/resources/views/auth/verify-email.blade.php
?? backend/resources/views/layouts/guest.blade.php
?? backend/tailwind.config.js
Capture d'écran (commune à Livewire et Inertia)
welcome
En installant Jetstream, les menus de «Login» et «Register» sont ajoutés en haut à droite.
register
Ceci est l'écran d'enregistrement de l'utilisateur.
dashboard
Lorsque vous vous inscrivez en tant qu'utilisateur, vous serez connecté et vous serez redirigé vers le tableau de bord.
profile
api tokens
login
password reset
Screen Shot(Inertia)
dashboard
team settings
create new team
Authentification à deux facteurs
Si vous activez l'authentification à deux facteurs à partir de la page de profil, vous verrez le code QR. L'authentification à deux facteurs peut être effectuée en installant Google Authenticator et en lisant le code QR avec l'appareil photo.
Parcourez la page de connexion et vous verrez une page demandant un code d'autorisation.
J'ai peur de pouvoir faire ça sans code ...
Recommended Posts