Hoe User Authenticatie opzetten met Devise in een Rails 7 Applicatie

De auteur heeft Girls Who Code gekozen om een donatie te ontvangen als onderdeel van het Write for DOnations-programma.

Introductie

De Devise-gem is een authenticatieoplossing voor Ruby on Rails-toepassingen; het helpt je bij het opzetten van productieklare gebruikersauthenticatie in je projecten zonder dat je alles zelf hoeft te doen. Devise biedt veel handige functies, zoals het beheren van gebruikerssessies en het toevoegen van ondersteuning voor aanmelden van derden met OAuth met behulp van de OmniAuth-gem. Devise wordt ook geleverd met ingebouwde modules voor functionaliteiten zoals het opnieuw instellen van vergeten wachtwoorden, het bijhouden van het aantal aanmeldingen en tijdstempels, het definiëren van time-outs, het vergrendelen van accounts, enzovoort.

Devise maakt gebruikersauthenticatie net zo eenvoudig als het initialiseren van de gem en het maken van een User-model met de vereiste functies. Als je gebruikersauthenticatie helemaal opnieuw zou moeten bouwen, zou je code en tests moeten schrijven voor alle functies die je wilt, en alle uitzonderingsgevallen moeten afhandelen bij het beheren van sessies, het opslaan van cookies en het veilig houden van de gegevens. Door de Devise-gem te gebruiken, hoef je dat allemaal niet zelf te doen en kun je je concentreren op het bouwen van je app.

In deze tutorial zul je een minimale webapplicatie maken met Rails en Devise installeren, waarmee gebruikers accounts kunnen aanmaken, kunnen inloggen en uitloggen van hun accounts.

Vereisten

Om deze tutorial te voltooien, heb je het volgende nodig:

• 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 geïnstalleerd op je computer. Enkele Rails-functies, zoals de Asset Pipeline, zijn afhankelijk van een JavaScript Runtime. Node.js biedt deze functionaliteit. Voor Ubuntu installeer Node.js met behulp van de officiële PPA, zoals uitgelegd in optie 2 van Hoe Node.js te installeren op Ubuntu 20.04. Voor Mac OS volg onze gids Hoe Node.js te installeren en een lokale ontwikkelingsomgeving te maken op MacOS.
• Bekendheid met Ruby en het Ruby on Rails-framework. Je kunt de eerste paar tutorials uit onze serie Rails on Containers bekijken, of je kunt de officiële Rails Guides gebruiken.

Stap 1 — Het aanmaken van een nieuwe Rails applicatie

In deze stap zal je een nieuwe Rails applicatie aanmaken en lokaal op je computer laten draaien. Je zal de rails command line utility gebruiken om het project te initialiseren.

Voer de volgende opdracht uit in een terminal:

rails new blog

De rails new opdracht zal een nieuw Rails project aanmaken onder de directory blog, die een aantal gegenereerde bestanden en mappen bevat. Een daarvan is het Gemfile, dat de afhankelijkheden van het project bevat. Je zal het Gemfile configureren om Devise te gebruiken in Stap 3 — Devise Installeren en Configureren.

Je kan deze directory openen in je favoriete teksteditor of er naartoe navigeren via de terminal:

cd blog

Om de Rails applicatie te starten, start je de development server met het rails server commando vanuit de projectdirectory:

bundle exec rails server

Deze opdracht zal de Rails ontwikkelingsserver starten. Open http://localhost:3000 in je browser om toegang te krijgen tot de welkomstpagina van Rails. Rails gebruikt poort 3000 om de applicatie uit te voeren als je geen ander poortnummer hebt opgegeven.

Je hebt nu een nieuwe Rails-applicatie geïnitialiseerd, waar je later gebruikersauthenticatie aan zult toevoegen. In de volgende stap vervang je de standaardstartpagina die Rails biedt door een aangepaste startpagina, waardoor het gemakkelijker wordt om door de voorbeeldapplicatie te navigeren zodra je Devise hebt toegevoegd. Nadat je een nieuwe startpagina hebt gemaakt, voeg je links toe waarmee gebruikers zich kunnen aanmelden en aanmelden bij de applicatie.

