TOC

Comment configurer Devise et OmniAuth pour votre application Rails

introduction

La plupart des applications Ruby on Rails nécessitent des mécanismes d’enregistrement et d’authentification de l’utilisateur. Leur développement à partir de zéro demande beaucoup de temps et d’efforts - heureusement, il existe * Devise *. En utilisant la gemme Devise, vous pouvez configurer un système d’authentification d’utilisateur à part entière en quelques minutes.

Cependant, vous pourriez rendre vos utilisateurs plus heureux en leur permettant d’accéder à votre application sans créer de nouveau compte. Ils pourraient simplement se connecter en utilisant leurs comptes Facebook, Twitter, Amazon ou DigitalOcean existants. En fait, vous pouvez prendre en charge l’authentification auprès de tout fournisseur de services OAuth populaire. Le support OAuth est fourni par la gemme OmniAuth. Dans ce tutoriel, nous allons créer une application simple qui utilise à la fois Devise et OmniAuth.

Conditions préalables

Avant de commencer, assurez-vous que les dernières versions de RVM, Ruby et Rails sont installées sur votre hôte. Si vous ne le faites pas, suivez les instructions ci-dessous: https://www.digitalocean.com/community/tutorials/how-to-install-ruby-on-rails-on-ubuntu-12-04-lts-precise- pangolin-with-rvm [Comment installer Ruby on Rails sur Ubuntu 12.04 LTS avec RVM]

Ce tutoriel a été testé avec Ruby 2.1.2 et Rails 4.1.5.

Étape 1 - Créer une nouvelle application Rails

Il est recommandé de regrouper toutes vos applications Rails dans un répertoire séparé.

Vous devriez en créer un maintenant.

mkdir rails_apps
cd rails_apps

Vous devez initialiser l’environnement RVM avant de commencer à émettre des commandes Rails.

Si vous faites une pause en suivant ce didacticiel, n’oubliez pas de le faire chaque fois que vous redémarrez votre session de terminal.

. ~/.rvm/scripts/rvm
rvm use ruby --default

Appelons la nouvelle application * myapp *. Après avoir créé l’application, utilisez pour entrer le répertoire de base de l’application.

rails new myapp
cd myapp

  • Remarque: Toutes les commandes Rails doivent être exécutées à partir du répertoire de votre application, qui est dans ce cas ~ / rails_apps / myapp. *

Étape 2 - Ajouter les gemmes requises au gemfile

Nous aurons besoin des joyaux Devise et OmniAuth. En outre, vous aurez également besoin d’une gemme distincte pour chaque fournisseur de services OAuth que vous souhaitez prendre en charge. Pour ce tutoriel, nous prendrons en charge la connexion à l’aide de DigitalOcean. Nous avons donc besoin de la gemme.

Ajoutez les lignes suivantes à la fin du fichier + ~ / rails_apps / myapp / Gemfile +. Vous pouvez utiliser comme éditeur de texte.

gem 'therubyracer'
gem 'devise'
gem 'omniauth'
gem 'omniauth-digitalocean'

Vous aurez besoin de gemmes similaires pour prendre en charge d’autres fournisseurs. Par exemple, pour soutenir Facebook, vous aurez besoin de. Voici certains de ces joyaux pour votre référence:

  • Twitter - omniauth-twitter

  • Amazon - omniauth-amazon

  • Google - omniauth-google

  • Github - omniauth-github

Installez les gemmes nouvellement ajoutées.

bundle install

Étape 3 - Ajouter des fonctionnalités de base à l’application

Ajoutons rapidement quelques pages à cette application pour les tests. Finalement, ces pages ne seront accessibles qu’après la connexion.

Nous pouvons utiliser la fonction d’échafaudage de Rails à cet effet. A l’aide de la commande, nous spécifions simplement les détails d’un modèle et Rails génère des pages entièrement fonctionnelles pour effectuer des opérations CRUD (Créer Lecture, Supprimer, Supprimer) sur ce modèle. En d’autres termes, tous les contrôleurs et vues associés sont générés, ainsi que le fichier de modèle.

rails g scaffold Product name:string price:integer description:text
rake db:migrate

Ensuite, nous devons définir la racine de cette application.

