In diesem Lernprogramm erfahren Sie, wie sich Benutzer Ihrer Anwendung mit ihrem Twitter-Konto anmelden können. Dies wurde mit Tools wie OAuth leicht gemacht.

Sie verwenden OmniAuth-Twitter, das die Twitter-Strategie für OmniAuth enthält.

Lass uns eintauchen!

Fertig machen

Beginnen Sie mit der Generierung Ihrer Rails-Anwendung. Führen Sie von Ihrem Terminal aus den Befehl aus, um dies zu tun:

Schienen neue Tuts-Social-T 

Öffnen Sie Ihr Gemfile und fügen Sie den Bootstrap-Gem hinzu.

# Gemfile… gem 'bootstrap-sass'

Installieren Sie den Edelstein, indem Sie den folgenden Befehl ausführen:

Bundle installieren

Umbenennen app / assets / stylesheets / application.css zu app / assets / stylesheets / application.scs.

Fügen Sie anschließend die folgenden Codezeilen hinzu, um Bootstrap zu importieren.

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

Erstellen Sie einen Teilnamen _navigation.html.erb um Ihren Navigationscode zu halten; das partielle sollte sich im App / Ansichten / Layouts Verzeichnis.

Geben Sie den folgenden Code in eine IDE ein. Es verwendet Bootstrap, um eine Navigationsleiste für Ihre Anwendung zu erstellen.

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

Damit die Navigation verwendet werden kann, müssen Sie sie in Ihrem Anwendungslayout rendern. Passen Sie Ihr Anwendungslayout so an, dass es wie unten dargestellt aussieht.

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

Ein generieren PagesController mit einer Indexaktion, indem Sie den folgenden Befehl in Ihr Terminal eingeben.

Schienen generierte Steuerung Seitenindex

Bearbeiten Sie es in den generierten Indexansichten so, dass es so aussieht.

# app / views / pages / index.html.erb 
 
Willkommen bei Tuts Social!
 
Danke, dass Sie uns überprüft haben!
 

Im obigen Code verwenden wir eine Klasse namens Jumbotron-Dies ist eine Bootstrap-Komponente, mit der wir das Ansichtsfenster erweitern können, um eine Marketingnachricht zu präsentieren. Mehr dazu finden Sie in der Bootstrap-Dokumentation.

Öffnen Sie Ihre Routendatei, um Ihre hinzuzufügen root_path.

# config / routes.rb Rails.application.routes.draw do # Weitere Informationen zu den in dieser Datei verfügbaren DSL-Daten finden Sie unter http://guides.rubyonrails.org/routing.html root an: "pages # index" end

OmniAuth-Twitter einrichten

Sie müssen eine neue Twitter-Anwendung erstellen. Rufen Sie diese Seite auf den Twitter Developer-Seiten auf, um eine zu erstellen. Geben Sie alle erforderlichen Details ein, ähnlich wie in der Abbildung unten.

Geben Sie für die Rückruf-URL die Adresse Ihrer Website sowie "auth / twitter / callback" ein. Wenn Sie sich auf einem lokalen Computer befinden, sollte Ihre Rückruf-URL folgendermaßen lauten: http://127.0.0.1:3000/auth/twitter/callback. 

Sie werden zur Twitter-Informationsseite der App weitergeleitet. Navigieren Sie zu Schlüssel und Zugriffstoken Tab, um Ihre Schlüssel zu erhalten. Kopieren Sie den Consumer Key und das Consumer Secret und fügen Sie sie an einem sicheren Ort ein. Wir werden sie in Kürze verwenden.

Die Rückruf-URL ist die URL, zu der ein Benutzer nach erfolgreicher Authentifizierung und genehmigter Autorisierung innerhalb der App umgeleitet wird (die Anforderung enthält auch die Daten und das Token des Benutzers). Alle OmniAuth-Strategien erwarten, dass die Rückruf-URL gleich "/ auth /: provider / callback" ist.. :Anbieter nimmt den Namen der Strategie. In diesem Fall ist die Strategie "twitter", wie Sie im Initializer auflisten.

Öffne deine Gemfile das hinzufügen Omniauth-twiiter Juwel.

# Gemfile… Juwel 'omniauth-twitter'

Erstellen Sie nun einen Initialisierer für OmniAuth in Ihrem Verzeichnis config / initializers. Dies wird die Konfiguration für OmniAuth enthalten. Lass es so aussehen, wie ich es unten habe.

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

An diesem Punkt müssen Sie die Schlüssel und Zugriffstoken verwenden, die Sie sicher gespeichert haben. Sie müssen diese sicher aufbewahren, da Sie sie beim Festschreiben des Codes nicht in ein öffentliches Repository verschieben möchten.

Sie werden dafür einen Edelstein verwenden. Öffne dein Gemfile erneut und füge den Edelstein unten hinzu. Fügen Sie es Ihrem Gemfile wie folgt hinzu:

