In deze zelfstudie leert u hoe gebruikers van uw toepassing kunnen inloggen met hun Twitter-account. Dit doen is gemakkelijk gemaakt met hulpmiddelen zoals OAuth.

U maakt gebruik van OmniAuth-Twitter, dat de Twitter-strategie voor OmniAuth bevat.

Laten we erin duiken!

Ermee beginnen

Begin met het genereren van uw Rails-applicatie. Voer vanaf uw terminal het bevel uit om dit te doen:

rails nieuwe Tuts-Social -T 

Open je Gemfile en voeg de bootstrap-edelsteen toe.

# Gemfile ... gem 'bootstrap-sass'

Installeer de edelsteen door het commando uit te voeren:

bundel installeren

andere naam geven app / assets / stylesheets / application.css naar app / assets / stylesheets / application.scs.

Voeg de volgende regels code toe om bootstrap te importeren.

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

Maak een gedeeltelijke benaming _navigation.html.erb om uw navigatiecode vast te houden; het deel moet zich in de app / views / layouts directory.

Voer de onderstaande code in een IDE in. Het gebruikt Bootstrap om een ​​navigatiebalk voor uw toepassing te maken.

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

Om de navigatie te gebruiken, moet u deze in de lay-out van uw toepassing weergeven. Pas de lay-out van uw toepassing aan om er uit te zien als wat ik hieronder heb.

# 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 %> 
  

Genereer een PagesController met een indexactie door de onderstaande opdracht in te voeren in uw terminal.

rails gegenereerde controller Pagina's index

In de gegenereerde indexweergaven, bewerk het om er zo uit te zien.

# App / views / pages / index.html.erb 
 
Welkom bij Tuts Social!
 
Bedankt dat je ons hebt ingecheckt!
 

In de bovenstaande code maken we gebruik van een klasse genaamd jumbotron-dit is een Bootstrap-component waarmee we de viewport kunnen uitbreiden om een ​​marketingboodschap te presenteren. U kunt er meer over vinden in de Bootstrap-documentatie.

Open uw routesbestand om uw. Toe te voegen root_path.

# config / routes.rb Rails.application.routes.draw do # Zie http://guides.rubyonrails.org/routing.html root voor informatie over de DSL die beschikbaar is in dit bestand: "pages # index" end

OmniAuth-Twitter instellen

U moet een nieuwe Twitter-applicatie maken. Ga naar deze pagina op de Twitter-ontwikkelaarspagina's om er een te maken. Voer alle benodigde gegevens in, vergelijkbaar met wat ik heb in de onderstaande schermafbeelding.

Voer voor de callback-URL het adres van uw website in plus "auth / twitter / callback". Als u zich op een lokale computer bevindt, zou uw callback-URL dit moeten zijn: http://127.0.0.1:3000/auth/twitter/callback. 

Je wordt doorverwezen naar de informatiepagina van de app op Twitter. Navigeer naar de Sleutels en toegangstokens tab om je sleutels te pakken. Kopieer de consumentensleutel en het consumentengeheim en plak ze op een veilige plek - we zullen er binnenkort gebruik van maken.

De callback-URL is de URL waarnaar een gebruiker binnen de app wordt omgeleid na succesvolle authenticatie en goedgekeurde autorisatie (de aanvraag bevat ook de gegevens en het token van de gebruiker). Alle OmniAuth-strategieën verwachten dat de callback-URL gelijk is aan "/ auth /: provider / callback". : provider neemt de naam van de strategie. In dit geval zal de strategie "twitter" zijn zoals u in de initializer zult vermelden.

Open je Gemfile om de. toe te voegen omniauth-twiiter edelsteen.

# Gemfile ... gem 'omniauth-twitter'

Maak nu een initializer voor OmniAuth in de map config / initializers. Hiermee wordt de configuratie voor OmniAuth behouden. Laat het eruit zien als wat ik hieronder heb.

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

Op dit punt moet je gebruik maken van de sleutels en toegangstokens die je veilig hebt opgeslagen. U moet deze veilig houden omdat u ze niet naar een openbare repository wilt pushen wanneer u uw code commit.

Hiervoor gebruik je een edelsteen. Open je Gemfile opnieuw en voeg hieronder het juweel toe. Voeg het toe aan je Gemfile als volgt:

# Gemfile ... groep: ontwikkeling,: test doe ... gem 'dotenv-rails' ... 

Om het juweel te installeren, voer het uit.

bundel installeren

Maak in de basismap van uw toepassing een bestand met de naam .env.

Open het en voeg uw sleutels en tokens als volgt toe:

# .env TWITTER_KEY = xxxxxxxxxxxxxx TWITTER_SECRET = xxxxxxxxxxxxxx

Open .gitignore en voeg het bestand toe dat je net hebt gemaakt.

# .gitignore ... # Negeer .env gebruikt voor het opslaan van sleutels en toegangstokens .env

Als dit klaar is, zijn je sleutels en toegangstokens veilig! Voor meer informatie over hoe te gebruiken dotenv-rails, raadpleeg de GitHub-pagina.

Tijd om aan je route te werken. Open uw routesbestand en voeg de onderstaande route toe.

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

U moet de link voor Twitter-aanmelding toevoegen aan uw navigatie. Open je navigatiebestand en pas het aan om er zo uit te zien.

Op basis van het bovenstaande wilt u de koppeling weergeven om u alleen met Twitter aan te melden wanneer de gebruiker niet is ingelogd.

Sessies maken

U hebt een sessiecontroller nodig om het aanmelden van gebruikers aan te kunnen. Maak een bestand voor dat in uw controllers-map; dit is hoe het eruit zou moeten zien.

De actie maken helpt om een ​​sessie voor gebruikers te maken, zodat ze kunnen worden aangemeld bij uw applicatie. Zonder dit hebben gebruikers geen mogelijkheid om in te loggen.

# 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

Je hebt een huidige gebruiker methode op dit punt. Hiermee kunt u controleren of een gebruiker is ingelogd of weggegaan.

Open app / controllers / application_controller.rb en voeg het volgende toe.

# app / controllers / application_controller.rb ... def current_user @current_user || = User.find (session [: user_id]) als session [: user_id] end helper_method: current_user ... 

Gebruikersmodel

Genereer nu een model voor uw gebruikers. Voer het commando uit om dit te doen.

rails generated modoel Gebruiker provider: string uid: string naam: string token: string secret: string profile_image: string

Dat zou een migratiebestand moeten genereren dat er zo uitziet.

# xxxxxx_create_users.rb class 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

Migreer nu uw database door te draaien:

rake db: migreren

Open uw gebruikersmodel en laat het er als volgt uitzien:

# app / models / user.rb class User < 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

De code hierboven slaat informatie op die toebehoort aan de gebruiker. Dit omvat de naam, profile_image, token en het geheim van de gebruiker. Als uw toepassing meer nodig heeft, kunt u de OmniAuth-Twitter-pagina bekijken.

Sessies verwijderen

In uw toepassing wilt u gebruikers de mogelijkheid bieden om uit te loggen. Je hebt een vernietigen actie in uw SessionsController om dit te laten werken. Dan wordt een link toegevoegd aan uw navigatie.

Voeg de toe vernietigen actie voor uw SessionsController.

# app / controllers / sessions_controller.rb ... def destroy if current_user session.delete (: user_id) flash [: success] = "Sukes afgemeld!" einde redirect_to root_path einde ... 

Voeg vervolgens deze link toe om u af te melden bij uw navigatie, zodat uw navigatie er zo uitziet.

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

Open uw config / routes.rb om uw routes bij te werken met de actie die u zojuist hebt gemaakt.

# config / routes.rb ... verwijder '/ logout', naar: 'sessions # destroy' ... 

Start je rails-server op en wijs je browser naar http: // localhost: 3000 om te zien wat je hebt.

Conclusie

In deze tutorial heb je geleerd hoe je OmniAuth-Twitter in je Rails-applicatie kunt inschakelen. Je zag hoe je de gegevens van gebruikers die OmniAuth-Twitter gebruiken, kon gebruiken, wat je deed in je gebruikersmodel. Je kon creëren SessionControllers om het loggen in en uit te laten werken vanuit uw applicatie.

Ik hoop dat je het leuk vond. In de toekomst zul je zien hoe je hetzelfde kunt doen voor Facebook, Google en LinkedIn.