So verwenden Sie Omniauth zur Authentifizierung Ihrer Benutzer

Ich hasse es, sich für Websites anzumelden. Ich habe mich bereits bei so vielen Benutzern unter Verwendung verschiedener Benutzernamen angemeldet, dass es manchmal unmöglich ist, zu einem von ihnen zurückzukehren und zu versuchen, sich meine Zugangsdaten zu merken. Heutzutage bieten die meisten Websites alternative Anmeldemöglichkeiten an, indem Sie Facebook, Twitter oder sogar Ihr Google-Konto verwenden. Das Erstellen einer solchen Integration fühlt sich manchmal als eine lange und mühsame Aufgabe an. Aber keine Angst, Omniauth ist hier, um zu helfen.

Mit Omniauth können Sie mehr als 60 Authentifizierungsanbieter, darunter Facebook, Google, Twitter und GitHub, problemlos integrieren. In diesem Lernprogramm erkläre ich, wie Sie diese Authentifizierungsanbieter in Ihre App integrieren.


Schritt 1: Vorbereitung Ihrer Bewerbung

Erstellen wir eine neue Rails-Anwendung und fügen Sie die erforderlichen Edelsteine ​​hinzu. Ich gehe davon aus, dass Sie Ruby und Ruby on Rails 3.1 bereits mit RubyGems installiert haben.

 Schienen neues Omniauth-Tutorial

Jetzt öffne dein Gemfile und verweisen Sie auf den Omniauth-Edelstein.

 Juwel 'Omniauth'

Führen Sie als nächstes wie gewohnt die aus Bundle installieren Befehl, um den Edelstein zu installieren.


Schritt 2: Erstellen eines Providers

Um einen Anbieter zu Omniauth hinzuzufügen, müssen Sie sich als Entwickler auf der Website des Anbieters anmelden. Sobald Sie sich angemeldet haben, erhalten Sie zwei Zeichenfolgen (wie Benutzername und Kennwort), die an Omniauth weitergeleitet werden müssen. Wenn Sie einen OpenID-Anbieter verwenden, benötigen Sie lediglich die OpenID-URL.

Wenn Sie die Facebook-Authentifizierung verwenden möchten, wechseln Sie zu http://developers.facebook.com/apps und klicken Sie auf? Neue App erstellen?.

Geben Sie alle erforderlichen Informationen ein und kopieren Sie die ID und das Geheimnis Ihrer App, sobald Sie fertig sind.

Das Konfigurieren von Twitter ist auf einem Entwicklungscomputer etwas komplizierter, da Sie nicht die Verwendung von "localhost" erlauben. als Domain für Rückrufe. Das Konfigurieren Ihrer Entwicklungsumgebung für solche Dinge liegt außerhalb des Umfangs dieses Lernprogramms. Ich empfehle Ihnen jedoch, Pow zu verwenden, wenn Sie einen Mac verwenden.


Schritt 3: Fügen Sie Ihrer App Ihre Provider hinzu

Erstellen Sie eine neue Datei unter config / initializers namens omniauth.rb. Wir werden unsere Authentifizierungsanbieter über diese Datei konfigurieren.

Fügen Sie den folgenden Code in die zuvor erstellte Datei ein:

 Rails.application.config.middleware.use OmniAuth :: Builder für Provider: facebook, YOUR_APP_ID, YOUR_APP_SECRET end

Dies ist ehrlich gesagt die Konfiguration, die Sie benötigen, um dies in Gang zu setzen. Den Rest erledigt Omniauth, wie wir im nächsten Schritt finden werden.


Schritt 4: Erstellen der Anmeldeseite

Lassen Sie uns unseren Session-Controller erstellen. Führen Sie den folgenden Code in Ihrem Terminal aus, um einen neuen zu erstellen Sitzungen Controller und die Neu, erstellen, und Fehler Aktionen.

Schienen erzeugen Controller-Sitzungen, die einen neuen Fehler erzeugen

Als nächstes öffnen Sie Ihre config / routes.rb Datei und fügen Sie Folgendes hinzu:

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

Brechen wir das mal auf:

  • In der ersten Zeile wird ein einfaches Anmeldeformular erstellt, in dem der Benutzer eine einfache Verbindung mit Facebook sehen kann. Verknüpfung.
  • Die zweite Zeile fängt den Callback des Providers ab. Nachdem ein Benutzer Ihre App autorisiert hat, leitet der Anbieter den Benutzer auf diese URL um, sodass wir deren Daten verwenden können.
  • Der letzte wird verwendet, wenn ein Problem vorliegt oder der Benutzer unsere Anwendung nicht autorisiert hat.

Stellen Sie sicher, dass Sie die Routen löschen, die beim Ausführen des Systems automatisch erstellt wurden Schienen erzeugen Befehl. Sie sind für unser kleines Projekt nicht notwendig.