# Gemfile… Gruppe: Entwicklung: Test do… Edelst 'Dotenv-Gleise'… 

Um den Edelstein zu installieren, starte.

Bundle installieren

Erstellen Sie im Ausgangsverzeichnis Ihrer Anwendung eine Datei mit dem Namen .env.

Öffnen Sie es und fügen Sie Ihre Schlüssel und Token wie folgt hinzu:

# .env TWITTER_KEY = xxxxxxxxxxxxxx TWITTER_SECRET = xxxxxxxxxxxxxx

Öffnen .Gitignore und fügen Sie die soeben erstellte Datei hinzu.

# .gitignore… # Ignoriere .env, das zum Speichern von Schlüsseln und Zugriffstoken .env verwendet wird

Damit sind Ihre Schlüssel und Zugangsmarken sicher! Weitere Informationen zur Verwendung dotenv-Schienen, siehe die GitHub-Seite.

Zeit, um an Ihrer Route zu arbeiten. Öffnen Sie Ihre Routendatei und fügen Sie die Route unten hinzu.

# config / routes.rb… bekomme '/ auth /: provider / callback' zu: 'sessions # create'

Sie müssen den Link für die Twitter-Anmeldung zu Ihrer Navigation hinzufügen. Öffnen Sie Ihre Navigationsdatei und passen Sie diese an.

Von oben möchten Sie den Link zum Anmelden bei Twitter nur anzeigen, wenn der Benutzer nicht angemeldet ist.

Sitzungen erstellen

Sie benötigen einen Sitzungscontroller, um die Anmeldung der Benutzer durchzuführen. Erstellen Sie dafür eine Datei in Ihrem Controller-Verzeichnis. So sollte es aussehen.

Die Aktion "Erstellen" hilft beim Erstellen einer Sitzung für Benutzer, damit diese bei Ihrer Anwendung angemeldet werden können. Ohne dies können sich Benutzer nicht anmelden.

# app / controller / 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 brauchst eine current_user Methode an dieser Stelle. So können Sie überprüfen, ob ein Benutzer an- oder abgemeldet ist.

Öffnen app / controller / application_controller.rb und fügen Sie folgendes hinzu.

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

Benutzermodell

Generieren Sie jetzt ein Modell für Ihre Benutzer. Führen Sie dazu den Befehl aus.

Schienen generierten Modoel Benutzer-Provider: String Uid: String Name: String Token: String Secret: String Profil_Bild: String

Das sollte eine Migrationsdatei generieren, die so aussieht.

# 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

Migrieren Sie jetzt Ihre Datenbank, indem Sie Folgendes ausführen:

rake db: migrieren

Öffnen Sie Ihr Benutzermodell und machen Sie es so:

# app / models / user.rb-Klasse Benutzer < 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

Der obige Code speichert einige Informationen, die dem Benutzer gehören. Dies beinhaltet den Namen, Profil_Image, Token und das Geheimnis des Benutzers. Wenn Ihre Anwendung mehr als dies erfordert, können Sie die OmniAuth-Twitter-Seite besuchen.

Sitzungen löschen

In Ihrer Anwendung möchten Sie Benutzern die Möglichkeit geben, sich abzumelden. Du brauchst eine zerstören Aktion in Ihrem SitzungenController damit dies funktioniert. Dann wird ein Link zu Ihrer Navigation hinzugefügt.

Ergänzen Sie die zerstören Aktion zu Ihrem SitzungenController.

# app / controller / sessions_controller.rb… def zerstören, wenn current_user session.delete (: user_id) flash [: success] = "Erfolgreich abgemeldet!" end redirect_to root_path end… 

Fügen Sie dann diesen Link hinzu, um sich bei Ihrer Navigation abzumelden, damit Ihre Navigation so aussieht.

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

Öffnen Sie Ihre config / routes.rb, um Ihre Routen mit der gerade erstellten Aktion zu aktualisieren.

# config / routes.rb… lösche '/ logout', an: 'session # destroy'… 

Starten Sie Ihren Rail-Server und rufen Sie den Browser auf http: // localhost: 3000 auf, um zu sehen, was Sie haben.

Fazit

In diesem Lernprogramm haben Sie erfahren, wie Sie OmniAuth-Twitter in Ihrer Rails-Anwendung aktivieren. Sie haben gesehen, wie Sie Daten von Benutzern über OmniAuth-Twitter abrufen können, wie Sie es in Ihrem Benutzermodell getan haben. Sie konnten erstellen SessionControllers das An- und Abmelden von Benutzern über Ihre Anwendung.

Ich hoffe, dass es Ihnen gefallen hat. In Zukunft werden Sie sehen, wie Sie dies für Facebook, Google und LinkedIn tun.