Dans ce didacticiel, vous apprendrez à permettre aux utilisateurs de votre application de se connecter à l’aide de leur compte Twitter. Faire cela a été facilité avec des outils tels que OAuth.

Vous utiliserez OmniAuth-Twitter, qui contient la stratégie Twitter pour OmniAuth..

Plongeons dedans!

Commencer

Commencez par générer votre application Rails. Depuis votre terminal, lancez la commande pour le faire:

rails nouveaux Tuts-Social -T 

Ouvrez votre Gemfile et ajoutez la gemme de bootstrap.

# Gemfile… gem 'bootstrap-sass'

Installez la gemme en lançant la commande:

installation groupée

Renommer app / assets / stylesheets / application.css à app / assets / stylesheets / application.scs.

Une fois terminé, ajoutez les lignes de code suivantes pour importer bootstrap.

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

Créer un partiel nommé _navigation.html.erb contenir votre code de navigation; le partiel doit être situé dans le app / vues / mises en page annuaire.

Entrez le code ci-dessous dans un IDE. Il utilise Bootstrap pour créer une barre de navigation pour votre application.

# app / views / layouts / _navigation.html.erb 

Pour que la navigation soit utilisée, vous devez la rendre dans la présentation de votre application. Tweak votre mise en page de l'application pour ressembler à ce que j'ai en dessous.

# app / views / layouts / application.html.erb     <%= csrf_meta_tags %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>   <%= render "layouts/navigation" %> 
 <% flash.each do |key, value| %> 
<%= value %>
 <% end %> 
 
 <%= yield %> 
  

Générer un PagesController avec une action d'index en entrant la commande ci-dessous dans votre terminal.

rails générés contrôleur index des pages

Dans les vues d'index générées, éditez-le pour qu'il ressemble à ceci.

# app / views / pages / index.html.erb 
 
Bienvenue chez Tuts Social!
 
Merci de nous consulter!
 

Dans le code ci-dessus, nous utilisons une classe appelée Jumbotron-Il s'agit d'un composant Bootstrap qui nous permet d'étendre la fenêtre d'affichage pour présenter un message marketing. Vous pouvez trouver plus d'informations à ce sujet dans la documentation Bootstrap.

Ouvrez votre fichier de routes pour ajouter votre chemin_racine.

# config / routes.rb Rails.application.routes.draw do # Pour plus de détails sur la DSL disponible dans ce fichier, voir http://guides.rubyonrails.org/routing.html. racine à: "pages # index" fin

Configuration d'OmniAuth-Twitter

Vous devez créer une nouvelle application Twitter. Accédez à cette page dans les pages de développeur Twitter pour en créer une. Entrez tous les détails nécessaires, semblables à ce que j'ai dans la capture d'écran ci-dessous.

Pour l'URL de rappel, entrez l'adresse de votre site Web plus "auth / twitter / callback". Si vous vous trouvez sur un ordinateur local, votre URL de rappel devrait être la suivante: http://127.0.0.1:3000/auth/twitter/callback. 

Vous serez redirigé vers la page d'information de l'application sur Twitter. Accédez au Clés et jetons d'accès onglet pour obtenir vos clés. Copiez la clé du consommateur et le secret du consommateur et collez-les dans un endroit sûr. Nous les utiliserons sous peu..

L'URL de rappel est l'URL vers laquelle un utilisateur sera redirigé dans l'application après une authentification réussie et une autorisation approuvée (la demande contiendra également les données et le jeton de l'utilisateur). Toutes les stratégies OmniAuth prévoient que l'URL de rappel est égale à «/ auth /: provider / callback».. :fournisseur prend le nom de la stratégie. Dans ce cas, la stratégie sera "twitter" comme vous le listerez dans l'initialiseur.

Ouvrez votre Gemfile ajouter le omniauth-deux fois gemme.

# Gemfile… gem 'omniauth-twitter'

Créez maintenant un initialiseur pour OmniAuth dans votre répertoire config / initializers. Cela tiendra la configuration pour OmniAuth. Faites-le ressembler à ce que j'ai ci-dessous.

# config / initializers / omniauth.rb Rails.application.config.middleware.use fournisseur OmniAuth :: Builder do: twitter, ENV ['TWITTER_KEY'], ENV ['TWITTER_SECRET']

À ce stade, vous devez utiliser les clés et les jetons d’accès que vous avez stockés en toute sécurité. Vous devez les garder en sécurité, car vous ne voulez pas les transférer dans un référentiel public lorsque vous validez votre code..

Vous ferez usage d'un bijou pour cela. Ouvrez à nouveau votre Gemfile et ajoutez la gemme ci-dessous. Ajoutez-le à votre Gemfile comme ceci:

# Gemfile… groupe: développement,: test do… gem 'dotenv-rails'… 

Pour installer la gemme, lancez.

installation groupée

Dans le répertoire de base de votre application, créez un fichier appelé .env.

Ouvrez-le et ajoutez vos clés et vos jetons comme suit:

# .env TWITTER_KEY = xxxxxxxxxxxxxxx TWITTER_SECRET = xxxxxxxxxxxxxx

Ouvrir .gitignore et ajoutez le fichier que vous venez de créer.

# .gitignore… # Ignore .env utilisé pour stocker les clés et les jetons d'accès .env

Ceci fait, vos clés et vos jetons d’accès sont en sécurité! Pour en savoir plus sur l'utilisation DOTENV-des rails, se référer à la page GitHub.

Il est temps de travailler sur votre itinéraire. Ouvrez votre fichier de routes et ajoutez la route ci-dessous.

# config / routes.rb… get '/ auth /: provider / callback', à: 'sessions # create'

Vous devez ajouter le lien pour la connexion Twitter à votre navigation. Ouvrez votre fichier de navigation et ajustez-le pour qu'il ressemble à ceci.

À partir de ce qui précède, vous souhaitez afficher le lien pour vous connecter à Twitter uniquement lorsque l'utilisateur n'est pas connecté..

Création de sessions

Vous aurez besoin d'un contrôleur de session pour gérer la connexion des utilisateurs. Créez un fichier pour cela dans votre répertoire de contrôleurs; voici à quoi cela devrait ressembler.

L'action create aide à créer une session pour les utilisateurs afin qu'ils puissent être connectés à votre application. Sans cela, les utilisateurs n'ont aucun moyen de se connecter.

# app / controllers / sessions_controller.rb class SessionsController < ApplicationController def create @user = User.find_or_create_from_auth_hash(auth_hash) session[:user_id] = @user.id redirect_to root_path end protected def auth_hash request.env['omniauth.auth'] end end

Vous aurez besoin d'un utilisateur actuel méthode à ce stade. Cela vous aidera à vérifier si un utilisateur est connecté ou non..

Ouvrir app / controllers / application_controller.rb et ajoutez ce qui suit.

# app / controllers / application_controller.rb… def current_user @current_user || = User.find (session [: user_id]) si la session [: user_id] termine helper_method: current_user… 

Modèle d'utilisateur

Générez maintenant un modèle pour vos utilisateurs. Exécutez la commande pour le faire.

rails générés modoel Fournisseur d'utilisateur: chaîne uid: nom de chaîne: chaîne jeton: chaîne secret: chaîne image_profil: chaîne

Cela devrait générer un fichier de migration qui ressemble à ceci.

# xxxxxx_create_users.rb classe CreateUsers < ActiveRecord::Migration[5.0] def change create_table :users do |t| t.string :provider t.string :uid t.string :name t.string :token t.string :secret t.string :profile_image t.timestamps end end end

Maintenant, migrez votre base de données en exécutant:

rake db: migrer

Ouvrez votre modèle d’utilisateur et donnez-lui l’image suivante:

# app / models / user.rb class Utilisateur < ApplicationRecord def self.find_or_create_from_auth_hash(auth_hash) user = where(provider: auth_hash.provider, uid: auth_hash.uid).first_or_create user.update( name: auth_hash.info.nickname, profile_image: auth_hash.info.image, token: auth_hash.credentials.token, secret: auth_hash.credentials.secret ) user end end

Le code ci-dessus stocke certaines informations appartenant à l'utilisateur. Cela inclut le nom, l’image de profil, le jeton et le secret de l’utilisateur. Si votre application nécessite plus que cela, vous pouvez consulter la page OmniAuth-Twitter.

Suppression de sessions

Dans votre application, vous souhaitez donner aux utilisateurs la possibilité de se déconnecter. Vous aurez besoin d'un détruire action dans votre SessionsController pour que cela fonctionne. Ensuite, un lien sera ajouté à votre navigation.

Ajouter le détruire action à votre SessionsController.

# app / controllers / sessions_controller.rb… def détruire si utilisateur_current session.delete (: user_id) flash [: success] = "Déconnecté avec succès!" end redirect_to root_path end… 

Ajoutez ensuite ce lien pour vous déconnecter de votre navigation, pour que votre navigation ressemble à ceci.

# app / views / layouts / _navigation.html.erb 

Ouvrez votre config / routes.rb pour mettre à jour vos routes avec l'action que vous venez de créer..

# config / routes.rb… supprimez '/ logout', pour: 'sessions # destroy'… 

Démarrez votre serveur rails et pointez votre navigateur sur http: // localhost: 3000 pour voir ce que vous avez..

Conclusion

Dans ce tutoriel, vous avez appris comment activer OmniAuth-Twitter dans votre application Rails. Vous avez vu comment obtenir les données des utilisateurs utilisant OmniAuth-Twitter, ce que vous avez fait dans votre modèle d'utilisateur. Vous avez pu créer SessionControllers gérer la connexion et la déconnexion des utilisateurs depuis votre application.

J'espère que vous avez aimé. À l'avenir, vous verrez comment faire de même pour Facebook, Google et LinkedIn..