Stap 2 — Het maken van een Startpagina

Nu je een basis Rails-applicatie hebt, ga je de standaardpagina die Rails biedt vervangen door je eigen startpagina. Een aangepaste startpagina maakt het gemakkelijker om de gebruiker links te tonen voor het aanmelden en inloggen op de hoofd-URL van de applicatie. Je zult links toevoegen voor aanmelden en registreren in latere stappen.

Om je startpagina te maken, moet je het volgende doen:

• Voeg de route toe in het config/routes.rb-bestand.
• Maak een HomeController aan die de verzoeken naar deze route zal afhandelen.
• Maak een view-bestand aan dat wordt weergegeven wanneer je de route benadert.

Je begint door het root-pad toe te voegen aan het routes.rb-bestand dat is gegenereerd toen je het project creëerde.

Gebruik nano of je favoriete teksteditor om het config/routes.rb-bestand te openen dat eerder is gegenereerd:

nano config/routes.rb

Voeg de gemarkeerde regel toe:

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

root to: bepaalt welke controlleractie de verzoeken naar het hoofdpad zal afhandelen – in dit geval zal de route http://localhost:3000 zijn, wat de standaardpoort is voor Rails-apps. De verzoeken naar deze route worden afgehandeld door de index-actie in de home-controller. Deze file bestaat nu niet, dus je zult het app/controllers/home_controller.rb-bestand hierna aanmaken.

Sla op en sluit config/routes.rb. Gebruik nano, druk op CTRL+X om af te sluiten, Y om op te slaan, en ENTER om de bestandsnaam te bevestigen en het bestand te sluiten.

Maak vervolgens het app/controllers/home_controller.rb-bestand aan en voeg de volgende regels toe:

class HomeController < ApplicationController
  def index
    render
  end
end

Dit is een basis HomeController met een index-methode die één ding doet: het weergavebestand renderen dat is gekoppeld aan de controlleractie.

In dit geval zal het weergavebestand het app/views/home/index.html.erb bestand zijn. Je zult dit bestand moeten maken, evenals de home map binnen de app/views map.

Sla het home controllerbestand op en sluit het.

Maak vervolgens de home map aan in de app/views map:

mkdir app/views/home/

De home map zal alle weergaven bevatten voor een bepaalde Rails controller.

Vervolgens maak je het app/views/home/index.html.erb bestand aan en voeg je de volgende regels toe:

<h1>Hello DigitalOcean!</h1>

app/views/home/index.html.erb is het weergavebestand dat de index actie van de Home controller gaat renderen. Dit is een HTML-bestand waarin je Ruby-code kunt insluiten. Wanneer de route gedefinieerd voor de specifieke controlleractie wordt uitgevoerd, wordt dit weergavebestand gerenderd in de browser van de gebruiker.

Sla je bestand op en sluit het.

Om de wijzigingen in de root-URL te zien, open je http://localhost:3000 in je browser (of vernieuw je de pagina als deze al open is). De bijgewerkte startpagina zal er ongeveer zo uitzien:

Je kunt deze pagina verder aanpassen indien nodig, maar dit is alles wat nodig is voor deze tutorial.

Nu je een eenvoudige Rails-applicatie met een eigen startpagina hebt, voeg je gebruikersauthenticatie toe met de Devise-gem.

Stap 3 – Installeren en configureren van Devise

In deze stap installeer en configureer je Devise in je Rails-toepassing zodat je de methoden en helpers kunt gebruiken die bij de edelsteen worden geleverd. Je zult de methode user_signed_in? gebruiken om de sessie-informatie van elke aangemelde gebruiker opgeslagen in de browsercookies te controleren. Je zult ook de helper current_user gebruiken om de details van het account dat momenteel is aangemeld, te krijgen. Beide methoden zijn ingebouwd in Devise en je kunt ze direct in je toepassing gebruiken zonder extra code te hoeven schrijven. Je kunt meer leren over deze hulpmethoden van de GitHub-pagina van het Devise-project.

