Comment configurer l’authentification utilisateur avec Devise dans une application Rails 7

L’auteur a sélectionné Girls Who Code pour recevoir un don dans le cadre du programme Write for DOnations.

Introduction

La gemme Devise est une solution d’authentification pour les applications Ruby on Rails; elle vous aide à configurer l’authentification utilisateur prête pour la production dans vos projets sans avoir à tout faire vous-même. Devise propose de nombreuses fonctionnalités utiles telles que la gestion des sessions utilisateur et l’ajout de la prise en charge de la connexion avec des services tiers via OAuth en utilisant la gemme OmniAuth. Devise est également livré avec des modules intégrés pour des fonctionnalités telles que la réinitialisation des mots de passe oubliés, le suivi du nombre de connexions et des horodatages, la définition de délais d’expiration, le verrouillage des comptes, etc.

Devise rend l’authentification utilisateur aussi simple que l’initialisation de la gemme et la création d’un modèle User avec les fonctionnalités requises. Si vous deviez créer une authentification utilisateur à partir de zéro, vous devriez écrire du code et des tests pour toutes les fonctionnalités souhaitées, et gérer tous les cas particuliers dans la gestion des sessions, le stockage des cookies et la sécurisation des données. En utilisant la gemme Devise, vous évitez de tout faire vous-même et pouvez vous concentrer sur la construction de votre application à la place.

Dans ce tutoriel, vous créerez une application web minimale avec Rails et installerez Devise, ce qui permettra aux utilisateurs de créer des comptes, de se connecter et de se déconnecter de leurs comptes.

Prérequis

Pour accomplir ce tutoriel, vous aurez besoin de :

• A local development environment for Ruby on Rails. For Linux, you can follow our tutorial How To Install Ruby on Rails with rvm on Ubuntu 20.04 or use the rvm product docs for installing on Mac or Windows. You can also refer to the Ruby project docs to install Ruby directly in your system. To install the Rails gem, you can use the official Rails documentation. The Devise gem requires Ruby version 2.1.0 or greater; this tutorial was tested using Ruby version 3.0.2 and Rails version 7.0.3.
• Node.js installé sur votre machine. Quelques fonctionnalités de Rails, telles que l’Asset Pipeline, dépendent d’un runtime JavaScript. Node.js fournit cette fonctionnalité. Pour Ubuntu, installez Node.js en utilisant le PPA officiel, comme expliqué dans l’option 2 de Comment installer Node.js sur Ubuntu 20.04. Pour Mac OS, suivez notre guide Comment installer Node.js et créer un environnement de développement local sur MacOS.
• Familiarité avec Ruby et le framework Ruby on Rails. Vous pouvez consulter les premiers tutoriels de notre série Rails on Containers, ou vous pouvez utiliser les Guides officiels de Rails.

Étape 1 — Création d’une nouvelle application Rails

Dans cette étape, vous créerez une nouvelle application Rails et l’exécuterez localement sur votre machine. Vous utiliserez l’utilitaire en ligne de commande rails pour initialiser le projet.

Exécutez la commande suivante depuis un terminal:

rails new blog

La commande rails new créera un nouveau projet Rails dans le répertoire blog, qui comprend plusieurs fichiers et dossiers générés. L’un d’entre eux est le Gemfile, qui contient les dépendances du projet. Vous configurerez le Gemfile pour utiliser Devise dans Étape 3 — Installation et configuration de Devise.

Vous pouvez ouvrir ce répertoire dans votre éditeur de texte préféré ou y accéder via le terminal:

cd blog

Pour démarrer l’application Rails, lancez le serveur de développement avec la commande rails server depuis le répertoire du projet:

bundle exec rails server

Cette commande démarrera le serveur de développement Rails. Ouvrez http://localhost:3000 dans votre navigateur pour accéder à la page d’accueil de Rails. Rails utilise le port 3000 pour exécuter l’application si vous n’avez pas fourni de numéro de port alternatif.

Vous avez maintenant initialisé une nouvelle application Rails, à laquelle vous ajouterez l’authentification utilisateur à une étape ultérieure. À l’étape suivante, vous remplacerez la page d’accueil par défaut fournie par Rails par une page d’atterrissage personnalisée, ce qui facilitera la navigation dans l’application d’exemple une fois que vous aurez ajouté Devise. Après avoir créé une nouvelle page d’atterrissage, vous ajouterez des liens pour que l’utilisateur puisse s’inscrire et se connecter à l’application.

