Exploring Devise, Partie 1

Dans certains de mes articles précédents sur le téléchargement d'images dans Rails, j'ai mentionné Devise mais je n'y suis pas allé profondément. Dans ce tutoriel, je vais vous apprendre sur Devise.

Prêt? Commençons!

Devise Introduction et Modules

Devise est une solution d'authentification pour Rails construite avec Warden et fournie par les gens formidables de Plataformatec. Devise fournit différents modules:

Base de données authentifiable: cette fonction chiffre et stocke un mot de passe pour la base de données afin de valider l'authenticité d'un utilisateur lors de la connexion..
Omniauthable: Ceci associe le support OmniAuth à Devise. Les utilisateurs de votre application pourront se connecter à l'aide de comptes tels que Facebook, Twitter et Google..
Confirmable: permet l'envoi d'e-mails contenant des instructions utiles pour la vérification d'un compte..
Récupérable: Ce module est utile lorsque les utilisateurs oublient leur mot de passe et doivent le récupérer. Avec cela, l'utilisateur sera en mesure de réinitialiser le mot de passe.
Enregistrable: Ceci gère l'inscription des utilisateurs. Il permet également aux utilisateurs de modifier et de supprimer leurs comptes..
Rememberable: Ce module permet à votre application de mémoriser un utilisateur connecté en stockant un cookie..
Trackable: ce module permet de suivre le nombre de connexions, les horodatages et les adresses IP..
Temporisable: ce module est responsable de l'expiration d'une session qui n'a pas été active depuis un certain temps.
Valable: avec ce module, l'email et le mot de passe sont validés.
Verrouillable: fournit une couche supplémentaire de sécurité. Lorsqu'il est activé, un compte peut être verrouillé après un nombre donné de tentatives de connexion infructueuses..

Devise Intégration

Dans le cadre de ce didacticiel, nous allons générer une application Rails que nous utiliserons pour vérifier le fonctionnement de Devise. Continuons!

rails nouvelle devise-app -T

le -T flag indique à Rails de générer l’application sans la suite de tests par défaut. Accédez au répertoire de votre application et déposez les gemmes suivantes dans votre Gemfile.

#Gemfile gem 'devise', '~> 4.1' gem 'bootstrap-sass', '~> 3.3'

Maintenant, installez les gemmes Devise et Bootstrap que vous venez d'ajouter.

installation groupée

Renommez votre app / assets / stylesheets / application.css déposer dans app / assets / stylesheets / application.scss et ajoutez les lignes suivantes:

# app / assets / stylesheets / application.scss @import "bootstrap-sprockets"; @import "bootstrap";

Ouvrez le app / assets / javascripts / application.js déposer et exiger bootstrap-pignons. Le mien ressemble à ceci:

# app / assets / javascripts / application.js // = nécessite jquery // = requiert bootstrap-sprockets // = requiert jquery_ujs // = nécessite turbolinks // = require_tree .

Ensuite, vous devez exécuter la commande Rails pour installer les fichiers de configuration de Devise. Vous le faites en lançant cette commande:

les rails génèrent un montage: installer

La commande génère ce qui suit sur votre terminal. Vous devriez le lire pour comprendre ce qui s'est passé.

créer config / initialiseurs / devise.rb créer config / locales / devise.en.yml =============================== ============================================ Certains vous installent Vous devez le faire manuellement si vous ne l'avez pas encore fait: 1. Assurez-vous d'avoir défini les options d'URL par défaut dans vos fichiers d'environnement. Voici un exemple de default_url_options approprié pour un environnement de développement dans config / environment / development.rb: config.action_mailer.default_url_options = hôte: 'localhost', port: 3000 En production,: hôte doit être défini sur l'hôte réel de ton application. 2. Assurez-vous d'avoir défini root_url sur * quelque chose * dans votre config / routes.rb. Par exemple: root to: "home # index" 3. Assurez-vous que les messages flash sont dans app / views / layouts / application.html.erb. Par exemple: <%= notice %>
 <%= alert %>
 4. Si vous déployez uniquement sur Heroku avec Rails 3.2, vous voudrez peut-être définir: config.assets.initialize_on_precompile = false Sous config / application.rb, forçant votre application à ne pas accéder à la base de données ou à charger des modèles lors de la précompilation de vos actifs. 5. Vous pouvez copier des vues Devise (pour personnalisation) sur votre application en exécutant: rails g legs: views =========================== =============================================== =

La commande génère également deux fichiers, que vous pouvez trouver dans config annuaire. Il nous donne également des instructions sur ce que nous devrions faire..