De eerste stap om Devise te installeren is het toevoegen van de edelsteen aan je Gemfile, die informatie bevat over alle afhankelijkheden die vereist zijn om je Ruby-project uit te voeren. In dit geval heeft de gegenereerde Gemfile bij het initialiseren van de Rails-toepassing al alle basis-edelstenen die vereist zijn voor Rails om te draaien.

Maar voordat je wijzigingen aanbrengt in je Gemfile, stop je de ontwikkelingsserver die je in de vorige stap hebt gestart door CTRL+C in te drukken in de terminal waar het wordt uitgevoerd.

Vervolgens open je je Gemfile om te bewerken. Om de Devise-edelsteen toe te voegen, voeg je de gemarkeerde regel toe aan het einde van het bestand, maar buiten de development en test groepen:

# ...

# Vermindert opstarttijden door caching; vereist in config/boot.rb
gem "bootsnap", require: false

# Gebruik Active Storage-varianten [https://guides.rubyonrails.org/active_storage_overview.html#transforming-images]
# edelsteen "image_processing", "~> 1.2"

gem "devise" 

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

# ...

Sla je bestand op en sluit het.

Vervolgens installeer je de nieuw toegevoegde edelsteen door het bundle install-commando uit te voeren in de terminal. Vanuit je projectdirectory (blog), voer het volgende commando uit:

bundle install

Dit commando zal de Devise-edelsteen in je project installeren, waarmee je het devise-commando kunt gebruiken met het rails-command line-hulpprogramma en de authenticatie kunt configureren.

Om Devise in je project in te stellen, voer je het generatorcommando uit:

bundle exec rails g devise:install

De g-vlag in het bovenstaande commando staat voor generate en wordt gebruikt om Rails-generatoren aan te roepen. Generatoren zullen bestanden creëren die kunnen dienen als startpunt. Je kunt de Rails-handleidingen raadplegen voor meer informatie over Rails-generatoren.

Het vorige commando zal verschillende bestanden genereren, waaronder het initialisatiebestand en het i18n-locatiebestand voor Devise. Het initialisatiebestand, hieronder in detail uitgelegd, wordt gebruikt om Devise te configureren wanneer je de app voor het eerst start. i18n staat voor internationalisatie, wat een standaard is om je app in verschillende talen te laten draaien.

Op dit punt zullen ook enkele instructies worden afgedrukt in de terminal, zoals:

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 *

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

Hoewel deze handmatige installatie niet vereist is voor deze tutorial, zul je later in deze stap flitsberichten toevoegen voor notice en alert.

Je hebt Devise geïnstalleerd. Volgende stap is om een paar dingen te configureren in het initialisatiebestand van Devise dat zojuist is gegenereerd.

Toen je het devise:install-commando uitvoerde, genereerde je config/initializers/devise.rb, wat het initialisatiebestand is voor Devise. Telkens wanneer je je Rails-applicatie start, zal Rails alle gems en plugins laden, en vervolgens alle initialisatiebestanden laden. Je kunt specifieke instellingen voor verschillende onderdelen van je applicatie configureren vanuit deze initialisatiebestanden. Al deze initialisatoren bevinden zich in de config/initializers/-directory, en daar maakt de Devise-gem ook zijn initialisator aan.

Open config/initializers/devise.rb om te bewerken. Zoek in het bestand het Devise.setup-blok en voeg de volgende gemarkeerde regel toe (er kunnen andere codeblokken binnen het Devise.setup-blok staan, maar die kun je negeren):

Devise.setup do |config|
  # ...

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

  # ...
end

Deze regel voegt turbo_stream toe als een navigatieformaat. Turbo Streams maken deel uit van Turbo, waarmee je server-gerenderde HTML kunt verzenden en pagina’s kunt renderen zonder veel JavaScript te gebruiken. Je moet dit toevoegen voor Devise 4.8.1 om met Rails 7 te werken; anders krijg je een undefined method user_url foutmelding.