Étape 2 — Création d’une Page d’Accueil

Maintenant que vous avez une application Rails de base, vous allez remplacer la page par défaut fournie par Rails par votre propre page d’atterrissage. Une page d’atterrissage personnalisée facilitera l’affichage des liens de connexion et d’inscription à l’URL racine de l’application. Vous ajouterez des liens pour se connecter et s'inscrire dans les étapes suivantes.

Pour créer votre page d’atterrissage, vous devrez :

• Ajoutez la route dans le fichier config/routes.rb.
• Créez un HomeController qui gérera les requêtes vers cette route.
• Créez un fichier de vue à rendre lorsque vous accédez à la route.

Commencez par ajouter le chemin racine au fichier routes.rb généré lors de la création du projet.

À l’aide de nano ou de votre éditeur de texte préféré, ouvrez le fichier config/routes.rb généré précédemment.

nano config/routes.rb

Ajoutez la ligne surlignée:

Rails.application.routes.draw do
  root to: "home#index" 
end

root to: définit quelle action du contrôleur gérera les requêtes vers le chemin racine. Dans ce cas, la route sera http://localhost:3000, qui est le port par défaut pour les applications Rails. Les requêtes vers cette route seront gérées par l’action index dans le contrôleur home. Ce fichier n’existe pas encore, vous allez donc créer le fichier app/controllers/home_controller.rb ensuite.

Enregistrez et fermez config/routes.rb. Utilisez nano, appuyez sur CTRL+X pour quitter, Y pour enregistrer et ENTER pour confirmer le nom du fichier et fermer le fichier.

Ensuite, créez le fichier app/controllers/home_controller.rb et ajoutez les lignes suivantes:

class HomeController < ApplicationController
  def index
    render
  end
end

Ceci est un HomeController de base avec une méthode index qui fait une chose : rendre le fichier de vue associé à l’action du contrôleur.

Dans ce cas, le fichier de vue sera le fichier app/views/home/index.html.erb. Vous devrez créer ce fichier ainsi que le répertoire home à l’intérieur du répertoire app/views.

Enregistrez et fermez le fichier de contrôleur home.

Ensuite, créez le répertoire home dans le répertoire app/views:

mkdir app/views/home/

Le répertoire home contiendra toutes les vues pour un contrôleur Rails particulier.

Ensuite, créez le fichier app/views/home/index.html.erb et ajoutez les lignes suivantes:

<h1>Hello DigitalOcean!</h1>

app/views/home/index.html.erb est le fichier de vue que l’action index du contrôleur Home va rendre. Il s’agit d’un fichier HTML dans lequel vous pouvez intégrer du code Ruby. Lorsque la route définie pour l’action de contrôleur particulière est déclenchée, ce fichier de vue est rendu dans le navigateur de l’utilisateur.

Enregistrez et fermez votre fichier.

Pour voir les modifications dans l’URL racine, ouvrez http://localhost:3000 dans votre navigateur (ou rafraîchissez la page si elle est déjà ouverte). La page d’accueil mise à jour sera similaire à ceci:

Vous pouvez personnaliser davantage cette page si nécessaire, mais c’est tout ce qui est nécessaire pour ce tutoriel.

Maintenant que vous avez une application Rails simple avec sa propre page d’accueil, vous allez ajouter une authentification utilisateur avec le gem Devise.

Étape 3 — Installation et configuration de Devise

Dans cette étape, vous installerez et configurerez Devise dans votre application Rails afin de pouvoir utiliser les méthodes et les assistants fournis par la gemme. Vous utiliserez la méthode user_signed_in? pour vérifier les informations de session de tout utilisateur connecté stockées dans les cookies du navigateur. Vous utiliserez également l’assistant current_user pour obtenir les détails du compte actuellement connecté. Ces deux méthodes sont intégrées à Devise et vous pouvez les utiliser directement dans votre application sans avoir à écrire de code supplémentaire. Vous pouvez en savoir plus sur ces méthodes d’assistance sur la page GitHub du projet Devise.

La première étape pour installer Devise consiste à ajouter la gemme à votre Gemfile, qui contient des informations sur toutes les dépendances requises pour exécuter votre projet Ruby. Dans ce cas, lorsque vous initialisez l’application Rails, le Gemfile généré contient déjà toutes les gemmes de base requises pour que Rails fonctionne.