Accédez à la présentation de votre application, app / views / layouts / application.html.erb, et le faire ressembler à ce que j'ai ci-dessous:

# app / views / layouts / application.html.erb    DeviseApp <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => vrai%> <%= javascript_include_tag 'application', 'data-turbolinks-track' => vrai%> <%= csrf_meta_tags %>    <%= notice %>
 <%= alert %>
 
  <%= yield %>

Vous devez définir les options d'URL par défaut pour votre environnement de développement. Ajoutez le code ci-dessous dans config / environnements / développement.rb.

# config / environment / development.rb config.action_mailer.default_url_options = hôte: 'localhost', port: 3000

Maintenant, vous devez créer un Utilisateur modèle pour Devise. Vous pouvez le faire en utilisant votre terminal.

les rails génèrent un utilisateur

Cela va générer un user.rb déposer dans votre app / modèles annuaire. Le fichier généré ressemblera à ceci:

classe utilisateur < ActiveRecord::Base # Include default devise modules. Others available are: # :confirmable, :lockable, :timeoutable and :omniauthable devise :database_authenticatable, :registerable, :recoverable, :rememberable, :trackable, :validatable end

Vous pouvez voir qu'il contient les modules par défaut que j'ai mentionnés ci-dessus. La commande que vous avez exécutée a également modifié votre config / routes.rb fichier en ajoutant une route pour carte. Tu devrais vérifier ça.

À ce stade, vous devez migrer votre base de données. Vous le faites en exécutant:

rake db: migrer

Authentification à l'aide de Devise

Maintenant, vous devez créer un PagesController et envelopper l'authentification Devise autour de cela, cela empêchera les personnes non autorisées de voir la page.

rails générer contrôleur Pages index

Ouvrez votre fichier de routes et définissez la racine de votre application.

# config / routes.rb Rails.application.routes.draw do devise_for: utilisateurs root à: "pages # index" fin

Ouvrez votre PagesController et ajouter une authentification pour votre indice et Nouveau des pages.

# app / controllers / pages_controller.rb class PagesController < ApplicationController before_action :authenticate_user!, only: [:index, :new] def index end def new end end

Le code montre que le indice et Nouveau les pages ne sont accessibles qu'aux utilisateurs enregistrés. Ouvrez votre terminal et démarrez votre serveur de rails. Pointez votre navigateur sur http: // localhost: 3000 et vous serez automatiquement redirigé vers la page de connexion à Devise.

Se connecter sans utiliser de courrier électronique

Le moyen par défaut de se connecter à Devise implique l’utilisation d’une adresse électronique et d’un mot de passe. Que faire si vous voulez permettre aux utilisateurs de se connecter avec leur nom d'utilisateur unique? Si c'est ce que vous voulez, c'est possible. Voyons comment.

Exécutez la commande:

rails générer la migration AddUsernameToUSer nom d'utilisateur: string

Cela va ajouter une nouvelle colonne pour Nom d'utilisateur dans ton utilisateurs table. Migrer votre base de données.

rake db: migrer

Vous devez ajouter à vos vues un champ dans lequel vos utilisateurs peuvent entrer leur nom d'utilisateur. Quand vous allez à votre app / vues répertoire, vous ne trouverez aucun fichier rendant les vues Devise. En effet, Devise charge les vues à partir de son gemset. Pour le personnaliser, vous devez générer des copies des vues. La commande ci-dessous fait la magie.

les rails génèrent des vues: vues

Cela générera des dossiers et des fichiers dans votre app / vues annuaire.

Vous devrez modifier la page pour vous connecter, vous connecter et mettre à jour les informations utilisateur. Il suffit de coller les blocs de code ci-dessous dans leurs fichiers respectifs.

S'inscrire

# app / views / inventer / registrations / new.html.erb S'inscrire
 <%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %> <%= devise_error_messages! %>  <%= f.label :email %>
 <%= f.email_field :email, autofocus: true, class: "form-control" %> 
  <%= f.label :username %> <%= f.text_field :username, class: "form-control" %> 
  <%= f.label :password %> <% if @minimum_password_length %> (<%= @minimum_password_length %> caractères minimum) <% end %>
 <%= f.password_field :password, autocomplete: "off", class: "form-control" %> 
  <%= f.label :password_confirmation %>
 <%= f.password_field :password_confirmation, autocomplete: "off", class: "form-control" %> 
  <%= f.submit "Sign up", class: "btn btn-primary" %> 
 <% end %> <%= render "devise/shared/links" %>

modifier