Éditez + ~ / rails_apps / myapp / config / routes.rb + et ajoutez la ligne + racine 'products # index' + pour spécifier la racine de l’application, juste en dessous de la ligne existante. Vous pouvez ignorer toutes les lignes qui sont commentées. Une fois que vous avez terminé, les lignes actives du fichier ressemblent à ceci:

Rails.application.routes.draw do
 resources :products

end

Allez-y, testez votre application maintenant. Démarrez le serveur de développement en tapant:

rails s

Visitez localhost à partir de votre navigateur. Si vous développez à distance, veuillez remplacer * localhost * par l’adresse IP ou le domaine approprié pour votre Droplet. * 3000 * est le numéro de port par défaut du serveur de développement.

Pour l’instant, aucun identifiant n’est requis. Ajoutez quelques produits en cliquant sur «Nouveau produit». Une fois que vous êtes convaincu que votre application fonctionne comme prévu, retournez au terminal et appuyez sur Ctrl + C pour arrêter le serveur.

Étape 4 - Configurer Devise

Tapez les commandes suivantes pour ajouter la prise en charge de l’authentification Devise.

rails generate devise:install
rails generate devise User
rake db:migrate

Cela ajoute les formulaires de connexion et d’inscription, ainsi que toute la logique associée.

Notre application dispose désormais d’un système d’authentification de base, dans lequel les utilisateurs peuvent s’inscrire eux-mêmes, puis se connecter. Cependant, toutes les pages sont toujours directement accessibles. Pour changer cela, éditez + ~ / rails_apps / myapp / app / controllers / application_controller.rb + et ajoutez-le en tant qu’action à exécuter avant de servir une page.

class ApplicationController < ActionController::Base
 protect_from_forgery with: :exception

end

Si vous le souhaitez, vous pouvez redémarrer le serveur de développement à l’aide de la commande et consulter les pages récemment ajoutées en visitant + http: //: 3000 / + (utilisez à nouveau votre propre domaine ou votre adresse IP). Vous devriez voir une page qui ressemble à ceci:

image: https: //assets.digitalocean.com/articles/Configure_Devise/1.jpg [page de connexion]

Vous pouvez vous enregistrer en tant que nouvel utilisateur en visitant + http: // localhost: 3000 / users / sign_up +.

Étape 5 - Mise à jour du modèle d’utilisateur pour prendre en charge OmniAuth

Si vous avez redémarré le serveur, arrêtez-le avec CTRL-C. Ajoutez une nouvelle colonne appelée au modèle généré par Devise.

rails g migration AddColumnsToUsers provider uid
rake db:migrate

Étape 6 - Obtenez l’ID client et le secret client auprès du fournisseur de services OAuth.

Visitez le site Web du fournisseur de services et enregistrez votre application là-bas. Tous les fournisseurs de services ont des procédures d’enregistrement différentes. Pour DigitalOcean, reportez-vous au tutoriel ici: Comment utiliser Authentification OAuth avec DigitalOcean en tant qu’utilisateur ou développeur

Une URL de rappel vous sera demandée lors de la procédure d’inscription. Il existe une URL de rappel distincte pour chaque fournisseur. Voici les URL de rappel de quelques fournisseurs de services populaires:

  • Digital Ocean: http: //: 3000 / users / auth / digitalocean / callback

  • Facebook: http: //: 3000 / utilisateurs / auth / facebook / callback

  • Amazon: http: //: 3000 / users / auth / amazon / callback

  • Twitter: http: //: 3000 / users / auth / twitter / callback

  • Google: http: //: 3000 / users / auth / google / callback

Veuillez remplacer * localhost * par une adresse IP ou un domaine qui résout votre Droplet. À la fin du processus d’inscription, vous recevrez votre ID client et votre secret client. Vous utiliserez ces valeurs à l’étape suivante.

Étape 7 - Mise à jour de l’initialiseur Devise

Éditez + ~ / rails_apps / myapp / config / initializers / devise.rb + pour ajouter les identifiants client et les secrets au bas du fichier, juste avant la ligne + end +. Il est également judicieux de mettre à jour le avec quelque chose qui porte le nom et l’utilisateur de votre propre serveur. Vous n’avez pas besoin de faire d’autres changements que ces deux éléments.

Après édition, votre fichier ressemblerait à ceci (il y aura également beaucoup de lignes commentées dans le fichier):