Mais avant de modifier votre Gemfile, arrêtez le serveur de développement que vous avez démarré lors de la dernière étape en appuyant sur CTRL+C dans le terminal où il s’exécute.

Ensuite, ouvrez votre Gemfile pour le modifier. Pour ajouter la gemme Devise, ajoutez la ligne surlignée vers la fin du fichier, mais en dehors des groupes development et test:

# ...

# Réduit les temps de démarrage grâce à la mise en cache ; requis dans config/boot.rb
gem "bootsnap", require: false

# Utilise des variantes de stockage actives [https://guides.rubyonrails.org/active_storage_overview.html#transforming-images]
# gem "image_processing", "~> 1.2"

gem "devise" 

group :development, :test do
  # Voir https://guides.rubyonrails.org/debugging_rails_applications.html#debugging-with-the-debug-gem
  gem "debug", platforms: %i[ mri mingw x64_mingw ]
end

# ...

Enregistrez et fermez votre fichier.

Ensuite, vous installerez la nouvelle gemme ajoutée en exécutant la commande bundle install dans le terminal. À partir de votre répertoire de projet (blog), exécutez la commande suivante:

bundle install

Cette commande installera la gemme Devise dans votre projet, ce qui vous permettra d’utiliser la commande devise avec l’utilitaire en ligne de commande rails et de configurer l’authentification.

Pour configurer Devise dans votre projet, exécutez la commande du générateur:

bundle exec rails g devise:install

Le drapeau g dans la commande ci-dessus signifie generate et est utilisé pour invoquer les générateurs Rails. Les générateurs créeront des fichiers qui peuvent servir de point de départ. Vous pouvez consulter les guides Rails pour plus d’informations sur les générateurs Rails.

La commande précédente générera plusieurs fichiers, y compris le fichier d’initialisation et le fichier de localisation i18n pour Devise. Le fichier d’initialisation, expliqué en détail ci-dessous, est utilisé pour configurer Devise lors du démarrage de l’application. i18n signifie internationalisation, qui est une norme pour vous aider à exécuter votre application dans différentes langues.

À ce stade, des instructions seront également affichées dans le terminal, comme ceci:

Output
===============================================================================

Depending on your application's configuration some manual setup may be required:

  1. Ensure you have defined default url options in your environments files. Here
     is an example of default_url_options appropriate for a development environment
     in config/environments/development.rb:

       config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }

     In production, :host should be set to the actual host of your application.

     * Required for all applications. *

  2. Ensure you have defined root_url to *something* in your config/routes.rb.
     For example:

       root to: "home#index"

     * Not required for API-only Applications *

  3. Ensure you have flash messages in app/views/layouts/application.html.erb.
     For example:

       <p class="notice"><%= notice %></p>
       <p class="alert"><%= alert %></p>

     * Not required for API-only Applications *

  4. You can copy Devise views (for customization) to your app by running:

       rails g devise:views

     * Not required *

===============================================================================

Cette configuration manuelle n’est pas requise pour ce tutoriel, mais vous ajouterez ultérieurement des messages flash pour notice et alert dans cette étape.

Vous avez terminé l’installation de Devise. Ensuite, vous devrez configurer quelques éléments dans le fichier d’initialisation de Devise qui vient d’être généré.

Lorsque vous avez exécuté la commande devise:install, vous avez généré le fichier config/initializers/devise.rb, qui est le fichier d’initialisation pour Devise. Chaque fois que vous démarrez votre application Rails, Rails chargera tous les gems et plugins, puis chargera tous les fichiers d’initialisation. Vous pouvez configurer des paramètres spécifiques pour différentes parties de votre application à partir de ces fichiers d’initialisation. Tous ces fichiers d’initialisation résident dans le répertoire config/initializers/, et c’est là que le gem Devise crée également son fichier d’initialisation.

Ouvrez config/initializers/devise.rb pour l’éditer. Dans le fichier, localisez le bloc Devise.setup et ajoutez la ligne suivante en surbrillance (il peut y avoir d’autres blocs de code à l’intérieur du bloc Devise.setup, mais vous pouvez les ignorer):

Devise.setup do |config|
  # ...

  config.navigational_formats = ['*/*', :html, :turbo_stream]

  # ...
