Comment ajouter une authentification utilisateur à l'aide de Devise (Bootstrap dans Rails 7)

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 les rails guide.
• Node.js : Installer Node.js pour gérer le pipeline d'actifs et exécuter du code JavaScript.
• 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 authApp dans un répertoire authApp . Ouvrez ce répertoire dans votre éditeur de texte préféré.

• 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 http://127.0.0.1:3000/ dans votre navigateur pour accéder à la page d'accueil de Rails.

É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 routes.rb dans le dossier 'config' en ajoutant la ligne suivante : root 'home#index'

• Dans le répertoire app/views/home , vous trouverez un nouveau fichier appelé index.html.erb . Cette vue contiendra le code HTML de votre page de destination.

• Redémarrez le serveur et vérifiez l' hôte local dans votre navigateur Web pour afficher votre page de destination nouvellement créée.

Étape 3 : Installer et configurer Bootstrap

• Dans cette section, nous utiliserons import maps , qui charge JS. Tout d'abord, vérifiez si vous avez installé des cartes d'importation en exécutant cat config/importmap.rb . Si vous ne le faites pas, exécutez rails importmap:install
• Ensuite, ajoutez Bootstrap 5 JS à Rails via des cartes d'importation : $ bin/importmap pin bootstrap . Cela ajoute JS, bootstrap et popperjs à config/importmap.rb .
• Importez Bootstrap dans app/javascript/application.js en utilisant import 'bootstrap'; .
• Ajoutez gem 'bootstrap', '~> 5.1.3' à votre Gemfile et lancez bundle install .
• Dans app/assets/stylesheets/application.css , importez Bootstrap en utilisant @import "bootstrap"; et renommez le fichier en application.scss .
• Assurez-vous que votre fichier app/views/layouts/application.html.erb contient :

 <%= 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 bundle install pour installer Devise.

• Exécutez rails g devise:install pour configurer Devise dans votre projet. Cela génère plusieurs fichiers de démarrage pour Devise et fournit des instructions dans le terminal.

• Décommentez la ligne config.navigational_formats = ['*/*', :html, :turbo_stream] dans le fichier devise.rb . 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 undefined method user_url se produira.

• Ouvrez app/layouts/applications.html.erb et ajoutez les lignes suivantes pour les messages de notification et d'alerte :

 <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 rails g devise user dans le terminal. Cela générera les fichiers et la configuration nécessaires à la mise en œuvre de l'authentification des utilisateurs.

• 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 à http://localhost:3000/users/sign_up 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.

  
  

• Accédez au fichier index.html.erb et ajoutez les lignes de code suivantes :

 <% 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. user_signed_in est une méthode d'assistance fournie par Devise qui renvoie true si l'utilisateur actuel est connecté et false sinon.

• 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.