# app / views / inventer / registrations / edit.html.erb modifier <%= resource_name.to_s.humanize %>
 <%= form_for(resource, as: resource_name, url: registration_path(resource_name), html:  method: :put ) do |f| %> <%= devise_error_messages! %>  <%= f.label :email %>
 <%= f.email_field :email, autofocus: true, class: "form-control" %> 
 <% if devise_mapping.confirmable? && resource.pending_reconfirmation? %> En attente de confirmation pour: <%= resource.unconfirmed_email %>
 <% end %>  <%= f.label :username %> <%= f.text_field :username, class: "form-control" %> 
  <%= f.label :password %> (laissez vide si vous ne voulez pas le changer)
 <%= f.password_field :password, autocomplete: "off", class: "form-control" %> 
  <%= f.label :password_confirmation %>
 <%= f.password_field :password_confirmation, autocomplete: "off", class: "form-control" %> 
  <%= f.label :current_password %> (nous avons besoin de votre mot de passe actuel pour confirmer vos modifications)
 <%= f.password_field :current_password, autocomplete: "off", class: "form-control" %> 
  <%= f.submit "Update", class: "btn btn-primary" %> 
 <% end %> Annuler mon compte
 Malheureux? <%= button_to "Cancel my account", registration_path(resource_name), data:  confirm: "Are you sure?" , method: :delete %>
 <%= link_to "Back", :back %>

Se connecter

# app / views / devise / sessions / new.html.erb S'identifier
 <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>  <%= f.label :username %>
 <%= f.text_field :username, autofocus: true, class: "form-control" %> 
  <%= f.label :password %>
 <%= f.password_field :password, autocomplete: "off", class: "form-control" %> 
 <% if devise_mapping.rememberable? -%>  <%= f.check_box :remember_me %> <%= f.label :remember_me %> 
 <% end -%>  <%= f.submit "Log in", class: "btn btn-primary" %> 
 <% end %> <%= render "devise/shared/links" %>

À l'aide de votre éditeur de texte, naviguez jusqu'à app / controllers / application_controller.rb. Vous devez le modifier pour permettre l'utilisation du nom d'utilisateur. Modifiez-le pour qu'il ressemble à ceci:

classe # app / controllers / application_controller.rb ApplicationController < ActionController::Base # Prevent CSRF attacks by raising an exception. # For APIs, you may want to use :null_session instead. protect_from_forgery with: :exception before_action :configure_permitted_parameters, if: :devise_controller? protected def configure_permitted_parameters added_attrs = [:username, :email, :password, :password_confirmation, :remember_me] devise_parameter_sanitizer.permit :sign_up, keys: added_attrs devise_parameter_sanitizer.permit :account_update, keys: added_attrs end end

Désormais, un utilisateur peut se connecter avec son nom d'utilisateur. À ce stade, quelque chose ne va pas dans votre demande. Lorsqu'un utilisateur se connecte, il n'y a aucun moyen de se déconnecter. Cela n'entraîne pas une expérience utilisateur exceptionnelle. Je vais vous montrer comment résoudre ce problème.

A partir de votre terminal, créez un nouveau répertoire appelé partagé dans ton app / vues dossier.

mkdir app / views / shared app tactile / views / shared / _navigation.html.erb

Le fichier que vous avez créé ci-dessus est un partiel où le code de votre barre de navigation sera écrit. Déposer dans le code suivant.

# app / views / shared / _navigation.html.erb    <%= link_to 'Tutsplus Devise', root_path, class: 'navbar-brand' %> 
   <%= link_to 'Home', root_path %>
 
  <% if user_signed_in? %>   <%= current_user.name %>    <%= link_to 'Profile', edit_user_registration_path %>
 <%= link_to 'Log out', destroy_user_session_path, method: :delete %>
 
 
 <% else %> <%= link_to 'Log In', new_user_session_path %>
 <%= link_to 'Sign Up', new_user_registration_path %>
 <% end %>

Vous devez maintenant rendre la barre de navigation dans la présentation de votre application. S'ouvrir app / views / layouts / application.html.erb et déposez le code pour rendre votre barre de navigation.

# app / views / layouts / application.html.erb…  <%= render "shared/navigation" %> <%= notice %>
 <%= alert %>
 
…

Conclusion

Dans cette partie, vous avez appris à installer Devise et à ajouter une authentification à vos pages. J'ai aussi mentionné un partiel. Je vais couvrir cela dans un tutoriel séparé.

Dans la prochaine partie, nous aborderons certains domaines plus avancés que cela. J'espère que cela valait la peine!

Code