Öffne dein app / controller / sessions_controller.rb Datei und schreibe die erstellen Methode wie folgt:

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

Dies wird verwendet, um sicherzustellen, dass alles funktioniert. Richten Sie Ihren Browser auf localhost: 3000 / auth / facebook und Sie werden zu Facebook weitergeleitet, damit Sie Ihre App autorisieren können (ziemlich cool, oder?). Wenn Sie es autorisieren, werden Sie zu Ihrer App zurückgeleitet und sehen einen Hash mit einigen Informationen. Dazwischen stehen unter anderem Ihr Name, Ihre Facebook-Benutzer-ID und Ihre E-Mail-Adresse.


Schritt 5: Erstellen des Benutzermodells

Der nächste Schritt ist das Erstellen eines Benutzermodells, damit sich Benutzer über ihr Facebook-Konto anmelden können. In der Rails-Konsole (Schienen-Konsole), erstellen Sie das neue Modell.

Schienen erzeugen Modell Benutzername: String E-Mail: String

Vorerst unser Benutzer Modell- wird nur eine haben Name und ein Email. Um dies zu vermeiden, brauchen wir eine Möglichkeit, den Benutzer beim nächsten Anmelden wiederzuerkennen. Denken Sie daran, dass wir zu diesem Zweck keine Felder im Modell unseres Benutzers haben.

Die Idee hinter einer Anwendung wie derjenigen, die wir erstellen möchten, besteht darin, dass ein Benutzer wählen kann, ob er Facebook oder Twitter (oder einen anderen Anbieter) zur Anmeldung verwenden möchte. Daher benötigen wir ein anderes Modell, um diese Informationen zu speichern. Lass es uns schaffen:

Schienen generieren Modell Autorisierungsanbieter: Zeichenfolge Uid: Zeichenfolge Benutzer_ID: Ganzzahl

Ein Benutzer verfügt über eine oder mehrere Berechtigungen. Wenn ein Benutzer versucht, sich über einen Provider anzumelden, schauen wir uns einfach die Berechtigungen in der Datenbank an und suchen nach einer, die der Datenbank entspricht uid und Anbieter Felder. Auf diese Weise können Benutzer auch über viele Anbieter verfügen, sodass sie sich später über Facebook, Twitter oder einen anderen von ihnen konfigurierten Anbieter anmelden können!

Fügen Sie folgenden Code hinzu app / models / user.rb Datei:

 has_many: Berechtigungen werden bestätigt: Name,: E-Mail,: Präsenz => true

Dies gibt an, dass a Nutzer kann mehrere Berechtigungen haben, und dass die Name und Email Felder in der Datenbank sind erforderlich.

Weiter zu deinem App / Modelle / Autorisierung.rb Datei hinzufügen:

 gehört zu: Benutzer validiert: Provider,: UID,: Präsenz => true

Innerhalb dieses Modells legen wir fest, dass jede Autorisierung an ein bestimmtes Objekt gebunden ist Nutzer. Wir haben auch einige Validierungen vorgenommen.


Schritt 6: Ein wenig Logik zu unserem Sessions Controller hinzufügen

Fügen wir unseren Sitzungen Code hinzu Regler damit wird ein Benutzer angemeldet oder angemeldet, je nach Fall. Öffnen app / controller / sessions_controller.rb und ändern Sie die erstellen Methode wie folgt:

 def create auth_hash = request.env ['omniauth.auth'] @authorization = Authorization.find_by_provider_and_uid (auth_hash ["provider"], auth_hash ["uid"]), wenn @authorization render: text => "Welcome back # @ authorisation .user.name! Sie haben sich bereits angemeldet. " 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 =>" Hallo # user.name! Sie haben sich angemeldet. " Ende Ende

Dieser Code muss eindeutig überarbeitet werden, aber darauf werden wir später eingehen. Lassen Sie uns es zuerst überprüfen:

  • Wir prüfen, ob dazu eine Berechtigung vorliegt Anbieter und das uid. Wenn einer existiert, begrüßen wir unseren Benutzer zurück.
  • Ist keine Berechtigung vorhanden, melden wir den Benutzer an. Wir erstellen einen neuen Benutzer mit dem Namen und der E-Mail-Adresse, die uns der Anbieter (in diesem Fall Facebook) gibt, und ordnen dem Autor eine Autorisierung zu Anbieter und das uid wir sind gegeben.

Testen Sie es! Gehen Sie zu localhost: 3000 / auth / facebook und Sie sollten sehen, dass Sie sich angemeldet haben. Wenn Sie die Seite aktualisieren, sollten Sie jetzt sehen: Willkommen zurück?.


Schritt 7: Aktivieren mehrerer Anbieter

