🍪🔗 OmniAuth facile : Connectez vos utilisateurs via Facebook, Google, LinkedIn et plus encore !
Temps de lecture : 5 minutes
Vous avez selon toute vraisemblance déjà utilisé des fast-connect pour vous connecter sur différents sites. Pour rappel, ces options permettent à l'utilisateur d'éviter le formulaire d'inscription pour accéder à une application web nécessitant une authentification. Généralement, des boutons d'action permettent de se connecter via un ou plusieurs fournisseurs (providers), tels que Google, Facebook et LinkedIn.
Au programme aujourd’hui :
OmniAuth facile : Connectez vos utilisateurs via Facebook, Google, LinkedIn et plus encore ! par Stan
Temps de lecture : 5 minutes
Hello les petits Biscuits !
Bienvenue sur la 23ème édition de Ruby Biscuit.
Vous êtes maintenant 492 abonnés 🥳
Maintenant Ruby biscuit, c’est aussi votre meilleur allier pour recruter des devs Ruby !
Si vous n’avez pas encore rejoint le club, RDV sur https://recrutement.rubybiscuit.fr
Bonne lecture !
OmniAuth facile : Connectez vos utilisateurs via Facebook, Google, LinkedIn et plus encore !
Bonjour à tous ! Ce mois-ci, nous allons voir comment s’articule OmniAuth et comment le mettre en place sur nos plateforme, c'est parti 👇🏻
Mise en place
Tout d'abord, sachez que nous partons d'une application vierge utilisant Ruby 2.7.5 et Rails 7.1.3.2. Cela devrait donc être facilement adaptable sur vos plateformes. De plus, il nous sera nécessaire d'utiliser une table en base de données pour tester l'authentification. Créons donc la table users (très original je sais).
Nous aurons aussi besoin de plusieurs gems pour faire fonctionner tout cela :
une gem pour gérer les clés secrètes (ici figaro)
dry-transaction (pour encapsuler notre logique dans le controller, mais libre à vous de passer outre)
Implémentation
Avec toutes les gems installées, nous avons devise. Et ça tombe bien car la documentation de devise propose un Wiki détaillé sur l'implémentation d'une stratégie OmniAuth avec Facebook ! Suivons donc ces instructions pour Facebook dans un premier temps.
Ajoutons une colonne à notre table users :
rails g migration AddFacebookUidToUsers facebook_uid:stringEnsuite, nous devons obtenir les APP_ID & APP_SECRET, mais qu'est-ce que c'est et où les trouve-t-on ? Pour cela, suivez les étapes de la documentation de la gem Facebook.
Maintenant revenons sur le Wiki. Dans devise.rb mettons :
(vous remarquerez que les noms de variables ont changés)
Ajoutons dans notre model user.rb :
Mettons à jour nos routes pour que devise redirige vers un controller spécifique :
Ensuite créons ce controller :
Nous avons ici la méthode launch_omniauth_transaction pour gérer plusieurs providers.
La logique utilisée dans cette méthode est encapsulée dans dry-transaction dans un fichier dédié app/transactions/users/omniauth_transaction.rb :
Enfin, la méthode from_omniauth dans user.rb :
Et voilà ! Nous avons toute la configuration nécéssaire pour nous connecter via Facebook. Si tout s'est bien passé, vous devriez voir un flash indiquant le succès de la connexion (notez mes talents de designer) :
Le plus dur est fait, attelons nous donc à mettre omniauth-google-oauth2 en place !
Comme précédemment, faisons une migration et ajoutons google_uid à notre table users. Suivons la doc pour générer des clés secrètes, mettons les dans le devise.rb, ajoutons google_oauth2 aux omniauth_providers dans le model User, et créons une méthode dans le controller.
Testons cela et nous devrions avoir une configuration fonctionnelle.
Maintenant supposons que j'ai également mis en place LinkedIn omniauth, que se passerait-il si j'avais la même adresse mail pour Google et LinkedIn ? 👇🏻
Je ne créée pas de compte supplémentaire mais mon compte avec la même adresse mail a désormais des uid pour plusieurs providers.
Tests
Place maintenant aux tests avec Rspec :
spec/requests/users/omniauth_callbacks_requests_spec.rb
spec/transactions/users/omniauth_transaction_spec.rb
En conclusion
L'étape la plus rébarbative est la consultation et la compréhension des pré-requis pour chaque gem. Une fois que vous aurez mis en place votre controller et que votre premier fast-connect fonctionnera, tout cela sera adaptable et réutilisable de façon simple et rapide.
Voilà, vous avez désormais toutes les cartes en main pour mettre en place une des fonctionnalités les plus populaires du web actuel qui améliore la vie de vos utilisateurs 😎
NB : Les informations présentées sont tirées de différentes documentations et datent de juin 2024. Elles sont donc susceptibles de changer au cours du temps.
Si vous souhaitez récupérer le code, vous pouvez nous le demander en répondant à cette newsletter !
— Stan