Sla het bestand op en sluit het.

Vervolgens voeg je ook de meldingen en waarschuwingen toe die werden benadrukt in de eerder afgedrukte instructies. De alert en notice tags zijn waar de berichten zoals “Incorrect wachtwoord” en dergelijke verschijnen in de gebruikersinterface. Je kunt altijd aangepaste waarschuwingsberichten implementeren in je applicatie (bijvoorbeeld als je Axios-interceptors gebruikt met React als frontend), maar voor deze tutorial voltooit je de minimale Devise-setup.

Open app/views/layouts/application.html.erb voor bewerking. Voeg de tags voor de "notice" en "alert" meldingen toe binnen de body-tag, direct boven <%= yield %>:

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

Wanneer de weergave in de browser wordt gerenderd, wordt het <%= yield %> blok vervangen door de inhoud van je weergavebestanden. In je weergavebestand had je alleen de p tag. Deze yield-tag wordt vervangen door die inhoud.

Sla je bestand op en sluit het.

In deze stap heb je Devise geïnstalleerd en geconfigureerd in je project. In de volgende stap ga je het gebruikersmodel voor je applicatie aanmaken met Devise en de gebruikersauthenticatie instellen.

Stap 4 – Het Gebruikersmodel Aanmaken met Devise

Je bent nu klaar om het gebruikersmodel te genereren met Devise, wat het noodzakelijke modelbestand zal creëren en een migratie zal genereren die je kunt uitvoeren om een users-tabel in je applicatie aan te maken. Telkens wanneer iemand zich aanmeldt, moet je een nieuw record aanmaken in de users-tabel in de database. Met het gebruikersmodel kun je deze database-records manipuleren vanuit je frontendweergave.

In deze stap ga je een gebruikersmodel genereren, de standaardconfiguratie inspecteren en vervolgens de migratie uitvoeren om je database bij te werken.

Aangezien Rails een models-view-controller (MVC)-framework is, heeft elke databasetabel een bijbehorende klasse waarmee je kunt werken met de gegevens in de tabel. In dit geval, als je een users-tabel aanmaakt, kun je de User-klasse gebruiken voor bewerkingen zoals User.first of User.find_by_email("[email protected]"). Je kunt dit model aanmaken door een normale klasse te maken die is afgeleid van ApplicationRecord in Rails, maar het genereren van een gebruikersmodel met Devise geeft je veel methoden die je kunt gebruiken voor authenticatie.

Om je Devise-gebruiker te maken, voer je de volgende generatoropdracht uit:

bundle exec rails g devise user

De volgende uitvoer wordt weergegeven op het scherm:

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

De uitvoer toont aan dat Devise verschillende bestanden heeft gegenereerd, tests heeft gemaakt en routes heeft toegevoegd. Het eerste bestand, db/migrate/20220908152949_devise_create_users.rb, is een migratiebestand voor het aanmaken van de users-tabel in je database. Een Rails migratiebestand beschrijft de wijzigingen die moeten worden aangebracht in de database. De bestandsnaam van elke migratie bevat een tijdstempel zodat Rails weet in welke volgorde deze wijzigingen moeten worden aangebracht.

Devise heeft ook het gebruikersmodelbestand aangemaakt (app/models/user.rb), samen met tests hiervoor. De laatste regel van de uitvoer geeft aan dat er een route is toegevoegd aan het bestaande config/routes.rb-bestand. Devise voegt automatisch alle routes toe, zoals /users/sign_up en /users/sign_out, met behulp van de devise_for :users-helper.

Voordat je het migratiebestand uitvoert en de users-tabel in de database aanmaakt, laten we deze gegenereerde bestanden bekijken. Dit zal je helpen de configuratie te begrijpen die Devise heeft gegenereerd, zodat je weet wat er gebeurt wanneer je de migratie uitvoert.

Begin met het openen van het migratiebestand (db/migrate/20220908152949_devise_create_users.rb) om de standaardcode te bekijken:

# bevroren_tekenreeks_literal: waar

class DeviseCreateUsers < ActiveRecord::Migration[7.0]
  def change
    create_table :users do |t|
      ## Database-authenticatable
      t.string :email,              null: false, default: ""
      t.string :encrypted_password, null: false, default: ""

      ## Herstelbaar
      t.string   :reset_password_token
      t.datetime :reset_password_sent_at

      ## Onthoudbaar
      t.datetime :remember_created_at

      ## Traceerbaar
      # t.integer  :aantal_aanmeldingen, standaard: 0, null: onwaar
      # t.datetime :huidige_aanmelding_op, standaard: onwaar
      # t.datetime :laatste_aanmelding_op, standaard: onwaar
      # t.string   :huidige_aanmelding_ip
      # t.string   :laatste_aanmelding_ip

      ## Bevestigbaar
      # t.string   :bevestigingstoken
      # t.datetime :bevestigd_op
      # t.datetime :bevestiging_verzonden_op
      # t.string   :onbevestigd_emailadres # Alleen als herbevestigbaar wordt gebruikt

Devise bevat veel nuttige opties, zoals velden voor het wachtwoordreset-token en het tijdstip van het laatste verzonden token, enzovoort. Er zijn ook regels voor functies zoals e-mailbevestiging, het vergrendelen van de gebruiker na mislukte aanmeldpogingen, en zelfs het bijhouden van details van aanmeldingen.

Aangezien je geen wijzigingen hoeft aan te brengen, sluit het migratiebestand af.

Maak ook het User modelbestand aan. Dit zal beschikbaar zijn in de app/models/ map.

Open het app/models/user.rb modelbestand om de standaardcode te bekijken:

class User < ApplicationRecord
# Standaard devise modules insluiten. Andere beschikbare modules zijn:
# :confirmable, :lockable, :timeoutable, :trackable en :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.

Dit is wat de basismodules doen:

• database_authenticatable: Gebruikers kunnen zich authenticeren met een login en wachtwoordveld. Hun versleutelde wachtwoord wordt opgeslagen in uw database.
• registerable: Gebruikers kunnen zichzelf registreren en hun accounts bewerken of verwijderen.
• recoverable: Gebruikers kunnen hun wachtwoord opnieuw instellen en hun accounts herstellen als ze hun inloggegevens vergeten.
• rememberable: Deze module onthoudt de sessies van een gebruiker door de informatie op te slaan in een browsercookie.
• validatable: Deze module biedt validaties voor de e-mail- en wachtwoordvelden van de gebruiker. (Bijvoorbeeld, uw applicatie vraagt om het wachtwoord minstens zes tekens lang te zijn, ook al hebt u geen aangepaste validaties in uw model gedefinieerd.)

Deze basismodules zijn opgenomen in het User-model dat u zojuist hebt gegenereerd. U kunt een volledige lijst van modules die bij Devise worden geleverd vinden in de Devise GitHub-opslagplaats.

U hoeft geen wijzigingen aan te brengen, dus sluit het User modelbestand.

Een andere update is dat het bestand config/routes.rb is aangepast om een devise_for-regel toe te voegen voor gebruikers:

Rails.application.routes.draw do
  devise_for :users

  root "home#index"
end

Dit is een handige methode die alle vereiste routes definieert met betrekking tot gebruikersauthenticatie zoals /gebruikers/inloggen, /gebruikers/uitloggen, en /gebruikers/wachtwoord/nieuw. Devise zorgt voor dit alles voor u en houdt zelfs het routesbestand schoon. Als u wilt begrijpen hoe het toevoegen van devise_for :gebruikers automatisch wordt vertaald naar al deze routes, kunt u de broncode voor de methode in de Devise GitHub-opslagplaats controleren.

U hoeft hier geen wijzigingen aan te brengen, dus sluit het bestand config/routes.rb.

Om te leren welke routes zijn gedefinieerd in uw toepassing, kunt u ze opvragen door het volgende commando uit te voeren:

bundle exec rails routes