Devise.setup do |config|
 #Replace example.com with your own domain name
 config.mailer_sender =

 require 'devise/orm/active_record'
 config.case_insensitive_keys = [ :email ]
 config.strip_whitespace_keys = [ :email ]
 config.skip_session_storage = [:http_auth]
 config.stretches = Rails.env.test? ? 1 : 10
 config.reconfirmable = true
 config.expire_all_remember_me_on_sign_out = true
 config.password_length = 8..128
 config.reset_password_within = 6.hours
 config.sign_out_via = :delete

 #Add your ID and secret here
 #ID first, secret second

end

Étape 8 - Mettre à jour le modèle d’utilisateur

Le modèle utilisateur généré par Devise doit être modifié pour spécifier les fournisseurs de services que nous souhaitons utiliser. Nous ajoutons trois éléments à la liste existante (*: omniauthable,: omniauth_providers ⇒ [: digitalocean] *, et n’oubliez pas la virgule supplémentaire!). Nous créons également une nouvelle méthode nommée pour extraire les informations disponibles après l’authentification.

Après l’avoir édité, votre + ~ / rails_apps / myapp / app / models / user.rb + devrait ressembler à ceci:

class User < ActiveRecord::Base
 devise :database_authenticatable, :registerable,
        :recoverable, :rememberable, :trackable, :validatable,
    :omniauthable, :omniauth_providers => [:digitalocean]

 def self.from_omniauth(auth)
     where(provider: auth.provider, uid: auth.uid).first_or_create do |user|
       user.provider = auth.provider
       user.uid = auth.uid
       user.email = auth.info.email
       user.password = Devise.friendly_token[0,20]
     end
 end
end

Enregistrez le fichier.

Étape 9 - Ajouter un contrôleur pour gérer les URL de rappel

Commencez par éditer + ~ / rails_apps / myapp / config / routes.rb + et mettez à jour la ligne pour spécifier le nom du contrôleur qui gérera les rappels. Appelons-le simplement * callbacks *. Votre fichier devrait maintenant ressembler à ceci (moins les sections commentées):

Rails.application.routes.draw do
 devise_for :users
 resources :products
 root 'products#index'
end

Ensuite, créez un nouveau fichier + ~ / rails_apps / myapp / app / controllers / callbacks_controller.rb +.

Ajoutez-y le code suivant:

class CallbacksController < Devise::OmniauthCallbacksController
   def digitalocean
       @user = User.from_omniauth(request.env["omniauth.auth"])
       sign_in_and_redirect @user
   end
end

Si vous avez utilisé plus de fournisseurs OAuth, vous aurez besoin d’une méthode distincte pour chacun d’eux. Le nom de la méthode doit correspondre au nom du fournisseur. Par exemple, pour ajouter un support pour Facebook, votre méthode sera définie à l’aide de.

Votre application est maintenant prête. Relancez votre serveur:

rails s

Visitez votre page d’accueil. Puisque nous testons la fonctionnalité de connexion, vous souhaiterez peut-être le faire dans une session sans données stockées, telle qu’une fenêtre Chrome Incognito. Vous devriez voir un lien * Connexion avec Digitalocean *. Clique dessus. Vous devez être redirigé vers la page de connexion de DigitalOcean. Après une connexion réussie, vous serez redirigé vers votre propre application et la page des produits sera affichée.

image: https: //assets.digitalocean.com/articles/Configure_Devise/2.jpg [Connectez-vous avec DigitalOcean]

Conclusion

Vous disposez maintenant d’un système moderne d’authentification d’utilisateur pour votre application, dans lequel les utilisateurs peuvent se connecter à l’aide d’une adresse électronique, d’un compte de réseau social ou d’un autre service populaire.

Si vous décidez de mettre cette application en production sur Droplet, vous pouvez vous reporter au tutoriel ici: https://www.digitalocean.com/community/tutorials/how-to-launch-your-ruby-on-rails- app-with-the-digitalocean-one-click-image [Comment lancer votre application Ruby on Rails avec l’image One Click de DigitalOcean]. Si vous ajoutez votre application à un nouveau Droplet, n’oubliez pas de revenir à l’étape 6 pour mettre à jour les paramètres de votre API DigitalOcean avec les URL de rappel de votre serveur de production.

Related