Advertisement
  1. Code
  2. Yii

Startup mit PHP aufbauen: Onramp mit OAuth vereinfachen

by
Read Time:14 minsLanguages:
This post is part of a series called Building Your Startup With PHP.
Building Your Startup With PHP: Email Commands
Building Your Startup: Exporting iCal Files into Calendar Events

German (Deutsch) translation by Wei Zhang (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Dieses Tutorial ist Teil der Build Your Startup With PHP-Reihe auf Envato Tuts +. In dieser Serie führe ich Sie durch den Start eines Konzepts vom Konzept zur Realität, wobei Sie meine Meeting Planner-App als reales Beispiel verwenden. Bei jedem Schritt werde ich den Meeting Planner-Code als Open-Source-Beispiele veröffentlichen, von denen Sie lernen können. Ich werde auch auf unternehmensbezogene Probleme beim Start eingehen.

In diesem Lernprogramm werde ich Sie durch die Implementierung der OAuth-Integration in gängige soziale Netzwerke führen, um die Anmeldung und die wiederholte Verwendung einfacher und effizienter zu gestalten. Ich werde Facebook, Google, Twitter und LinkedIn erkunden, die Netzwerke, die meiner Meinung nach den Zielbenutzern von Meeting Planner am besten entsprechen.

Der gesamte Code für Meeting Planner ist im Yii2 Framework für PHP geschrieben. Wenn Sie mehr über Yii2 erfahren möchten, werfen Sie einen Blick auf unsere parallele Serie Programming With Yii2 bei Envato Tuts +.

Wenn Sie Meeting Planner noch nicht ausprobiert haben, planen Sie jetzt Ihr erstes Meeting ein. Es fängt wirklich an, dieses Jahr zusammen zu kommen. Letztendlich konnte ich die integrierte AuthClient-Unterstützung von Yii2 verwenden, um Anmeldungen von allen oben genannten Netzwerken bereitzustellen, sodass Sie diese jetzt für die Registrierung verwenden können.

Feedback ist willkommen. Wenn Sie eine Frage oder ein Thema haben, schreiben Sie bitte einen Kommentar. Sie können mich auch auf Twitter @reifman erreichen.

Was ist AuthClient?

AuthClient ist die integrierte Unterstützung von Yii für die Authentifizierung Ihrer Anwendungen über Drittanbieter-Services mit OpenID, OAuth oder OAuth2.

Wenn Sie meine Yii2-Serie im Juni 2015 verfolgt haben, hätten Sie gesehen, dass ich AuthClient für die Integration von Google über OpenID verwendet hatte. Das Unternehmen beendete jedoch kurz darauf den Support für die Spezifikation. Im Dezember habe ich dann ein Tutorial geschrieben, in dem die Unterstützung für Google OAuth mithilfe der Yii2-User-Erweiterung hinzugefügt wurde. Das Yii2-Framework hatte dies noch nicht. Yii2-User lässt sich jedoch nicht gut in etablierte Codebasen integrieren, die bereits eine benutzerorientierte Codebase enthalten. Glücklicherweise hatte das Yii2-Framework inzwischen Unterstützung für Google OAuth hinzugefügt, und alles ist unkomplizierter geworden.

In diesem Lernprogramm werde ich Sie durch die Verwendung der neuen AuthClient-Funktionalität führen, um sie in eine Vielzahl populärer sozialer Netzwerke zu integrieren. Standardmäßig unterstützt Yii die folgenden Clients:

Eine weitere Motivation, die Verbindung zu Meeting Planner über soziale Netzwerke zu unterstützen, besteht darin, dass Personen ihren Namen und ihre E-Mail-Adresse problemlos mit uns teilen können. Mit der E-Mail- und Passwort-Registrierung erfahren wir nie wirklich ihren Namen. Im Gegensatz zu anderen sozialen Netzwerken schafft Twitter jedoch erhebliche Probleme, die E-Mail-Adressen der Benutzer zu erhalten, was mich letztendlich dazu veranlasst hat, die E-Mail-Adresse zu deaktivieren.

Beginnen wir mit der Code-Integration.

AuthClient in unserer Anwendung installieren

Zuerst müssen wir die Yii-Komponenten für OAuth, Yii's AuthClient, installieren.

Fügen Sie AuthClient zu Composer hinzu

Fügen wir die AuthClient-Bibliothek zu composer.json hinzu:

Dann müssen wir den Komponisten aktualisieren:

AuthClient-Unterstützung konfigurieren

Wir müssen die AuthClient-Konfigurationseinstellungen zu unserer Konfigurationsdatei in \frontend\config\main.php hinzufügen.

Fügen Sie Array-Elemente für alle Services von Drittanbietern hinzu, die Sie unterstützen möchten (Details zu den einzelnen Services finden Sie im AuthClient Guide)

Um Codes für all diese Schlüssel und Geheimnisse zu erhalten, müssen Sie Ihre Anwendung bei jedem sozialen Netzwerk registrieren. Dies kann oft zeitaufwändig sein.

Registrieren von Entwickleranwendungen

Folgen Sie mir, während ich Sie durch die Anmeldung bei einigen Netzwerken und einige der tieferen Konfigurationsaspekte bei anderen begleite.

Bei Twitter registrieren

Erstellen Sie eine neue Twitter-Anwendung im Twitter Application Dashboard:

Building Your Startup OAuth - Create AppBuilding Your Startup OAuth - Create AppBuilding Your Startup OAuth - Create App

Klicken Sie auf Neue App erstellen. Ich habe festgestellt, dass die Rückruf-URL nicht erforderlich war. Im Moment habe ich jedoch den Platzhalter http://mydomain.com/user/security/auth verwendet.

Building Your Startup OAuth - Twitter Dev App DetailsBuilding Your Startup OAuth - Twitter Dev App DetailsBuilding Your Startup OAuth - Twitter Dev App Details

Hier ist die neue Seite für unsere Bewerbung:

Building Your Startup OAuth - Twitter App PageBuilding Your Startup OAuth - Twitter App PageBuilding Your Startup OAuth - Twitter App Page

Hier ist die Einstellungen-Seite:

Building Your Startup OAuth - Twitter Dev App SettingsBuilding Your Startup OAuth - Twitter Dev App SettingsBuilding Your Startup OAuth - Twitter Dev App Settings

Hier ist die Seite "Schlüssel und Zugriffstoken". Hier müssen wir den Consumer Key (API Key) und das Consumer Secret (API Secret) kopieren:

Building Your Startup OAuth - Twitter Dev App Keys and TokensBuilding Your Startup OAuth - Twitter Dev App Keys and TokensBuilding Your Startup OAuth - Twitter Dev App Keys and Tokens

Diese Schlüssel befinden sich in unserer Datei mp.ini, die in die $config -Variable gelesen wird, um AuthClient für Twitter zu konfigurieren.

Registrieren Sie unsere Facebook-Anwendung

Als Nächstes besuchen Sie die Facebook-Entwicklerkonsole und fügen Sie eine neue App hinzu:

Building Your Startup OAuth - Facebook Dev ConsoleBuilding Your Startup OAuth - Facebook Dev ConsoleBuilding Your Startup OAuth - Facebook Dev Console

Wir erstellen jetzt eine WWW-Website-App:

Building Your Startup OAuth - Facebook Dev Console Add an AppBuilding Your Startup OAuth - Facebook Dev Console Add an AppBuilding Your Startup OAuth - Facebook Dev Console Add an App

Geben Sie den Namen unserer Bewerbung an:

Building Your Startup OAuth - Facebook Dev Console Generate App IDBuilding Your Startup OAuth - Facebook Dev Console Generate App IDBuilding Your Startup OAuth - Facebook Dev Console Generate App ID

Und sammeln Sie unsere neue App-ID:

Building Your Startup OAuth - Facebook Dev Console Create an App DialogsBuilding Your Startup OAuth - Facebook Dev Console Create an App DialogsBuilding Your Startup OAuth - Facebook Dev Console Create an App Dialogs

Sie fragen nach allen regulären Informationen wie URLs:

Building Your Startup OAuth - Facebook Dev Console App Webpage URLBuilding Your Startup OAuth - Facebook Dev Console App Webpage URLBuilding Your Startup OAuth - Facebook Dev Console App Webpage URL

Und dann finden Sie unsere Meeting Planner App in der Liste:

Building Your Startup OAuth - Facebook Dev Console with Apps ListedBuilding Your Startup OAuth - Facebook Dev Console with Apps ListedBuilding Your Startup OAuth - Facebook Dev Console with Apps Listed

Hier ist das Facebook-Dashboard für Ihre Anwendung:

Building Your Startup OAuth - Facebook Dev Console Finished App PageBuilding Your Startup OAuth - Facebook Dev Console Finished App PageBuilding Your Startup OAuth - Facebook Dev Console Finished App Page

Bei Google registrieren

Google APIs sind etwas komplexer als Twitter und Facebook, daher ist die UX etwas schwieriger zu verfolgen. Grundsätzlich benötigen Sie nach dem Erstellen einer Anwendung OAuth 2.0-Schlüssel, die Sie erhalten, wenn Sie den Anwendungsbereich auf dem Bildschirm mit den Anmeldeinformationen öffnen:

Building Your Startup OAuth - Google Dev App CredentialsBuilding Your Startup OAuth - Google Dev App CredentialsBuilding Your Startup OAuth - Google Dev App Credentials

Das bringt dich hierher:

Building Your Startup OAuth - Google Dev App Keys and redirect URLsBuilding Your Startup OAuth - Google Dev App Keys and redirect URLsBuilding Your Startup OAuth - Google Dev App Keys and redirect URLs

Aus Sicherheitsgründen benötigen Google (und LinkedIn) eine vollständige Liste der URL-Pfade und -Parameter, die während einer OAuth-Sequenz verwendet werden können. Während der Entwicklung kann dies einige Anpassungen erfordern - sogar für das Testen von localhost.

Sobald Sie sie eingegeben haben, werden sie unten aufgeführt:

Building Your Startup OAuth - Google Dev App All Those URLsBuilding Your Startup OAuth - Google Dev App All Those URLsBuilding Your Startup OAuth - Google Dev App All Those URLs

Google hilft Ihnen bei der Konfiguration des Einwilligungsbildschirms, den Ihre Nutzer sehen, wenn sie sich anmelden oder ihr Google-Konto mit dem Meeting Planner verknüpfen möchten:

Building Your Startup OAuth - Google Dev App Credentials PreviewBuilding Your Startup OAuth - Google Dev App Credentials PreviewBuilding Your Startup OAuth - Google Dev App Credentials Preview

Bei LinkedIn registrieren

LinkedIn ist im Vergleich zu Google ziemlich einfach. Sie benötigen die grundlegenden Angaben für Ihre Bewerbung:

Building Your Startup OAuth - LinkedIn Dev App SettingsBuilding Your Startup OAuth - LinkedIn Dev App SettingsBuilding Your Startup OAuth - LinkedIn Dev App Settings

Wie Google benötigen sie alle URLs, die Sie in Entwicklung und Produktion verwenden. Sie können die Schlüssel auch auf dieser Seite erhalten:

Building Your Startup OAuth - LinkedIn Dev Keys and Redirect URLs againBuilding Your Startup OAuth - LinkedIn Dev Keys and Redirect URLs againBuilding Your Startup OAuth - LinkedIn Dev Keys and Redirect URLs again

Schlüssel in unsere Konfigurationsdatei einfügen

In "Schlüssel schützen" von GitHub aus habe ich ausführlich beschrieben, wie ich eine Konfigurationsdatei verwende, um alle meine Schlüssel außer meinem GitHub-Repository zu speichern. Dann füge ich diese Datei am Anfang meiner Yii-Konfigurationsdateien ein. Dies hindert mich daran, versehentlich meine Schlüssel in meinem Repository einzuchecken und meine Konten zu gefährden.

Wir legen sowohl die Twitter- als auch die Facebook-Anwendungsschlüssel und -geheimnisse in /var/secure/mp.ini außerhalb des Repositorys ab:

Hier ist wieder der Code in \frontend\config\main.php, der diese Einstellungen enthält und die einzelnen Konfigurationsvariablen einstellt:

Aktualisieren des Schemas zum Speichern von Sitzungsschlüsseln

Jetzt, da wir bereit sind, Code für die Integration von Social Signup und Login zu schreiben, benötigen wir die Datenbank, um eine Auth-Tabelle zu erstellen, in der der Social Service, seine ID für die Person und die user_id für diese Person in Meeting Planner gespeichert werden:

So sieht die Migration aus:

Hier ist das Ergebnis, wenn wir es ausführen:

Wieder habe ich den Code-Generator Gii von Yi verwendet, um das Auth-Modell zu erstellen:

Building Your Startup OAuth - Yiis Gii Model Generator of Auth ModelBuilding Your Startup OAuth - Yiis Gii Model Generator of Auth ModelBuilding Your Startup OAuth - Yiis Gii Model Generator of Auth Model

Letztendlich enthält die Auth-Tabelle Inhalte wie folgt:

Building Your Startup OAuth - Database view of Auth tableBuilding Your Startup OAuth - Database view of Auth tableBuilding Your Startup OAuth - Database view of Auth table

Fügen Sie das AuthChoice-Widget dem Meeting Planner hinzu

Das AuthChoice-Widget von Yii2 eignet sich hervorragend für die Implementierung der Login-Schaltflächen für jeden von Ihnen konfigurierten Dienst. Dies geschieht in der Reihenfolge, in der Sie das Array von Services und Schlüsseln einrichten (damit Sie es ändern können).

Es ist ziemlich einfach, das Widget unter login.php und signup.php zu unseren Formularen hinzuzufügen:

Hier ist jetzt unsere Anmeldeseite:

Building Your Startup OAuth - The New Login Screen with AuthChoice Widget Buttons to Social NetworksBuilding Your Startup OAuth - The New Login Screen with AuthChoice Widget Buttons to Social NetworksBuilding Your Startup OAuth - The New Login Screen with AuthChoice Widget Buttons to Social Networks

Für bestehende Benutzer, die angemeldet sind, habe ich eine einfache Möglichkeit geschaffen, ihr Konto zu verknüpfen. Auf der Seite mit den Profileinstellungen wird dies als Verknüpfung sozialer Konten bezeichnet:

Building Your Startup OAuth - New Link Social AccountsBuilding Your Startup OAuth - New Link Social AccountsBuilding Your Startup OAuth - New Link Social Accounts

Wenn Sie auf LinkedIn klicken, wird hier der OAuth-Bildschirm angezeigt, in dem Sie um Erlaubnis für Meeting Planner gebeten werden:

Building Your Startup OAuth - LinkedIn Permissions PageBuilding Your Startup OAuth - LinkedIn Permissions PageBuilding Your Startup OAuth - LinkedIn Permissions Page

Und hier ist der Bildschirm für Google:

Building Your Startup OAuth - Google Permissions PageBuilding Your Startup OAuth - Google Permissions PageBuilding Your Startup OAuth - Google Permissions Page

Aber was passiert wirklich, wenn der Nutzer uns erlaubt, seine sozialen Kontodaten mitzuteilen? Gehen wir den Code durch, den ich geschrieben habe, um die Aktionen der Benutzer zu verarbeiten.

Verarbeiten der OAuth-Berechtigung

Die \frontend\controller\SiteController.php verarbeitet die eingehende auth-Aktion an die Funktion onAuthSuccess:

Die meisten guten OAuth-Clients bieten ähnliche Informationen in einem ähnlichen Eigenschaftsbereich außer Twitter. Twitter hat sich erst spät mit dem Teilen von E-Mail-Adressen befasst, und für mein MVP lohnt es sich jetzt nicht, es zu konfigurieren. Google und Facebook sind so viel häufiger.

Zunächst sammle ich die Servicedetails und sammle so viele persönliche Daten wie möglich: E-Mail-Adresse, Vor- und Nachname, vollständiger Name und insbesondere die externe ID dieses Benutzers in diesem sozialen Netzwerk:

In den letzten Codezeilen oben suchen wir in der Auth-Tabelle nach der externen ID der Person. Wenn sie nicht existieren, sind sie neu in Meeting Planner. Wenn sie existieren, erkennen wir sie.

In ähnlicher Weise müssen wir überprüfen, ob ihre E-Mail-Adresse bereits existiert, da es möglich ist, dass die Person mit dieser E-Mail-Adresse zuvor bei Meeting Planner registriert ist.

Wenn bei MeetingPlanner.io kein aktueller authentifizierter Benutzer vorhanden ist, werden mit dem folgenden Code die eingehenden Benutzerdaten untersucht.

Wenn sich die externe ID bereits in unserer Auth-Tabelle befindet, werden diese angemeldet.

Wenn wir die ID nicht erkennen, aber die E-Mail-Adresse bereits registriert haben, bitten wir sie, sich mit Benutzername und Passwort anzumelden und dann ihr Konto zu verknüpfen.

Building Your Startup OAuth - Error Msg for We have Your Email PreviouslyBuilding Your Startup OAuth - Error Msg for We have Your Email PreviouslyBuilding Your Startup OAuth - Error Msg for We have Your Email Previously

Wenn sie auf der Anmeldeseite gestartet wurden, als sie auf die Schaltfläche für das soziale Konto geklickt haben und die externe ID oder E-Mail-Adresse nicht erkannt wird, leiten wir sie auf die Anmeldeseite um und bitten sie, es erneut zu versuchen - von der Registrierungsseite aus.

Wenn sie von der Anmeldeseite aus verlinkt werden, stellen wir sicher, dass der neue Benutzer keinen doppelten Benutzernamen (eines bereits vorhandenen Meeting Planner-Benutzers) riskiert. In diesem Szenario erweitern wir den Benutzernamen vorerst um eine zufällige Zeichenfolge. Und wir registrieren sie als neuen Benutzer bei Meeting Planner mit einem Kennwort (das sie nicht wirklich benötigen).

In den abschließenden Schritten oben fügen wir die externen sozialen Kontodaten der Auth-Tabelle zur zukünftigen Erkennung hinzu.

Verknüpfen vorhandener Meeting Planner-Konten

Wenn sie von der Registerkarte "Sozialkonten verknüpfen" auf der Benutzerprofilseite (anstatt von unserer Anmelde- oder Anmeldeseite) stammen, müssen wir nur ihre externen Kontodaten zu Auth hinzufügen und ihre Anmeldung nach User :: STATUS_ACTIVE verschieben. (Denken Sie daran, dass Benutzer, die von Meeting Planner-Einladungslinks kommen, aber noch nie registriert sind, den Modus User :: STATUS_PASSIVE verwenden.)

So sieht das aus (zukünftig gebe ich die Namensinformationen aus den OAuth-Informationen ein - dies ist noch nicht geschehen):

Building Your Startup OAuth - Successful Account LinkageBuilding Your Startup OAuth - Successful Account LinkageBuilding Your Startup OAuth - Successful Account Linkage

Abschließend

Ich muss zugeben, dass die Auswirkungen von OAuth-Verbindungen zu wichtigen Diensten wie Google, Facebook und LinkedIn ziemlich dramatisch sind. Die Anmeldung und regelmäßige Verwendung von Meeting Planner ist so einfach und beschleunigt die zukünftige Authentifizierung. Es ist wirklich unglaublich.

Meeting Planner ist in den letzten Monaten wirklich zusammengekommen. Bitte probieren Sie gleich jetzt das Social Login und die Registrierung aus! Achten Sie auf kommende Tutorials in unserer Reihe "Erstellen Sie Ihr Startup mit PHP". Es gibt viele interessante Funktionen, während das Produkt auf MVP zusteuert.

Ich beginne auch mit WeFunder zu experimentieren, basierend auf der Umsetzung der neuen Crowdfunding-Regeln der SEC. Bitte beachten Sie unser Profil. Ich darf darüber mehr in unserer Serie schreiben.

Bitte zögern Sie nicht, Ihre Fragen und Kommentare unten hinzuzufügen. Ich nehme generell an den Diskussionen teil. Sie können mich auch auf Twitter @reifman erreichen. Ich freue mich über Feature- und Themenanfragen.

Wenn Sie wissen möchten, wann das nächste Yii2-Tutorial ankommt, folgen Sie mir @reifman auf Twitter oder besuchen Sie meine Instructor-Seite. Meine Ausbilderseite enthält alle Artikel dieser Serie, sobald sie veröffentlicht sind.

ähnliche Links

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.