Comment utiliser Omniauth pour authentifier vos utilisateurs

Je déteste m'inscrire à des sites Web. Je me suis déjà inscrit pour un si grand nombre de personnes, sous différents noms d'utilisateur, qu'il est parfois impossible de revenir à l'un d'entre eux et de garder en mémoire mes informations d'identification. Ces jours-ci, la plupart des sites ont commencé à proposer d'autres moyens de s'inscrire, en vous permettant d'utiliser votre compte Facebook, Twitter ou même votre compte Google. Créer une telle intégration est parfois une tâche longue et ardue. Mais ne craignez rien, Omniauth est là pour vous aider.

Omniauth vous permet d’intégrer facilement plus de soixante fournisseurs d’authentification, notamment Facebook, Google, Twitter et GitHub. Dans ce tutoriel, je vais vous expliquer comment intégrer ces fournisseurs d'authentification à votre application..


Étape 1: Préparation de votre application

Créons une nouvelle application Rails et ajoutons les gemmes nécessaires. Je suppose que vous avez déjà installé Ruby et Ruby on Rails 3.1 à l'aide de RubyGems..

 rails nouveau tutoriel omniauth

Maintenant, ouvrez votre Gemfile et référence la gemme omniauth.

 gem 'omniauth'

Ensuite, comme d'habitude, lancez le installation groupée commande pour installer la gemme.


Étape 2: Création d'un fournisseur