end

Cette ligne ajoute turbo_stream en tant que format de navigation. Les flux Turbo font partie de Turbo, qui vous permet d’envoyer du HTML rendu côté serveur et de rendre des pages sans utiliser beaucoup de JavaScript. Vous devez ajouter cela pour que Devise 4.8.1 fonctionne avec Rails 7; sinon, vous obtiendriez une erreur undefined method user_url.

Enregistrez et fermez le fichier.

Ensuite, vous ajouterez également les messages flash de notification et d’alerte qui ont été mis en évidence dans les instructions précédemment imprimées. Les balises alert et notice sont là où apparaîtraient des messages tels que « Mot de passe incorrect » dans l’interface utilisateur. Vous pouvez toujours implémenter des messages d’alerte personnalisés dans votre application (par exemple, si vous utilisez des intercepteurs Axios avec React comme interface frontend), mais pour ce tutoriel, vous compléterez la configuration minimale de Devise.

Ouvrez app/views/layouts/application.html.erb pour l’édition. Ajoutez les balises pour les messages "notice" et "alert" à l’intérieur de la balise body, juste au-dessus de <%= yield %>:

...
<body>
  <p class="notice"><%= notice %></p> 
  <p class="alert"><%= alert %></p> 
  <%= yield %>
</body>

Lorsque la vue est rendue dans le navigateur, le <%= yield %> bloc sera remplacé par le contenu de vos fichiers de vue. Dans votre fichier de vue, vous n’aviez que la balise p. Cette balise de rendement sera remplacée par ce contenu.

Enregistrez et fermez votre fichier.

À cette étape, vous avez installé et configuré Devise dans votre projet. À l’étape suivante, vous allez créer le modèle utilisateur pour votre application avec Devise et configurer l’authentification utilisateur.

Étape 4 — Création du modèle utilisateur avec Devise

Vous êtes maintenant prêt à générer le modèle utilisateur avec Devise, ce qui créera le fichier de modèle nécessaire et générera une migration que vous pourrez exécuter pour créer une table users dans votre application. Chaque fois que quelqu’un s’inscrit, vous devrez créer un nouvel enregistrement dans la table users de la base de données. Avec le modèle utilisateur, vous pouvez manipuler ces enregistrements de base de données à partir de votre vue frontend.

À cette étape, vous allez générer un modèle utilisateur, inspecter la configuration par défaut, puis exécuter la migration pour mettre à jour votre base de données.

Étant donné que Rails est un framework Modèles-Vues-Contrôleurs (MVC), chaque table de base de données a une classe associée, qui peut être utilisée pour travailler avec les données de la table. Dans ce cas, si vous créez une table users, vous pouvez utiliser le modèle User pour effectuer des opérations comme User.first ou User.find_by_email("[email protected]"). Vous pouvez créer ce modèle en faisant une classe normale héritée de ApplicationRecord dans Rails, mais générer un modèle utilisateur avec Devise vous donne de nombreuses méthodes que vous pouvez utiliser pour l’authentification.

Pour créer votre utilisateur Devise, exécutez la commande du générateur suivante :

bundle exec rails g devise user

La sortie suivante s’affichera à l’écran :

Output
invoke  active_record
create    db/migrate/20220908152949_devise_create_users.rb
create    app/models/user.rb
invoke    test_unit
create      test/models/user_test.rb
create      test/fixtures/users.yml
insert    app/models/user.rb
route  devise_for :users

La sortie indique que Devise a généré plusieurs fichiers, créé des tests et ajouté des routes. Le premier fichier, db/migrate/20220908152949_devise_create_users.rb, est un fichier de migration pour créer la table users dans votre base de données. Un fichier de migration Rails décrit les modifications à apporter à la base de données. Le nom de chaque migration contiendra un horodatage afin que Rails sache dans quel ordre effectuer ces modifications.

Devise a également créé le fichier modèle utilisateur (app/models/user.rb), ainsi que des tests pour celui-ci. La dernière ligne de la sortie indique qu’une route a été ajoutée au fichier config/routes.rb existant. Devise ajoute automatiquement toutes les routes telles que /users/sign_up et /users/sign_out à l’aide de l’assistant devise_for :users.

