I denne opplæringen lærer du hvordan du tillater brukere av søknaden din å logge inn med Twitter-kontoen din. Å gjøre dette har blitt gjort enkelt med verktøy som OAuth.

Du vil benytte OmniAuth-Twitter, som inneholder Twitter-strategien for OmniAuth.

La oss dykke inn!

Starter

Start med å generere din Rails-applikasjon. Fra terminalen din, kjør kommandoen for å gjøre det:

skinner nye Tuts-Social -T 

Åpne opp Gemfile og legg til bootstrap perlen.

# Gemfile ... perle 'bootstrap-sass'

Installer perlen ved å kjøre kommandoen:

bunt installasjon

Gi nytt navn app / assets / stilark / application.css til app / eiendeler / stilark / application.scs.

Når du er ferdig, legg til følgende kodelinjer for å importere bootstrap.

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

Opprett en delvis navngitt _navigation.html.erb å holde navigasjonskoden din den delte skal være plassert i app / visninger / oppsett katalog.

Skriv inn koden under i en IDE. Den bruker Bootstrap til å opprette en navigeringslinje for din søknad.

# App / visninger / oppsett / _navigation.html.erb 

For navigasjonen som skal brukes, må du gjøre det i programoppsettet. Tweak din applikasjonslayout for å se ut som det jeg har under.

# App / visninger / oppsett / 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 %> 
  

Generer en PagesController med en indekshandling ved å skrive inn kommandoen nedenfor til terminalen din.

skinner generert kontroller Sider indeks

I indeksbildene som er generert, må du redigere det slik at det ser ut som dette.

# App / visninger / sider / index.html.erb 
 
Velkommen til Tuts Social!
 
Takk for at du sjekket oss ut!
 

I ovennevnte kode benytter vi en klasse som kalles Jumbotron-Dette er en Bootstrap-komponent som gjør at vi kan utvide visningsporten til å vise frem en markedsføringsmelding. Du finner mer om det fra Bootstrap-dokumentasjonen.

Åpne ruteplanen din for å legge til root_path.

# config / routes.rb Rails.application.routes.draw do # For detaljer om DSL tilgjengelig i denne filen, se http://guides.rubyonrails.org/routing.html root til: "sider # index" slutten

Setter opp OmniAuth-Twitter

Du må opprette en ny Twitter-applikasjon. Gå til denne siden på Twitter Developer-siden for å opprette en. Skriv inn alle nødvendige detaljer, ligner på hva jeg har på skjermbildet nedenfor.

For tilbakeringingsadressen, skriv inn nettstedets adresse pluss "auth / twitter / callback". Hvis du tilfeldigvis er på en lokal maskin, bør tilbakekallingsadressen din være denne: http://127.0.0.1:3000/auth/twitter/callback. 

Du blir omdirigert til appens informasjonsside på Twitter. Naviger til Taster og tilgangstegn fanen for å få nøklene dine. Kopier forbrukernøkkel og forbrukshemlighet og lim dem på et trygt sted - vi vil gjøre bruk av dem snart.

Tilbakekallingsadressen er nettadressen hvor en bruker blir omdirigert til inne i appen etter vellykket autentisering og godkjent autorisasjon (forespørselen vil også inneholde brukerens data og token). Alle OmniAuth-strategier forventer tilbakeringingsadressen til å være lik "/ auth /: leverandør / tilbakeringing". :forsørger tar navnet på strategien. I dette tilfellet vil strategien være "twitter" som du vil liste i initialisatoren.

Åpne opp din Gemfile å legge til omniauth-twiiter perle.

# Gemfile ... perle 'omniauth-twitter'

Opprett nå en initialiserer for OmniAuth i din config / initialiserings katalog. Dette vil holde konfigurasjonen for OmniAuth. Gjør det ser ut som det jeg har under.

# config / initializers / omniauth.rb Rails.application.config.middleware.use OmniAuth :: Builder gjør leverandør: twitter, ENV ['TWITTER_KEY'], ENV ['TWITTER_SECRET'] end

På dette tidspunktet må du bruke nøklene og tilgangstokenene du lagret trygt. Du må holde disse trygge da du ikke vil skyve dem til et offentligt lager når du forplikter koden din.

