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..
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.
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..
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.
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:
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.
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.
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:
fournisseur
et cela uid
. S'il en existe un, notre utilisateur est de retour.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?.
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.rb
de 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:
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..
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..
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!