Dit commando geeft alle toepassingsroutes weer en de controllers waarmee deze routes worden verwerkt. In het geval van authenticatie zijn al deze routes aangemaakt door Devise, en u hoefde ze niet handmatig toe te voegen.

De uitvoer zal lang zijn, maar hier is een fragment waarin enkele van de routes worden weergegeven:

De routes die in de uitvoer worden vermeld, zijn de routes die door Devise zijn toegevoegd toen u de regel devise_for :gebruikers in uw routesbestand opnam. Dit zijn de routes voor acties zoals inloggen, aanmelden, wachtwoord resetten, enzovoort.

Nu je de bestanden en configuratie die door Devise zijn gegenereerd hebt bekeken, kun je de migratie uitvoeren die je aan het begin van deze stap hebt gegenereerd met de volgende opdracht:

bundle exec rails db:migrate

De bovenstaande opdracht zal alle wijzigingen in elk van de migratiebestanden naar je database aanbrengen. De wijzigingen moeten achtereenvolgens worden aangebracht, net zoals ze zijn gedefinieerd in de bestanden. Rails moet de volgorde weten waarin de migraties moeten worden uitgevoerd, daarom worden de bestanden gemaakt met tijdstempels in hun namen.

Output zoals het volgende zal naar het scherm worden afgedrukt:

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) =======================

Zodra de migratie is uitgevoerd, is je database ingesteld. Je hebt alles gedaan wat je nodig hebt om gebruikersverificatie in je project in te stellen.

Op dit punt, herstart je Rails-server:

bundle exec rails server

Het eerder genoemde initializerbestand wordt alleen geladen wanneer Rails wordt opgestart. Je moet de server herstarten zodat Rails het nieuwe Devise-initializerbestand kan laden en alles kan instellen voor gebruikersverificatie om te werken.

Ga naar http://localhost:3000/users/sign_up in je browser, waar je een aanmeldingsformulier zult vinden om een account aan te maken door een e-mail en wachtwoord in te voeren. (In de volgende stap voeg je knoppen toe voor aanmelden en aanmelden op de startpagina zodat het gemakkelijker is voor de lezer om naar deze URL te navigeren.)

Om de verificatie uit te testen, voer een test e-mailadres in zoals [email protected] en een wachtwoord.

Zodra je je aanmeldt, word je doorgestuurd naar de startpagina, die Hallo DigitalOcean! weergeeft, samen met een bericht waarin staat dat je je succesvol hebt aangemeld, zoals dit:

Deze aanmeldingssuccesmelding wordt weergegeven in de <p class="notice"><%= notice %></p>-tag die je hebt toegevoegd in het application.html.erb-bestand.

Op dit punt heb je gebruikersauthenticatie geconfigureerd met Devise in je project en je hebt je aangemeld met een voorbeeldaccount. Je hebt Devise geconfigureerd om aan de behoeften van je toepassing te voldoen, terwijl Devise de routes, views en controllers heeft gegenereerd die deze gebruikersaanmeldervaring mogelijk maken.

Nu je hebt bevestigd dat het aanmeldingsproces werkt zoals verwacht, is je volgende stap om deze authenticatie toe te voegen aan de landingspagina die je hebt gemaakt in Stap 2. In de volgende stap ga je de aanmeldingspagina koppelen aan de landingspagina, zodat gebruikers niet naar een specifieke URL hoeven te navigeren om zich aan te melden, zoals je hier moest doen.

Stap 5 — Authenticatie koppelen aan de landingspagina

Je hebt alle functionaliteit opgezet in je project, maar je moet nog steeds de pagina’s die Devise heeft aangemaakt verbinden met je landingspagina. In de vorige stap bezocht je handmatig de pagina /users/sign_up om in te loggen. In deze stap zal je alle pagina’s met elkaar verbinden door de vereiste links toe te voegen aan je landingspagina. Je zal ook conditioneel gebruikers de links tonen om in te loggen of uit te loggen van de applicatie op basis van hun status.