Avant d’exécuter le fichier de migration et de créer la table users dans la base de données, examinons ces fichiers générés. Cela vous aidera à comprendre la configuration que Devise a générée afin que vous sachiez ce qui se passe lorsque vous exécutez la migration.

Commencez par ouvrir le fichier de migration (db/migrate/20220908152949_devise_create_users.rb) pour examiner le code par défaut :

# frozen_string_literal: true

class DeviseCreateUsers < ActiveRecord::Migration[7.0]
  def change
    create_table :users do |t|
      ## Authentification de la base de données
      t.string :email,              null: false, default: ""
      t.string :encrypted_password, null: false, default: ""

      ## Récupérable
      t.string   :reset_password_token
      t.datetime :reset_password_sent_at

      ## Mémorisable
      t.datetime :remember_created_at

      ## Traçable
      # t.integer  :sign_in_count, default: 0, null: false
      # t.datetime :current_sign_in_at
      # t.datetime :last_sign_in_at
      # t.string   :current_sign_in_ip
      # t.string   :last_sign_in_ip

      ## Confirmable
      # t.string   :confirmation_token
      # t.datetime :confirmed_at
      # t.datetime :confirmation_sent_at
      # t.string   :unconfirmed_email # Seulement si reconfirmable est utilisé

Devise inclut de nombreuses options utiles, comme des champs pour le jeton de réinitialisation du mot de passe et l’heure d’envoi du dernier jeton, et ainsi de suite. Il y a aussi des lignes pour des fonctionnalités comme la confirmation par e-mail, le verrouillage de l’utilisateur après des tentatives de connexion échouées, et même le suivi des détails de connexion.

Étant donné que vous n’avez pas besoin de faire de modifications, fermez le fichier de migration.

Devise a également généré le fichier du modèle User. Celui-ci sera disponible dans le répertoire app/models/.

Ouvrez le fichier du modèle app/models/user.rb pour examiner le code par défaut:

class User < ApplicationRecord
# Inclure les modules Devise par défaut. D'autres modules disponibles sont :
# :confirmable, :lockable, :timeoutable, :trackable et :omniauthable
devise :database_authenticatable, :registerable,
       :recoverable, :rememberable, :validatable
end

A few options are added by Devise to configure how the user model works. The basic modules (database_authenticatable, registerable, recoverable, rememberable, and validatable) are already included. There are some additional options commented out, corresponding to the extra features you saw in the migration file. You can add these modules to the model file and configure the migration, depending on how much functionality you need in your application.

Voici ce que font les modules de base:

• database_authenticatable: Les utilisateurs peuvent s’authentifier avec un champ de login et mot de passe. Leur mot de passe chiffré sera stocké dans votre base de données.
• registerable: Les utilisateurs peuvent s’inscrire et peuvent modifier ou supprimer leurs comptes.
• recoverable: Les utilisateurs peuvent réinitialiser leur mot de passe et récupérer leur compte s’ils oublient leurs identifiants.
• rememberable: Ce module mémorise les sessions d’un utilisateur en sauvegardant les informations dans un cookie du navigateur.
• validatable: Ce module fournit des validations pour les champs d’email et de mot de passe de l’utilisateur. (Par exemple, votre application demande que le mot de passe ait au moins six caractères, même si vous n’avez défini aucune validation personnalisée dans votre modèle.)

Ces modules de base sont inclus dans le modèle User que vous venez de générer. Vous pouvez trouver une liste complète des modules fournis par Devise dans le dépôt GitHub de Devise.

Vous n’avez pas besoin d’apporter de modifications, donc fermez le fichier du modèle User.

Une autre mise à jour est que le fichier config/routes.rb a été modifié pour ajouter une ligne devise_for pour les utilisateurs :

Rails.application.routes.draw do
  devise_for :users

  root "home#index"
end

Il s’agit d’une méthode utile qui définit toutes les routes nécessaires liées à l’authentification des utilisateurs, telles que /users/sign_in, /users/sign_out, et /users/password/new. Devise prend en charge tout cela pour vous et maintient même le fichier des routes propre. Si vous souhaitez comprendre comment l’ajout de devise_for :users se traduit automatiquement par toutes ces routes, vous pouvez consulter le code source dans le dépôt GitHub de Devise.

Vous n’avez pas besoin d’apporter de modifications ici, alors fermez le fichier config/routes.rb.

