Come utilizzare Omniauth per autenticare i tuoi utenti

Odio iscrivermi per siti Web. Ho già firmato per così tanti, usando nomi utente diversi, che tornare a uno di essi e provare a ricordare le mie credenziali è a volte impossibile. In questi giorni, la maggior parte dei siti ha iniziato a offrire modi alternativi per registrarsi, consentendo di utilizzare il proprio account Facebook, Twitter o persino il proprio account Google. Creare una tale integrazione a volte sembra un compito lungo e arduo. Ma non temere, Omniauth è qui per aiutare.

Omniauth ti consente di integrare facilmente oltre sessanta provider di autenticazione, tra cui Facebook, Google, Twitter e GitHub. In questo tutorial, spiegherò come integrare questi fornitori di autenticazione nella tua app.


Passaggio 1: Preparazione della tua applicazione

Creiamo una nuova applicazione Rails e aggiungiamo le gemme necessarie. Immagino che tu abbia già installato Ruby e Ruby su Rails 3.1 usando RubyGems.

 rota nuovo omniauth-tutorial

Ora apri il tuo Gemfile e fare riferimento alla gemma omniauth.

 gemma omniauth

Quindi, come al solito, esegui il installazione bundle comando per installare la gemma.


Passaggio 2: creazione di un provider

Per aggiungere un fornitore a Omniauth, dovrai registrarti come sviluppatore sul sito del fornitore. Una volta effettuato l'accesso, ti verranno fornite due stringhe (una specie di nome utente e password), che devono essere trasmesse a Omniauth. Se si utilizza un provider OpenID, tutto ciò che serve è l'URL OpenID.

Se si desidera utilizzare l'autenticazione di Facebook, andare su developers.facebook.com/apps e fare clic su? Crea nuova app?.

Inserisci tutte le informazioni necessarie e, una volta terminato, copia l'ID e il segreto dell'app.

Configurare Twitter è un po 'più complicato su una macchina di sviluppo, dato che non ti permettono di usare? Localhost? come dominio per i callback. La configurazione del tuo ambiente di sviluppo per questo genere di cose è al di fuori dello scopo di questo tutorial, tuttavia, ti consiglio di usare Pow se sei su un Mac.


Passaggio 3: aggiungi i provider all'app

Crea un nuovo file sotto config / inizializzatori chiamato omniauth.rb. Configureremo i nostri provider di autenticazione tramite questo file.

Incolla il seguente codice nel file che abbiamo creato in precedenza:

 Rails.application.config.middleware.use OmniAuth :: Builder fa provider: facebook, YOUR_APP_ID, YOUR_APP_SECRET end

Questa è onestamente tutta la configurazione necessaria per ottenere questo risultato. Il resto è curato da Omniauth, come vedremo nel prossimo passaggio.


Passaggio 4: creazione della pagina di accesso

Creiamo il nostro controller di sessioni. Esegui il codice seguente nel tuo terminale per crearne uno nuovo sessioni controller e il nuovo, creare, e fallimento Azioni.

rotaie generano sessioni di controller nuove creano errori

Quindi, apri il tuo config / routes.rb file e aggiungi questo:

 get '/ login',: to => 'sessions # new',: as =>: login match '/ auth /: provider / callback',: to => 'sessioni # crea' match '/ auth / failure', : to => 'session # failure'

Rompiamo questo:

  • La prima riga viene utilizzata per creare un semplice modulo di accesso in cui l'utente vedrà un semplice? Connetti con Facebook? collegamento.
  • La seconda linea è quella di catturare la richiamata del provider. Dopo che un utente autorizza la tua app, il provider reindirizza l'utente a questo URL, in modo che possiamo utilizzare i suoi dati.
  • L'ultimo verrà utilizzato quando c'è un problema o se l'utente non ha autorizzato la nostra applicazione.

Assicurati di eliminare i percorsi che sono stati creati automaticamente quando hai eseguito il rotaie generano comando. Non sono necessari per il nostro piccolo progetto.

Apri i tuoi app / controllers / sessions_controller.rb file e scrivi il creare metodo, così:

 def crea auth_hash = request.env ['omniauth.auth'] render: text => auth_hash.inspect end

