I den här handledningen lär du dig att låta användare av din ansökan logga in med sitt Twitter-konto. Att göra detta har blivit lätt med verktyg som OAuth.

Du kommer att använda OmniAuth-Twitter, som innehåller Twitter-strategin för OmniAuth.

Låt oss dyka in!

Komma igång

Börja med att generera din Rails-applikation. Kör kommandot från din terminal genom att göra det:

skenar nya Tuts-Social -T 

Öppna din Gemfile och lägg till bootstrap-pärlan.

# Gemfile ... pärla 'bootstrap-sass'

Installera pärlan genom att köra kommandot:

buntinstallation

Döpa om app / tillgångar / mallar / application.css till app / tillgångar / Mallar / application.scs.

När du är klar lägger du till följande rader kod för att importera bootstrap.

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

Skapa en delvis namngiven _navigation.html.erb för att hålla din navigeringskod; Partiet ska vara beläget i app / views / layouter katalog.

Ange koden nedan i en IDE. Det använder Bootstrap för att skapa en navigeringsfält för din applikation.

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

För att navigationen ska användas måste du göra den i din applikationslayout. Tweak din applikationslayout för att se ut som vad jag har nedan.

# App / views / layouter / 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 %> 
  

Generera a PagesController med en indexåtgärd genom att ange kommandot nedan till din terminal.

skenor genererade controller Sidor index

I de genererade indexvisningarna redigerar du den så att den ser ut så här.

# App / views / sidor / index.html.erb 
 
Välkommen till Tuts Social!
 
Tack för att du checkat ut!
 

I ovanstående kod använder vi en klass som heter jumbotron-Det här är en Bootstrap-komponent som tillåter oss att utvidga visningsporten för att visa upp ett marknadsföringsmeddelande. Du hittar mer om det från Bootstrap-dokumentationen.

Öppna din ruttfil för att lägga till din root_path.

# config / routes.rb Rails.application.routes.draw do # För detaljer om DSL som finns i den här filen, se http://guides.rubyonrails.org/routing.html root till: "sidor # index" slut

Ställa in OmniAuth-Twitter

Du måste skapa en ny Twitter-applikation. Gå till den här sidan på Twitter Developer-sidorna för att skapa en. Ange alla nödvändiga detaljer, som liknar vad jag har på skärmdumpen nedan.

För återuppringningsadressen anger du webbplatsens adress plus "auth / twitter / callback". Om du råkar vara på en lokal maskin ska din återuppringningsadress vara så här: http://127.0.0.1:3000/auth/twitter/callback. 

Du kommer att omdirigeras till appens informationssida på Twitter. Navigera till Nycklar och åtkomsttoken fliken för att få dina nycklar. Kopiera konsumentnyckeln och konsumenthemligheten och klistra in dem på ett säkert ställe - vi kommer att använda dem snabbt.

Återuppringningsadressen är den URL-adress där en användare omdirigeras till inuti appen efter godkänd autentisering och godkänd auktorisation (begäran kommer också att innehålla användarens data och token). Alla OmniAuth-strategier förväntar att återkopplingsadressen är lika med "/ auth /: provider / callback". : leverantör tar namnet på strategin. I det här fallet kommer strategin att vara "twitter" som du kommer att lista i initialiseraren.

Öppna din Gemfile att lägga till omniauth-twiiter pärla.

# Gemfile ... pärla 'omniauth-twitter'

Skapa nu en initializer för OmniAuth i din config / initialiserings katalog. Detta kommer att hålla konfigurationen för OmniAuth. Låt det se ut som vad jag har nedan.

# config / initializers / omniauth.rb Rails.application.config.middleware.use OmniAuth :: Builder gör leverantör: twitter, ENV ['TWITTER_KEY'], ENV ['TWITTER_SECRET'] än

Vid denna tidpunkt måste du använda nycklarna och åtkomsttoken som du lagrade säkert. Du måste hålla dessa säkra eftersom du inte vill driva dem till ett offentligt förråd när du begår din kod.