Du vil gjøre bruk av en perle for dette. Åpne Gemfile igjen og legg til perlen under. Legg det til Gemfile din slik:

# Gemfile ... gruppe: utvikling,: test gjør ... perle 'dotenv-skinner' ... 

For å installere perlen, kjør.

bunt installasjon

I hjemmekatalogen av søknaden din, opprett en fil som heter .env.

Åpne den og legg til dine nøkler og tokens slik:

# .no TWITTER_KEY = xxxxxxxxxxxxxx TWITTER_SECRET = xxxxxxxxxxxxxx

Åpen .gitignore og legg til filen du nettopp opprettet.

# .gitignore ... # Ignorer .env brukt til å lagre nøkler og tilgangstegn .env

Med dette gjort, er dine nøkler og tilgangsfunksjoner trygge! For å lære mer om hvordan du bruker dotenv-skinner, se GitHub-siden.

Tid til å jobbe på ruten din. Åpne ruteplanen din og legg til ruten nedenfor.

# config / routes.rb ... få '/ auth /: leverandør / tilbakeringing' til: 'økter # opprette'

Du må legge til linken for Twitter-pålogging til navigasjonen din. Åpne navigasjonsfilen din og tweak den for å se slik ut.

Fra ovenstående vil du vise linken for å logge inn med Twitter bare når brukeren ikke er logget på.

Opprette økter

Du trenger en øktkontroller for å håndtere innlogging av brukere. Opprett en fil for det i registerkatalogen din; Slik ser det ut.

Opprettelsen bidrar til å lage en økt for brukere, slik at de kan logges inn i søknaden din. Uten dette har brukerne ikke mulighet til å logge inn.

# app / controllers / sessions_controller.rb klasse 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 trenger en nåværende bruker metode på dette punktet. Dette vil hjelpe deg å sjekke om en bruker er logget inn eller ut.

Åpen app / kontrollere / application_controller.rb og legg til følgende.

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

Brukermodell

Nå generer en modell for dine brukere. Kjør kommandoen for å gjøre det.

skinner generert modoel Brukerleverandør: streng uid: strengnavn: strengtoken: strenghemmelig: strengprofil_image: streng

Det bør generere en migreringsfil som ser slik ut.

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

Flytt nå databasen din ved å kjøre:

rake db: migrere

Åpne brukermodellen din og få den til å se slik ut:

# app / models / user.rb klasse bruker < 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 ovenfor lagrer informasjon som tilhører brukeren. Dette inkluderer navnet, profile_image, token og hemmeligheten til brukeren. Hvis søknaden din krever mer enn dette, kan du sjekke OmniAuth-Twitter-siden.

Slette økter

I din søknad vil du gi brukerne muligheten til å logge ut. Du trenger en ødelegge handling i din SessionsController for dette å fungere. Deretter legges en lenke til navigasjonen din.

Legg til ødelegge handling til din SessionsController.

# app / controllers / sessions_controller.rb ... def ødelegge hvis current_user session.delete (: user_id) flash [: success] = "Sucessfully logget ut!" avslutte redirect_to root_path end ... 

Legg deretter til denne lenken for å logge deg ut på navigasjonen din, slik at navigasjonen ser ut som dette.

# App / visninger / oppsett / _navigation.html.erb 

Åpne oppsettet ditt / routes.rb for å oppdatere ruter med handlingen du nettopp har opprettet.

# config / routes.rb ... slett '/ logout', til: 'økter # ødelegge' ... 

Start opp din railserver og pek nettleseren din til http: // localhost: 3000 for å se hva du har.

Konklusjon

I denne opplæringen har du lært hvordan du aktiverer OmniAuth-Twitter i programmet Rails. Du så hvordan du får dataene til brukerne ved hjelp av OmniAuth-Twitter, som du gjorde i brukermodellen din. Du var i stand til å lage SessionControllers å håndtere logging inn og ut av brukere fra søknaden din.

Jeg håper du likte det. I fremtiden vil du se hvordan du gjør det samme for Facebook, Google og LinkedIn.