Je zal dit bereiken met een paar hulpmethoden van Devise. De Devise gem wordt geleverd met veel hulpmethoden die je kunt gebruiken zonder alles zelf te hoeven implementeren. Dit maakt de code ook gemakkelijker te lezen en te onderhouden.

Je begint met het toevoegen van code om te controleren of de gebruiker is ingelogd. Als ze dat zijn, zal de landingspagina hun e-mailadres weergeven en een link om uit te loggen van de applicatie. Als de gebruiker niet is ingelogd, zal de landingspagina een link weergeven om naar de aanmeldpagina te gaan.

Open het bestand app/views/home/index.html.erb om te bewerken en voeg de gemarkeerde regels toe:

<% 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? komt uit de hulpmethoden die zijn geassocieerd met de controllers van Devise. Het controleert of de gebruiker is ingelogd of niet en geeft een booleanwaarde true of false terug. Je kunt dit resultaat gebruiken om andere functionaliteit in je app te programmeren, zoals het tonen van de accountinformatie van de gebruiker als ze zijn ingelogd. Voor meer details over deze hulpmethode, kun je de broncode bekijken in de Devise GitHub Repository.

current_user is een Devise helper die toegang geeft tot de gegevens van de gebruiker die momenteel is ingelogd op de applicatie. Als je bijvoorbeeld inlogt met [email protected], zou de current_user helper het gebruikersmodel voor [email protected] retourneren. Dus, bij het gebruik van current_user.email, zou je [email protected] als resultaat krijgen. Door Devise te gebruiken, vermijd je het implementeren van deze logica vanaf nul, wat je tijd en moeite bespaart.

Tenslotte, met deze code, heb je Aanmelden en Afmelden knoppen toegevoegd aan de landingspagina. Afhankelijk van het resultaat van de user_signed_in? helpermethode, toon je de optie om in te loggen of af te melden met de nieuw toegevoegde Aanmelden en Afmelden knoppen.

Je gebruikt de button_to methode om een knop te definiëren die de gebruiker naar een specifieke route brengt. Je gebruikt ook helpermethoden om deze routes te verkrijgen: destroy_user_session_path leidt naar /users/sign_out en new_user_session_path leidt naar /users/sign_in. (Je kunt de volledige lijst met route URL-helpers bekijken door bundle exec rails routes uit te voeren, zoals vermeld in een eerdere stap.)

Sla het bestand op en sluit het.

Vernieuw je pagina in de browser om de wijzigingen te bekijken.

Als je nog niet hebt geprobeerd je aan te melden voor je applicatie, kun je de /users/sign_in route bezoeken door op de Aanmelden knop op je pagina te klikken. Vanaf hier kun je doorgaan met het maken van een nieuw account door te klikken op de Registreren link onderaan. Voer een test-e-mailadres in zoals [email protected] en een wachtwoord. Zodra je bent aangemeld, kom je weer op de landingspagina terecht. Nu toont de landingspagina het e-mailadres van de momenteel aangemelde gebruiker, samen met een Afmelden knop, zoals hier getoond:

Je krijgt ook een bericht te zien, Je hebt je succesvol aangemeld.

En daarmee heb je succesvol de Devise gem geïntegreerd en gebruikersauthenticatie opgezet in je applicatie.

Conclusie

In deze tutorial heb je Devise gebruikt om gebruikersauthenticatie toe te voegen aan een Rails-applicatie. Met behulp van de hulpmethoden van Devise heb je een app gemaakt waar gebruikers accounts kunnen aanmaken, zich kunnen aanmelden en afmelden.

Om een beter begrip te krijgen van Devise en aanvullende hulpmethoden en methoden, bekijk de README-bestand op de Devise GitHub-opslagplaats. Als volgende stap bij deze tutorial kun je proberen om de begroeting “Hallo wereld!” conditioneel weer te geven op de pagina met iets als Hallo gebruikersnaam, afhankelijk van of de gebruiker is aangemeld of niet.

Je kunt de code voor dit project vinden in de DigitalOcean Community GitHub-repo.