Pour connaître les routes définies dans votre application, vous pouvez les répertorier en exécutant la commande suivante :

bundle exec rails routes

Cette commande affiche toutes les routes de l’application et les contrôleurs qui traitent ces routes. Dans le cas de l’authentification, toutes ces routes ont été créées par Devise, et vous n’avez pas eu besoin de les ajouter manuellement.

La sortie sera longue, mais voici un extrait montrant certaines des routes :

Les routes répertoriées dans la sortie sont celles qui ont été ajoutées par Devise lorsque vous avez inclus la ligne devise_for :users dans votre fichier de routes. Ce sont les routes pour des actions telles que connexion, inscription, réinitialisation du mot de passe, et ainsi de suite.

Maintenant que vous avez examiné les fichiers et la configuration générés par Devise, vous pouvez exécuter la migration que vous avez générée au début de cette étape avec la commande suivante :

bundle exec rails db:migrate

La commande ci-dessus appliquera toutes les modifications dans chacun des fichiers de migration à votre base de données. Les modifications doivent être apportées l’une après l’autre, comme elles sont définies dans les fichiers. Rails doit connaître la séquence dans laquelle les migrations doivent s’exécuter, c’est pourquoi les fichiers sont créés avec des horodatages dans leurs noms.

Un résultat similaire à ce qui suit s’affichera à l’écran :

Output
== 20220908152949 DeviseCreateUsers: migrating ================================
-- create_table(:users)
 -> 0.0040s
-- add_index(:users, :email, {:unique=>true})
 -> 0.0012s
-- add_index(:users, :reset_password_token, {:unique=>true})
 -> 0.0011s
== 20220908152949 DeviseCreateUsers: migrated (0.0074s) =======================

Une fois que la migration a été exécutée, votre base de données est configurée. Vous avez fait tout ce dont vous avez besoin pour configurer l’authentification des utilisateurs dans votre projet.

À ce stade, redémarrez votre serveur Rails :

bundle exec rails server

Le fichier d’initialisation mentionné précédemment est chargé uniquement lorsque Rails démarre. Vous devez redémarrer le serveur pour que Rails puisse charger le nouveau fichier d’initialisation de Devise et configurer tout pour que l’authentification des utilisateurs fonctionne.

Accédez à http://localhost:3000/users/sign_up dans votre navigateur, où vous trouverez un formulaire d’inscription pour créer un compte en saisissant un e-mail et un mot de passe. (À l’étape suivante, vous ajouterez des boutons pour s’inscrire et se connecter à la page d’accueil afin qu’il soit plus facile pour le lecteur de naviguer vers cette URL.)

Pour tester l’authentification, saisissez un e-mail de test tel que [email protected] et un mot de passe.

Une fois que vous vous inscrivez, vous serez redirigé vers la page principale, qui affiche Bonjour DigitalOcean !, ainsi qu’un message indiquant que votre inscription a réussi, comme ceci :

Cette notification de réussite de l’inscription est rendue dans la balise <p class="notice"><%= notice %></p> que vous aviez ajoutée dans le fichier application.html.erb.

À ce stade, vous avez configuré l’authentification utilisateur avec Devise dans votre projet et vous êtes inscrit avec un compte exemple. Vous avez configuré Devise pour répondre aux besoins de votre application, tandis que Devise a généré les routes, les vues et les contrôleurs facilitant cette expérience d’inscription utilisateur.

Maintenant que vous avez confirmé que le processus d’inscription fonctionne comme prévu, votre prochaine étape est d’ajouter cette authentification à la page d’accueil que vous avez créée à l’étape 2. À l’étape suivante, vous lierez la page d’inscription à la page d’accueil afin que les utilisateurs n’aient pas à naviguer vers une URL spécifique pour s’inscrire, comme vous l’avez fait ici.

Étape 5 — Lier l’authentification à la page d’accueil

Vous avez toutes les fonctionnalités mises en place dans votre projet, mais vous devez encore connecter les pages créées par Devise avec votre page de destination. Dans l’étape précédente, vous avez visité manuellement la page /users/sign_up pour vous connecter. Dans cette étape, vous allez lier toutes les pages ensemble en ajoutant les liens nécessaires sur votre page de destination. Vous afficherez également conditionnellement aux utilisateurs les liens pour se connecter ou se déconnecter de l’application en fonction de leur statut.

