L'authentification des utilisateurs est une fonctionnalité de sécurité essentielle pour les applications Web, en particulier celles qui traitent des données utilisateur sensibles ou fournissent un accès restreint à certaines fonctionnalités. En demandant aux utilisateurs de s'authentifier avant d'accéder à l'application, les développeurs peuvent s'assurer que seuls les utilisateurs autorisés peuvent afficher ou modifier les données et les fonctionnalités de l'application. Qu'est-ce que Devise ? Devise est un Ruby Gem qui fournit des fonctionnalités d'authentification et d'autorisation des utilisateurs pour les applications Rails. Il réduit le processus d'ajout de fonctionnalités d'inscription, de connexion et de déconnexion à votre application sans avoir à tout écrire à partir de zéro. Il possède des fonctionnalités intégrées telles que la réinitialisation du mot de passe et la confirmation du compte. Il prend en charge diverses stratégies d'authentification telles que l'e-mail et le mot de passe, OAuth, OpenID, etc. Devise a une documentation détaillée qui couvre à la fois les fonctionnalités de base et avancées. Dans ce didacticiel, nous allons créer une application Rails simple avec Devise qui permet aux utilisateurs de créer des comptes, de se connecter et de se déconnecter de leurs comptes. Nous verrons également comment ajouter du style à l'application à l'aide de Bootstrap. Conditions préalables Avant de commencer ce didacticiel, vous devez avoir une bonne compréhension des bases de Ruby et de Rails. De plus, vous devez avoir les logiciels suivants installés sur votre ordinateur : Ruby : Si vous n'avez pas installé Ruby sur votre machine, vous pouvez télécharger la dernière version depuis le site officiel . Site Web Ruby Ruby on Rails : vous devez configurer votre environnement de développement local en suivant guide. les rails Node.js : Installer pour gérer le pipeline d'actifs et exécuter du code JavaScript. Node.js Fil SQLite3 Un éditeur de texte comme Visual Studio Code Un navigateur comme Google Chrome Nous verrons également comment utiliser Bootstrap dans Rails 7 plus tard dans le didacticiel. Étape 1 : Créer une nouvelle application Rails Pour créer une nouvelle application Rails, ouvrez un terminal dans votre répertoire préféré et exécutez la commande : rails new authApp Cela générera une nouvelle application Rails appelée dans un répertoire . Ouvrez ce répertoire dans votre éditeur de texte préféré. authApp authApp Accédez au répertoire de l'application en tapant : cd authApp Dans votre terminal, démarrez votre serveur Rails en lançant : rails server Ouvrez dans votre navigateur pour accéder à la page d'accueil de Rails. http://127.0.0.1:3000/ Étape 2 : Créer une page de destination Générez un nouveau contrôleur qui gérera la requête vers le chemin racine à l'aide de la commande : $rails generate controller home index Cela crée un nouveau contrôleur nommé `Home` avec une action `index`. Ajoutez le chemin racine au fichier dans le dossier 'config' en ajoutant la ligne suivante : routes.rb root 'home#index' Dans le répertoire , vous trouverez un nouveau fichier appelé . Cette vue contiendra le code HTML de votre page de destination. app/views/home index.html.erb Redémarrez le serveur et vérifiez l' dans votre navigateur Web pour afficher votre page de destination nouvellement créée. hôte local Étape 3 : Installer et configurer Bootstrap Dans cette section, nous utiliserons , qui charge JS. Tout d'abord, vérifiez si vous avez installé des cartes d'importation en exécutant . Si vous ne le faites pas, exécutez import maps cat config/importmap.rb rails importmap:install Ensuite, ajoutez Bootstrap 5 JS à Rails via des cartes d'importation : . Cela ajoute JS, bootstrap et popperjs à . $ bin/importmap pin bootstrap config/importmap.rb Importez Bootstrap dans en utilisant . app/javascript/application.js import 'bootstrap'; Ajoutez à votre Gemfile et lancez . gem 'bootstrap', '~> 5.1.3' bundle install Dans , importez Bootstrap en utilisant et renommez le fichier en . app/assets/stylesheets/application.css @import "bootstrap"; application.scss Assurez-vous que votre fichier contient : app/views/layouts/application.html.erb <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %> <%= javascript_importmap_tags %> Ajoutez des styles selon vos préférences dans votre fichier . app/views/home/index.html.rb Rechargez le serveur et voyez les changements. Étape 4 : Installer et configurer Devise Accédez au fichier Gemfile et ajoutez le gem Devise à l'aide de la commande : gem 'devise', github: 'heartcombo/devise', branch: 'main' Exécutez pour installer Devise. bundle install Exécutez pour configurer Devise dans votre projet. Cela génère plusieurs fichiers de démarrage pour Devise et fournit des instructions dans le terminal. rails g devise:install Décommentez la ligne dans le fichier . Cela ajoute turbo_stream en tant que format de navigation, qui est requis pour que Devise 4.9.2 fonctionne avec Rails 7. Si vous ne le faites pas, une erreur se produira. config.navigational_formats = ['*/*', :html, :turbo_stream] devise.rb undefined method user_url Ouvrez et ajoutez les lignes suivantes pour les messages de notification et d'alerte : app/layouts/applications.html.erb <p class="notice"><%= notice %></p> <p class="alert"><%= alert %></p> Étape 5 : Création d'un modèle utilisateur avec Devise Pour créer un modèle utilisateur avec Devise, lancez dans le terminal. Cela générera les fichiers et la configuration nécessaires à la mise en œuvre de l'authentification des utilisateurs. rails g devise user Créez la table utilisateur en exécutant la commande de migration : . rails db:migrate Redémarrez le serveur pour charger le nouveau fichier d'initialisation Devise et configurez tout pour que l'authentification des utilisateurs fonctionne. Accédez à dans votre navigateur pour accéder au formulaire d'inscription afin de créer un compte en entrant un e-mail et un mot de passe. http://localhost:3000/users/sign_up Accédez au fichier et ajoutez les lignes de code suivantes : index.html.erb <% if user_signed_in? %> <p>Welcome, <%= current_user.email %>!</p> <%= link_to "Sign out", destroy_user_session_path, method: :delete %> <% else %> <%= link_to "Sign in", new_user_session_path %> <% end %> Ces lignes créent des liens d'inscription, de connexion et de déconnexion pour votre application. est une méthode d'assistance fournie par Devise qui renvoie true si l'utilisateur actuel est connecté et false sinon. user_signed_in Actualisez votre page dans le navigateur pour examiner les modifications. Pour consulter les modifications, il vous suffit d'actualiser la page dans votre navigateur. Si vous n'êtes pas encore connecté, un bouton de connexion sera visible à l'écran. Cliquez dessus et terminez le processus d'inscription. Une fois que vous vous êtes inscrit avec succès, vous serez dirigé vers la page d'accueil où vous pourrez voir l'adresse e-mail de l'utilisateur actuellement connecté, un message de bienvenue et un bouton de déconnexion. En suivant ces étapes, vous avez réussi à intégrer la gemme Devise et à configurer l'authentification des utilisateurs pour votre application. Conclusion Dans ce didacticiel, nous avons utilisé Devise pour ajouter l'authentification des utilisateurs à notre application Rails. Nous avons développé une application où les utilisateurs peuvent créer des comptes, s'inscrire et se déconnecter. Nous avons également intégré Bootstrap pour améliorer l'apparence du projet. Pour approfondir vos connaissances sur Devise et explorer d'autres aides et méthodes, reportez-vous au fichier README sur le référentiel Devise GitHub.
