In questo tutorial, imparerai come consentire agli utenti dell'applicazione di accedere utilizzando il proprio account Twitter. Fare ciò è stato reso semplice con strumenti come OAuth.

Farai uso di OmniAuth-Twitter, che contiene la strategia di Twitter per OmniAuth.

Tuffiamoci dentro!

Iniziare

Inizia creando la tua applicazione Rails. Dal tuo terminale, esegui il comando per farlo:

rails new Tuts-Social -T 

Apri il tuo Gemfile e aggiungi la gemma del bootstrap.

# Gemfile ... gem 'bootstrap-sass'

Installa la gemma eseguendo il comando:

installazione bundle

Rinominare app / beni / fogli di stile / application.css a app / Attività / fogli di stile / application.scs.

Al termine, aggiungere le seguenti righe di codice per importare il bootstrap.

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

Crea un nome parziale _navigation.html.erb per mantenere il codice di navigazione; il parziale dovrebbe trovarsi nel app / views / layout elenco.

Inserisci il codice qui sotto in un IDE. Usa Bootstrap per creare una barra di navigazione per la tua applicazione.

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

Per la navigazione da utilizzare, è necessario renderlo nel layout dell'applicazione. Tweak il layout dell'applicazione per assomigliare a quello che ho qui sotto.

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

Genera a PagesController con un'azione di indice inserendo il comando sottostante nel tuo terminale.

rotaie generate controller Indice pagine

Nelle visualizzazioni dell'indice generate, modificalo in modo che assomigli a questo.

# App / views / pages / index.html.erb 
 
Benvenuto in Tuts Social!
 
Grazie per averci controllato!
 

Nel codice precedente, facciamo uso di una classe chiamata jumbotron-questo è un componente Bootstrap che ci consente di estendere il viewport per mostrare un messaggio di marketing. Puoi trovare ulteriori informazioni sulla documentazione di Bootstrap.

Apri il tuo file di rotte per aggiungere il tuo root_path.

# config / routes.rb Rails.application.routes.draw do # Per i dettagli sulla DSL disponibile all'interno di questo file, vedere http://guides.rubyonrails.org/routing.html root to: "pages # index" end

Configurare OmniAuth-Twitter

Devi creare una nuova applicazione Twitter. Vai a questa pagina nelle pagine degli sviluppatori di Twitter per crearne una. Inserisci tutti i dettagli necessari, simile a quello che ho nello screenshot qui sotto.

Per l'URL di richiamata, inserisci l'indirizzo del tuo sito web più "auth / twitter / callback". Se ti capita di trovarti su un computer locale, l'URL di richiamata dovrebbe essere questo: http://127.0.0.1:3000/auth/twitter/callback. 

Verrai reindirizzato alla pagina delle informazioni dell'app su Twitter. Vai a Chiavi e token di accesso scheda per ottenere le chiavi. Copia la chiave del consumatore e il segreto del consumatore e incollali in un luogo sicuro, li utilizzeremo a breve.