Vous accomplirez cela avec quelques méthodes d’aide de Devise. Le gem Devise est livré avec de nombreuses méthodes d’aide que vous pouvez utiliser sans avoir à tout implémenter vous-même. Cela rend le code plus facile à lire ainsi qu’à maintenir.

Vous commencerez par ajouter du code pour vérifier si l’utilisateur est connecté. S’ils le sont, la page de destination affichera leur adresse e-mail et un lien pour se déconnecter de l’application. Si l’utilisateur n’est pas connecté, la page de destination affichera un lien pour aller à la page de connexion.

Ouvrez le fichier app/views/home/index.html.erb pour édition et ajoutez les lignes en surbrillance:

<% if user_signed_in? %> 
 <div> Welcome <%= current_user.email %> </div> 
  <%= button_to "Sign out", destroy_user_session_path, method: :delete %> 
<% else %>
  <%= button_to "Sign in", new_user_session_path %> 
<% end %>
<h1>Hello DigitalOcean!</h1>

user_signed_in? vient des méthodes d’aide associées aux contrôleurs de Devise. Elle vérifie si l’utilisateur est connecté ou non et renvoie une valeur booléenne true ou false. Vous pouvez utiliser ce résultat pour programmer d’autres fonctionnalités dans votre application, comme l’affichage des informations de compte de l’utilisateur s’ils sont connectés. Pour plus de détails sur cette méthode d’aide, vous pouvez consulter le code source dans le dépôt GitHub de Devise.

current_user est une aide Devise qui accède aux détails de l’utilisateur actuellement connecté à l’application. Par exemple, si vous vous connectez avec [email protected], l’aide current_user renverra le modèle utilisateur pour [email protected]. Ainsi, en utilisant current_user.email, vous obtiendrez [email protected] comme résultat. En utilisant Devise, vous évitez d’avoir à implémenter cette logique à partir de zéro, vous faisant gagner du temps et des efforts.

Enfin, avec ce code, vous avez ajouté des boutons Se connecter et Se déconnecter à la page d’accueil. En fonction du résultat de la méthode d’aide user_signed_in?, vous afficherez l’option de vous connecter ou de vous déconnecter en utilisant les nouveaux boutons Se connecter et Se déconnecter ajoutés.

Vous utilisez la méthode button_to pour définir un bouton qui conduit l’utilisateur à une route spécifique. Vous utilisez également des méthodes d’aide pour obtenir ces routes : destroy_user_session_path résout à /users/sign_out et new_user_session_path résout à /users/sign_in. (Vous pouvez consulter la liste complète des assistants d’URL de route en exécutant bundle exec rails routes comme mentionné dans une étape précédente.)

Enregistrez et fermez le fichier.

Actualisez votre page dans le navigateur pour examiner les changements.

Si vous n’avez pas encore essayé de vous inscrire à votre application, vous pouvez visiter la route /users/sign_in en cliquant sur le bouton Connexion sur votre page. À partir de là, vous pouvez procéder à la création d’un nouveau compte en cliquant sur le lien S’inscrire en bas. Entrez une adresse e-mail de test comme [email protected] et un mot de passe. Une fois que vous vous êtes inscrit, vous êtes ramené à la page d’accueil. Maintenant, la page d’accueil affiche l’adresse e-mail de l’utilisateur actuellement connecté, ainsi qu’un bouton Déconnexion, comme indiqué ici :

Vous recevez également un message indiquant : Vous vous êtes inscrit avec succès.

Et avec cela, vous avez intégré avec succès la gemme Devise et configuré l’authentification de l’utilisateur dans votre application.

Conclusion

Dans ce tutoriel, vous avez utilisé Devise pour ajouter l’authentification de l’utilisateur à une application Rails. En utilisant les méthodes d’aide de Devise, vous avez créé une application où les utilisateurs peuvent créer des comptes, s’inscrire et se déconnecter.

Pour mieux comprendre Devise et obtenir des aides et des méthodes supplémentaires, consultez le fichier README sur le dépôt GitHub de Devise. Comme prochaine étape de ce tutoriel, vous pouvez essayer de rendre conditionnellement le salut « Hello World! » sur la page avec quelque chose comme Hello nom d'utilisateur selon que l’utilisateur est connecté ou non.

Vous pouvez trouver le code pour ce projet dans le DigitalOcean Community GitHub repo.