Questo è usato per assicurarsi che tutto funzioni. Indirizza il tuo browser a localhost: 3000 / auth / facebook e verrai reindirizzato su Facebook in modo da poter autorizzare la tua app (molto bella eh?). Autorizzalo e verrai reindirizzato alla tua app e vedrai un hash con alcune informazioni. In mezzo ci saranno il tuo nome, il tuo ID utente di Facebook e la tua email, tra le altre cose.


Passaggio 5: creazione del modello utente

Il passo successivo è creare un modello utente in modo che gli utenti possano registrarsi utilizzando i loro account Facebook. Nella console di Rails (console di rotaie), crea il nuovo modello.

rails genera il modello Nome utente: string email: string

Per ora, il nostro utente modello avrà solo un nome e un e-mail. In questo modo, abbiamo bisogno di un modo per riconoscere l'utente al prossimo accesso. Tieni presente che per questo motivo non abbiamo campi sul modello dell'utente..

L'idea alla base di un'applicazione come quella che stiamo cercando di costruire è che un utente possa scegliere tra l'uso di Facebook o Twitter (o qualsiasi altro fornitore) per iscriversi, quindi abbiamo bisogno di un altro modello per archiviare tali informazioni. Facciamolo:

rails genera provider di autorizzazione modello: string uid: string user_id: intero

Un utente avrà una o più autorizzazioni e quando qualcuno tenta di accedere utilizzando un provider, guardiamo semplicemente le autorizzazioni all'interno del database e ne cerchiamo uno che corrisponda al uid e fornitore campi. In questo modo, consentiamo anche agli utenti di disporre di molti provider, in modo che possano successivamente accedere utilizzando Facebook, o Twitter, o qualsiasi altro provider che hanno configurato!

Aggiungi il seguente codice al tuo app / modelli / user.rb file:

 has_many: autorizzazioni valide: nome,: email,: presence => true

Questo specifica che a utente può avere più autorizzazioni e che il nome e e-mail i campi nel database sono obbligatori.

Avanti, al tuo app / modelli / authorization.rb file, aggiungere:

 belongs_to: l'utente conferma: provider,: uid,: presence => true

All'interno di questo modello, designiamo che ogni autorizzazione è legata a uno specifico utente. Abbiamo anche impostato alcune convalide.


Passaggio 6: aggiunta di un po 'di logica al nostro controller delle sessioni

Aggiungiamo un po 'di codice alle nostre sessioni controllore in modo che registri un utente o lo firmi, a seconda del caso. Aperto app / controllers / sessions_controller.rb e modificare il creare metodo, così:

 def crea auth_hash = request.env ['omniauth.auth'] @authorization = Authorization.find_by_provider_and_uid (auth_hash ["provider"], auth_hash ["uid"]) se @authorization render: text => "Bentornato # @ autorizzazione .user.name! Ti sei già registrato. " else user = User.new: name => auth_hash ["user_info"] ["name"],: email => auth_hash ["user_info"] ["email"] user.authorizations.build: provider => auth_hash ["provider "],: uid => auth_hash [" uid "] user.save render: text =>" Ciao # user.name! Ti sei registrato. " fine fine

Questo codice necessita chiaramente di un refactoring, ma ci occuperemo in seguito. Facciamo una revisione prima:

  • Controlliamo se esiste un'autorizzazione per questo fornitore e quello uid. Se ne esiste uno, accogliamo di nuovo il nostro utente.
  • Se non esiste un'autorizzazione, firmiamo l'utente. Creiamo un nuovo utente con il nome e l'e-mail che il fornitore (Facebook in questo caso) ci fornisce e associamo un'autorizzazione con il fornitore e il uid sono stati dati.

Fai un test! Vai a localhost: 3000 / auth / facebook e dovresti vedere? Ti sei iscritto ?. Se aggiorni la pagina, dovresti vedere ora? Bentornato?.


Passaggio 7: attivazione di più provider