Pour ajouter un fournisseur à Omniauth, vous devez vous inscrire en tant que développeur sur le site du fournisseur. Une fois que vous vous êtes inscrit, vous recevrez deux chaînes (qui ressemblent à un nom d'utilisateur et à un mot de passe), qui doivent être transmises à Omniauth. Si vous utilisez un fournisseur OpenID, tout ce dont vous avez besoin est l’URL OpenID..

Si vous souhaitez utiliser l'authentification Facebook, rendez-vous sur developers.facebook.com/apps et cliquez sur? Créer une nouvelle application.?.

Remplissez toutes les informations nécessaires et, une fois terminé, copiez l'identifiant et le secret de votre application..

La configuration de Twitter est un peu plus compliquée sur une machine de développement, puisqu'elle ne vous permet pas d'utiliser? Localhost? comme un domaine pour les rappels. La configuration de votre environnement de développement pour ce genre de choses n’entre pas dans le cadre de ce didacticiel, cependant, je vous recommande d’utiliser Pow si vous êtes sur Mac..


Étape 3: Ajoutez vos fournisseurs à l'application

Créer un nouveau fichier sous config / initialiseurs appelé omniauth.rb. Nous allons configurer nos fournisseurs d'authentification via ce fichier.

Collez le code suivant dans le fichier créé précédemment:

 Rails.application.config.middleware.use Fournisseur OmniAuth :: Builder do: facebook, YOUR_APP_ID, YOUR_APP_SECRET fin

Honnêtement, c’est toute la configuration dont vous avez besoin pour commencer. Omniauth s’occupe du reste, comme nous le verrons dans la prochaine étape.


Étape 4: Création de la page de connexion

Créons notre contrôleur de sessions. Exécutez le code suivant dans votre terminal pour créer un nouveau sessions contrôleur, et le Nouveau, créer, et échec actes.

les rails génèrent des sessions de contrôleur

Ensuite, ouvrez votre config / routes.rb déposer et ajouter ceci:

 obtenez '/ login',: to => 'sessions # new',: as =>: login match '/ auth /: provider / callback',: to => 'sessions # create' match '/ auth / failure', : to => 'sessions # failure'

Décomposons ceci:

  • La première ligne est utilisée pour créer un formulaire de connexion simple où l'utilisateur verra un simple? Connectez-vous avec Facebook? lien.
  • La deuxième ligne consiste à intercepter le rappel du fournisseur. Une fois qu'un utilisateur a autorisé votre application, le fournisseur le redirige vers cette URL afin que nous puissions utiliser ses données..
  • Le dernier sera utilisé en cas de problème ou si l'utilisateur n'a pas autorisé notre application..

Assurez-vous de supprimer les itinéraires créés automatiquement lors de l'exécution du les rails génèrent commander. Ils ne sont pas nécessaires pour notre petit projet.

Ouvrez votre app / controllers / sessions_controller.rb déposer et écrire le créer méthode, comme si:

 def crée auth_hash = request.env ['omniauth.auth'] rend: text => auth_hash.inspect end

Ceci est utilisé pour s'assurer que tout fonctionne. Pointez votre navigateur sur localhost: 3000 / auth / facebook et vous serez redirigé vers Facebook afin que vous puissiez autoriser votre application (plutôt cool hein?). Autorisez-le, et vous serez redirigé vers votre application et verrez un hachage contenant des informations. Entre les deux, vous trouverez votre nom, votre identifiant Facebook et votre email, entre autres.


Étape 5: Création du modèle d'utilisateur

L'étape suivante consiste à créer un modèle utilisateur afin que les utilisateurs puissent s'inscrire à l'aide de leur compte Facebook. Dans la console Rails (console de rails), créer le nouveau modèle.

les rails génèrent le modèle Nom d'utilisateur: chaîne email: chaîne

Pour l'instant, notre utilisateur modèle aura seulement un prénom Et un email. Cela dit, nous avons besoin d’un moyen de reconnaître l’utilisateur lors de sa prochaine connexion. N'oubliez pas que nous n’avons pas de champs dans notre modèle d’utilisateur à cette fin..

L'idée derrière une application telle que celle que nous essayons de créer est qu'un utilisateur peut choisir d'utiliser Facebook ou Twitter (ou tout autre fournisseur) pour s'inscrire. Nous avons donc besoin d'un autre modèle pour stocker ces informations. Créons le:

rails generer le modele Fournisseur d'autorisation: string uid: string id_utilisateur: entier

Un utilisateur aura une ou plusieurs autorisations. Lorsque quelqu'un tente de se connecter à l'aide d'un fournisseur, il suffit d'examiner les autorisations de la base de données et d'en rechercher une qui correspond à la uid et fournisseur des champs. De cette façon, nous permettons également aux utilisateurs d'avoir plusieurs fournisseurs, afin qu'ils puissent ensuite se connecter via Facebook, Twitter ou tout autre fournisseur qu'ils ont configuré.!

Ajoutez le code suivant à votre app / models / user.rb fichier:

 has_many: les autorisations valident: nom,: email,: presence => true

Cela spécifie qu'un utilisateur peut avoir plusieurs autorisations, et que le prénom et email les champs de la base de données sont obligatoires.

Ensuite, à votre app / modèles / autorisation.rb fichier, ajouter:

 appartient_à: l'utilisateur valide: fournisseur,: uid,: presence => true

Dans ce modèle, nous désignons chaque autorisation comme étant liée à un utilisateur. Nous avons également mis en place une validation.


Étape 6: Ajout d’un peu de logique à notre contrôleur de sessions

Ajoutons du code à nos sessions manette afin qu’il connecte un utilisateur ou l’insigne, selon les cas. Ouvrir app / controllers / sessions_controller.rb et modifier le créer méthode, comme si:

 def create auth_hash = request.env ['omniauth.auth'] @authorization = Authorization.find_by_provider_and_uid (auth_hash ["fournisseur"], auth_hash ["uid"]) si @authorization render: text => "Welcome back # @ authorisation .user.nom! Vous êtes déjà inscrit. " else user = User.new: name => auth_hash ["user_info"] ["name"],: email => auth_hash ["user_info"] ["email"] user.authorizations.build: fournisseur => auth_hash ["fournisseur "],: uid => auth_hash [" uid "] user.save render: text =>" Hi # user.name! Vous vous êtes inscrit. " fin fin

Ce code nécessite clairement une refactorisation, mais nous y reviendrons plus tard. Passons en revue d'abord:

  • Nous vérifions si une autorisation existe pour ce fournisseur et cela uid. S'il en existe un, notre utilisateur est de retour.
  • Si aucune autorisation n'existe, nous enregistrons l'utilisateur. Nous créons un nouvel utilisateur avec le nom et l'adresse électronique que nous a fournis le fournisseur (Facebook dans ce cas), et nous associons une autorisation au fournisseur et le uid ont reçu.

Faites un test! Allez sur localhost: 3000 / auth / facebook et vous devriez voir? Vous êtes inscrit ?. Si vous actualisez la page, vous devriez maintenant voir? Bienvenue à nouveau?.


Étape 7: activation de plusieurs fournisseurs

L'idéal serait de permettre à un utilisateur de s'inscrire via un fournisseur et d'ajouter ultérieurement un autre fournisseur afin de disposer de plusieurs options pour se connecter. Notre application ne permet pas cela pour l'instant. Nous devons reformuler notre code un peu. Change ton sessions_controlller.rbde créer méthode pour ressembler à ceci:

 def create auth_hash = request.env ['omniauth.auth'] if session [: user_id] # signifie que notre utilisateur est connecté. Ajoutez l'autorisation à l'utilisateur User.find (session [: user_id]). add_provider (auth_hash) render : text => "Vous pouvez maintenant vous connecter en utilisant # auth_hash [" fournisseur "]. capitalize aussi!" else # Connectez-vous ou connectez-le. auth = Authorization.find_or_create (auth_hash) # Créez la session [: user_id] = auth.user.id render: text => "Welcome # auth.user.name!" fin fin

Passons en revue ceci:

  • Si l'utilisateur est déjà connecté, nous allons ajouter le fournisseur qu'il utilise à son compte..
  • S'ils ne sont pas connectés, nous allons essayer de trouver un utilisateur avec ce fournisseur ou en créer un si nécessaire..

Pour que le code ci-dessus fonctionne, nous devons ajouter quelques méthodes à notre Utilisateur et Autorisation des modèles. Ouvrir user.rb et ajoutez la méthode suivante:

 def add_provider (auth_hash) # Vérifie si le fournisseur existe déjà. Par conséquent, nous ne l’ajoutons pas deux fois sauf autorisation.find_by_provider_and_uid (auth_hash ["fournisseur"], auth_hash ["uid"]) Authorization.create: user => self,: fournisseur => auth_hash ["fournisseur"],: uid => auth_hash ["uid"] end end

Si l'utilisateur n'a pas déjà associé ce fournisseur à son compte, nous allons l'ajouter et l'ajouter - c'est simple. Maintenant, ajoutez cette méthode à votre autorisation.rb fichier:

 def self.find_or_create (auth_hash) sauf si auth = find_by_provider_and_uid (auth_hash ["fournisseur"], auth_hash ["uid"]) utilisateur = utilisateur.créer: nom => auth_hash ["utilisateur_info"] ["nom"],: email = > auth_hash ["user_info"] ["email"] auth = créer: utilisateur => utilisateur,: provider => auth_hash ["fournisseur"],: uid => auth_hash ["uid"] end auth end

Dans le code ci-dessus, nous essayons de trouver une autorisation qui correspond à la demande et, en cas d’échec, nous créons un nouvel utilisateur..

Si vous voulez essayer ceci localement, vous aurez besoin d'un deuxième fournisseur d'authentification. Vous pouvez utiliser le système OAuth de Twitter, mais, comme je l'ai déjà indiqué, vous devrez utiliser une approche différente, car Twitter ne permet pas l'utilisation de? Localhost? comme le domaine de l'URL de rappel (du moins, cela ne fonctionne pas pour moi). Vous pouvez également essayer d’héberger votre code sur Heroku, ce qui est parfait pour un site simple comme celui que nous créons..


Étape 8: Quelques ajustements supplémentaires

Enfin, nous devons bien sûr permettre aux utilisateurs de se déconnecter. Ajoutez ce morceau de code à votre contrôleur de sessions:

 def destroy session [: user_id] = nil render: text => "Vous vous êtes déconnecté!" fin

Nous devons également créer la route applicable (en routes.rb).

 obtenir '/ logout',: to => 'sessions # destroy'

C'est aussi simple que ça! Si vous accédez à localhost: 3000 / logout, votre session doit être effacée et vous serez déconnecté. Cela facilitera l’essai de plusieurs comptes et fournisseurs. Nous devons également ajouter un message qui s'affiche lorsque les utilisateurs refusent l'accès à notre application. Si vous vous en souvenez, nous avons ajouté cette route au début du didacticiel. Maintenant, il suffit d’ajouter la méthode dans le sessions manette:

 def failure render: text => "Désolé, mais vous n'avez pas autorisé l'accès à notre application!" fin

Enfin, créez la page de connexion sur laquelle l’utilisateur peut cliquer sur le lien? Connectez-vous à Facebook? lien. Ouvrir app / views / sessions / new.html.erb et ajouter:

 <%= link_to "Connect With Facebook", "/auth/facebook" %>

Si vous allez sur localhost: 3000 / login, un lien vous redirigera vers la page d'authentification de Facebook..


Conclusion

J'espère que cet article vous a fourni un bref exemple du fonctionnement d'Omniauth. C'est un joyau extrêmement puissant qui vous permet de créer des sites Web ne nécessitant aucune inscription de l'utilisateur, ce qui est toujours un avantage! Vous pouvez en apprendre davantage sur Omniauth sur GitHub.

Faites-moi savoir si vous avez des questions!