L'URL di richiamata è l'URL in cui un utente verrà reindirizzato all'interno dell'app dopo l'autenticazione e l'autorizzazione approvate (la richiesta conterrà anche i dati e il token dell'utente). Tutte le strategie OmniAuth prevedono che l'URL di callback sia uguale a "/ auth /: provider / callback". : fornitore prende il nome della strategia. In questo caso, la strategia sarà "twitter" come verrà elencato nell'inizializzatore.

Apri il tuo Gemfile aggiungere il omniauth-Twiiter gemma.

# Gemfile ... gem 'omniauth-twitter'

Ora crea un inizializzatore per OmniAuth nella directory config / inizializzatori. Ciò manterrà la configurazione per OmniAuth. Fai sembrare quello che ho qui sotto.

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

A questo punto dovrai utilizzare le chiavi e accedere ai token memorizzati in modo sicuro. È necessario mantenerli al sicuro poiché non si desidera inviarli a un repository pubblico quando si esegue il commit del codice.

Farai uso di una gemma per questo. Apri di nuovo il tuo Gemfile e aggiungi la gemma sotto. Aggiungilo al tuo Gemfile in questo modo:

# Gemfile ... group: development,: test do ... gem 'dotenv-rails' ... 

Per installare la gemma, corri.

installazione bundle

Nella home directory dell'applicazione, creare un file chiamato .ENV.

Aprilo e aggiungi le tue chiavi e token in questo modo:

# .env TWITTER_KEY = xxxxxxxxxxxxxx TWITTER_SECRET = xxxxxxxxxxxxxx

Aperto .gitignore e aggiungi il file appena creato.

# .gitignore ... # Ignora .env utilizzato per memorizzare chiavi e accedere ai token .env

Fatto questo, le tue chiavi e i token di accesso sono al sicuro! Per saperne di più su come usare dotenv-rotaie, fare riferimento alla pagina GitHub.

È ora di lavorare sul tuo percorso. Apri il tuo file di rotte e aggiungi il percorso di seguito.

# config / routes.rb ... ottieni '/ auth /: provider / callback', a: 'sessions # create'

Devi aggiungere il link per l'accesso a Twitter alla tua navigazione. Apri il tuo file di navigazione e modificalo in questo modo.

Da quanto sopra, vuoi mostrare il link per accedere con Twitter solo quando l'utente non ha effettuato l'accesso.

Creare sessioni

Avrai bisogno di un controller di sessione per gestire l'accesso degli utenti. Creare un file per questo nella directory dei controller; questo è come dovrebbe apparire.

L'azione create aiuta a creare una sessione per gli utenti in modo che possano essere registrati nella tua applicazione. Senza questo, gli utenti non hanno mezzi di accesso.

# app / controller / 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

Avrai bisogno di un utente corrente metodo a questo punto. Questo ti aiuterà a controllare se un utente ha effettuato il login o l'uscita.

Aperto app / controllers / application_controller.rb e aggiungi il seguente.

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

Modello utente

Ora generi un modello per i tuoi utenti. Esegui il comando per farlo.

rails generate Modoel User provider: string uid: string name: string token: string secret: string profile_image: string

Questo dovrebbe generare un file di migrazione simile a questo.

# 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

Ora esegui la migrazione del tuo database eseguendo:

rake db: migrate

Apri il tuo modello utente e fallo apparire così:

# 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

Il codice sopra memorizza alcune informazioni appartenenti all'utente. Questo include il nome, profile_image, token e il segreto dell'utente. Se la tua applicazione richiede più di questo, puoi consultare la pagina di OmniAuth-Twitter.

Eliminazione di sessioni

Nell'applicazione, si desidera fornire agli utenti la possibilità di disconnettersi. Avrai bisogno di un distruggere azione nel tuo SessionsController per questo funziona. Quindi un link verrà aggiunto alla tua navigazione.

Aggiungi il distruggere azione per il tuo SessionsController.

# app / controller / sessions_controller.rb ... def destroy se current_user session.delete (: user_id) flash [: success] = "Logout eseguito con successo!" end redirect_to root_path end ... 

Quindi aggiungi questo link per accedere alla tua navigazione, così la tua navigazione sarà così.

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

Apri la tua configurazione / routes.rb per aggiornare i tuoi percorsi con l'azione appena creata.

# config / routes.rb ... cancella '/ logout', a: 'sessions # destroy' ... 

Avvia il tuo server di rotaie e punta il tuo browser a http: // localhost: 3000 per vedere cosa hai.

Conclusione

In questo tutorial hai imparato come abilitare OmniAuth-Twitter nella tua applicazione Rails. Hai visto come ottenere i dati degli utenti utilizzando OmniAuth-Twitter, cosa che hai fatto nel tuo modello Utente. Sei stato in grado di creare SessionControllers per gestire l'accesso e la disconnessione degli utenti dall'applicazione.

Spero ti sia piaciuto. In futuro, vedrai come fare lo stesso per Facebook, Google e LinkedIn.