Lo scenario ideale sarebbe quello di consentire a un utente di registrarsi utilizzando un solo provider, e successivamente aggiungere un altro provider in modo che possa avere più opzioni di accesso. La nostra app non lo consente per ora. Abbiamo bisogno di rifattorizzare il nostro codice un po '. Cambia il tuo sessions_controlller.rb'S creare metodo per assomigliare a questo:

 def crea auth_hash = request.env ['omniauth.auth'] se session [: user_id] # Significa che il nostro utente ha effettuato l'accesso. Aggiungi l'autorizzazione all'utente User.find (session [: user_id]). add_provider (auth_hash) render : text => "Ora puoi accedere usando # auth_hash [" provider "]. anche capitalize!" altro # Connettilo o autenticalo auth = Authorization.find_or_create (auth_hash) # Crea la sessione session [: user_id] = auth.user.id render: text => "Welcome # auth.user.name!" fine fine

Rivediamo questo:

  • Se l'utente ha già effettuato l'accesso, aggiungeremo il provider che stanno utilizzando al proprio account.
  • Se non sono connessi, tenteremo di trovare un utente con quel provider o ne creeremo uno nuovo se necessario.

Affinché il codice di cui sopra funzioni, dobbiamo aggiungere alcuni metodi al nostro Utente e Autorizzazione Modelli. Aperto user.rb e aggiungere il seguente metodo:

 def add_provider (auth_hash) # Controlla se il provider esiste già, quindi non lo aggiungiamo due volte a meno che authorizations.find_by_provider_and_uid (auth_hash ["provider"], auth_hash ["uid"]) Authorization.create: user => self,: provider => auth_hash ["provider"],: uid => auth_hash ["uid"] end end

Se l'utente non ha già questo provider associato al proprio account, procederemo e aggiungiamolo: semplice. Ora aggiungi questo metodo al tuo authorization.rb file:

 def self.find_or_create (auth_hash) a meno che auth = find_by_provider_and_uid (auth_hash ["provider"], auth_hash ["uid"]) user = User.create: name => auth_hash ["user_info"] ["name"],: email = > auth_hash ["user_info"] ["email"] auth = crea: utente => utente,: provider => auth_hash ["provider"],: uid => auth_hash ["uid"] end auth end

Nel codice sopra, tentiamo di trovare un'autorizzazione che corrisponda alla richiesta e, in caso di insuccesso, creiamo un nuovo utente.

Se vuoi provare questo a livello locale, avrai bisogno di un secondo provider di autenticazione. Potresti usare il sistema OAuth di Twitter, ma, come ho detto prima, avrai bisogno di usare un approccio diverso, dato che Twitter non consente l'utilizzo di? Localhost? come dominio dell'URL di callback (almeno non funziona per me). Puoi anche provare ad ospitare il tuo codice su Heroku, che è perfetto per un sito semplice come quello che stiamo creando.


Step 8: alcuni ritocchi extra

Infine, dobbiamo, naturalmente, consentire agli utenti di disconnettersi. Aggiungi questo pezzo di codice al tuo controller di sessioni:

 def destroy session [: user_id] = nil render: text => "Ti sei disconnesso!" fine

Abbiamo anche bisogno di creare il percorso applicabile (in routes.rb).

 get '/ logout',: to => 'sessions # destroy'

E 'così semplice! Se navighi su localhost: 3000 / logout, la tua sessione dovrebbe essere cancellata e sarai disconnesso. Ciò renderà più semplice provare più account e provider. Dobbiamo inoltre aggiungere un messaggio che viene visualizzato quando gli utenti negano l'accesso alla nostra app. Se ricordi, abbiamo aggiunto questa rotta all'inizio del tutorial. Ora, abbiamo solo bisogno di aggiungere il metodo nel sessioni Controller:

 def failure render: text => "Scusa, ma non hai permesso l'accesso alla nostra app!" fine

E, ultimo ma non meno importante, creare la pagina di accesso, dove l'utente può fare clic su? Connetti con Facebook? collegamento. Aperto app / views / sessioni / new.html.erb e aggiungi:

 <%= link_to "Connect With Facebook", "/auth/facebook" %>

Se vai a localhost: 3000 / login vedrai un link che ti reindirizzerà alla pagina di autenticazione di Facebook.


Conclusione

Spero che questo articolo ti abbia fornito un breve esempio di come funziona Omniauth. È una gemma considerevolmente potente e ti consente di creare siti Web che non richiedono l'iscrizione agli utenti, il che è sempre un vantaggio! Puoi conoscere Omniauth su GitHub.

Fatemi sapere se avete domande!