Das ideale Szenario wäre, einem Benutzer die Anmeldung mit einem Provider zu ermöglichen und später einen anderen Provider hinzuzufügen, sodass er mehrere Optionen für die Anmeldung haben kann. Unsere App lässt das vorerst nicht zu. Wir müssen unseren Code ein wenig umgestalten. Ändere dein sessions_controlller.rb's erstellen Methode, um so auszusehen:

 def create auth_hash = request.env ['omniauth.auth'] wenn session [: user_id] # Bedeutet, dass unser Benutzer angemeldet ist. Fügen Sie die Berechtigung dem Benutzer user.find (session [: user_id]). add_provider (auth_hash) hinzu : text => "Jetzt können Sie sich mit # auth_hash [" provider "] anmelden. else # Melden Sie sich an oder melden Sie sich an. auth = Authorization.find_or_create (auth_hash) # Erstellen Sie die Sitzungssitzung [: user_id] = auth.user.id render: text => "Welcome # auth.user.name!" Ende Ende

Lassen Sie uns dies überprüfen:

  • Wenn der Benutzer bereits angemeldet ist, fügen wir den von ihm verwendeten Anbieter seinem Konto hinzu.
  • Wenn sie nicht angemeldet sind, versuchen wir, einen Benutzer mit diesem Anbieter zu finden oder einen neuen zu erstellen, falls dies erforderlich ist.

Damit der obige Code funktioniert, müssen wir einige Methoden hinzufügen Nutzer und Genehmigung Modelle. Öffnen user.rb und fügen Sie die folgende Methode hinzu:

 def add_provider (auth_hash) # Prüfen Sie, ob der Provider bereits existiert, und fügen Sie ihn nicht zweimal hinzu, es sei denn 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

Wenn der Benutzer diesen Anbieter noch nicht mit seinem Konto verknüpft hat, fügen wir ihn einfach hinzu. Fügen Sie jetzt diese Methode zu Ihrem hinzu Authorisierung.rb Datei:

 def self.find_or_create (auth_hash), außer 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 = create: user => user,: provider => auth_hash ["provider"],: uid => auth_hash ["uid"] end auth end

Im obigen Code versuchen wir, eine Autorisierung zu finden, die der Anforderung entspricht. Wenn dies nicht gelingt, erstellen wir einen neuen Benutzer.

Wenn Sie dies lokal ausprobieren möchten, benötigen Sie einen zweiten Authentifizierungsanbieter. Sie könnten das OAuth-System von Twitter verwenden, aber wie ich bereits gesagt habe, müssen Sie einen anderen Ansatz verwenden, da Twitter die Verwendung von "localhost" nicht zulässt. als Domäne der Rückruf-URL (zumindest funktioniert es für mich nicht). Sie können auch versuchen, Ihren Code auf Heroku zu hosten. Dies ist perfekt für eine einfache Website wie die, die wir erstellen.


Schritt 8: Einige zusätzliche Verbesserungen

Schließlich müssen wir den Benutzern natürlich erlauben, sich abzumelden. Fügen Sie diesen Code Ihrem Session-Controller hinzu:

 def destroy session [: user_id] = nil render: text => "Sie haben sich abgemeldet!" Ende

Wir müssen auch die entsprechende Route erstellen (in routen.rb).

 '/ logout' erhalten:: to => 'session # destroy'

So einfach ist das! Wenn Sie zu localhost: 3000 / logout navigieren, sollte Ihre Sitzung gelöscht und Sie werden abgemeldet. Dies erleichtert das Testen mehrerer Konten und Anbieter. Wir müssen auch eine Nachricht hinzufügen, die angezeigt wird, wenn Benutzer den Zugriff auf unsere App verweigern. Wenn Sie sich erinnern, haben wir diese Route am Anfang des Tutorials hinzugefügt. Jetzt müssen wir nur noch die Methode in die Sitzungen Regler:

 def failure render: text => "Sorry, aber Sie haben keinen Zugriff auf unsere App erlaubt!" Ende

Und nicht zuletzt erstellen Sie die Login-Seite, auf der der Benutzer auf "Mit Facebook verbinden" klicken kann. Verknüpfung. Öffnen app / views / sessions / new.html.erb und füge hinzu:

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

Wenn Sie zu localhost: 3000 / login gehen, wird ein Link angezeigt, der Sie zur Facebook-Authentifizierungsseite weiterleitet.


Fazit

Ich hoffe, dieser Artikel hat Ihnen ein kurzes Beispiel dafür gegeben, wie Omniauth funktioniert. Es ist ein enormes Juwel und ermöglicht Ihnen das Erstellen von Websites, für die sich keine Benutzer anmelden müssen. Dies ist immer ein Vorteil! Sie können Omniauth auf GitHub lernen.

Lassen Sie es uns wissen, wenn Sie Fragen haben!