Du kommer att använda en pärla för detta. Öppna din Gemfile igen och lägg till pärlan nedan. Lägg till det i din Gemfile som så:

# Gemfile ... grupp: utveckling,: test gör ... pärla 'dotenv-skenor' ... 

För att installera pärlan, kör.

buntinstallation

I hemkatalogen i din ansökan skapar du en fil som heter .env.

Öppna den och lägg till dina nycklar och tokens så här:

# .env TWITTER_KEY = xxxxxxxxxxxxxx TWITTER_SECRET = xxxxxxxxxxxxxx

Öppna .gitignore och lägg till filen du just skapat.

# .gitignore ... # Ignorera .env används för att lagra nycklar och åtkomsttoken .env

Med detta gjort är dina nycklar och access tokens säkra! För att lära dig mer om hur du använder dotenv-rails, hänvisa till GitHub-sidan.

Dags att arbeta på din rutt Öppna din ruttfil och lägg till rutten nedan.

# config / routes.rb ... få '/ auth /: provider / callback' till: 'sessioner # skapa'

Du måste lägga till länken för Twitter inloggning på din navigering. Öppna din navigationsfil och tweak den så att den ser ut så här.

Från ovanstående vill du visa länken för att logga in med Twitter endast när användaren inte är inloggad.

Skapa sessioner

Du behöver en session controller för att hantera inloggning av användare. Skapa en fil för det i din registerkatalog; så ska det se ut.

Skapa åtgärden hjälper till att skapa en session för användare så att de kan loggas in i din ansökan. Utan detta har användarna inga möjligheter att logga in.

# app / controllers / sessions_controller.rb klass 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

Du behöver en nuvarande användaren metod vid denna punkt. Det här hjälper dig att kontrollera om en användare är inloggad eller inloggad.

Öppna app / controllers / application_controller.rb och lägg till följande.

# app / controllers / application_controller.rb ... def current_user @current_user || = User.find (session [: user_id]) om session [: user_id] end hjälper_method: current_user ... 

Användarmodell

Skapa nu en modell för dina användare. Kör kommandot för att göra det.

rails genererade modoel Användarleverantör: sträng uid: strängnamn: strängtoken: stränghemmelig: strängprofil_image: sträng

Det ska generera en migreringsfil som ser ut så här.

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

Migrera nu din databas genom att köra:

rake db: migrera

Öppna din användarmodell och se till att den ser ut så här:

# app / models / user.rb klass användare < 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

Koden ovan lagrar viss information som tillhör användaren. Detta inkluderar namn, profile_image, token och hemlighet för användaren. Om din ansökan kräver mer än det här kan du kolla på OmniAuth-Twitter-sidan.

Radera sessioner

I din ansökan vill du ge användarna möjlighet att logga ut. Du behöver en förstöra åtgärd i din SessionsController för att detta ska fungera. Då läggs en länk till din navigering.

Lägg till förstöra åtgärd till din SessionsController.

# app / controllers / sessions_controller.rb ... def förstöra om current_user session.delete (: user_id) flash [: success] = "Sucessfully loggad!" slutet redirect_to root_path slut ... 

Lägg sedan till den här länken för att logga ut på din navigering, så din navigering ser ut så här.

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

Öppna din config / routes.rb för att uppdatera dina rutter med den åtgärd du just skapat.

# config / routes.rb ... ta bort '/ logout', till: 'sessioner # förstör' ... 

Starta din railserver och peka din webbläsare på http: // localhost: 3000 för att se vad du har.

Slutsats

I den här handledningen har du lärt dig hur du aktiverar OmniAuth-Twitter i din Rails-applikation. Du såg hur du får data från användare som använder OmniAuth-Twitter, vilket du gjorde i din Användarmodell. Du kunde skapa SessionControllers att hantera loggningen in och ut av användare från din ansökan.

Jag hoppas att du tyckte om det. I framtiden ser du hur du gör detsamma för Facebook, Google och LinkedIn.