Programmieren mit Yii2 AuthClient-Integration mit Twitter & Google

Wenn Sie fragen: "Was ist Yii?" Schauen Sie sich mein früheres Tutorial an: Einführung in das Yii-Framework, Hier werden die Vorteile von Yii beschrieben und ein Überblick über die Neuerungen in Yii 2.0 (Oktober 2014) gegeben.

In dieser Programmierserie mit Yii2 leite ich die Leser beim Einsatz des neu aktualisierten Yii2-Frameworks für PHP. In diesem Lernprogramm führe ich Sie durch die Integration der integrierten AuthClient-Unterstützung, um Anmeldungen von Drittanbieternetzwerken wie Twitter, Google und Facebook bereitzustellen.

Für diese Beispiele stellen wir uns weiterhin vor, dass wir ein Framework für die Veröffentlichung einfacher Statusaktualisierungen erstellen, z. unser eigenes Mini-Twitter mit unserer Hallo-Codebase. Verwenden Sie die GitHub-Links auf dieser Seite, um das Code-Repository herunterzuladen.

Bei der Programmierung mit Yii2: Integration der Benutzerregistrierung bin ich durch die Integration der Yii2-User-Bibliothek zur Benutzerregistrierung und -authentifizierung gegangen. In diesem Lernprogramm erfahren Sie, wie Sie AuthClient in Yii2-User integrieren und seine Ansichten überschreiben.

Nur zur Erinnerung, ich nehme an den folgenden Diskussionen teil. Wenn Sie eine Frage oder ein Thema haben, schreiben Sie bitte einen Kommentar. Sie können mich auch über Twitter @reifman erreichen oder mich bei Lookahead Consulting per E-Mail benachrichtigen.

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. 

AuthClient bietet beispielsweise Unterstützung für neue Besucher, die sich mit ihrem Twitter-Account registrieren und sich in Ihrer Anwendung anmelden müssen, anstatt ein Passwort eingeben zu müssen.

Standardmäßig wird Unterstützung für die folgenden Clients bereitgestellt:

• Facebook
• GitHub
• Google (über OpenID und OAuth)
• LinkedIn
• Microsoft Live
• Twitter
• Auch beliebte russische Dienste VKontakte und Yandex (über OpenID und OAuth)

Die Konfiguration für jeden Client ist etwas anders. Für OAuth ist es erforderlich, die Client-ID und den geheimen Schlüssel von dem Dienst zu erhalten, den Sie verwenden werden. Für OpenID funktioniert das in den meisten Fällen sofort.

In diesem Tutorial werde ich Sie durch das Hinzufügen von Twitter- und Google-Authentifizierung führen.

AuthClient in unserer Anwendung installieren

Fügen Sie AuthClient zu Composer hinzu

Zuerst müssen wir die AuthClient-Bibliothek zu composer.json hinzufügen:

"Mindeststabilität": "Stable", "Requirement": "php": "> = 5.4.0", "yiisoft / yii2": "*", "yiisoft / yii2-bootstrap": "*", " yiisoft / yii2-swiftmailer ":" * "," dektrium / yii2-user ":" 0.8.2 "," stichoza / google-translate-php ":" ~ 2.0 "," yiidoc / yii2-redactor ":" 2.0 .0 "," yiisoft / yii2-authclient ":" * ",

Dann müssen wir den Komponisten aktualisieren:

sudo composer update Kennwort: Composer-Repositorys mit Paketinformationen laden Abhängigkeiten aktualisieren (einschließlich required-dev) - Entfernen von bower-asset / jquery.inputmask (3.1.58) - Installieren von bower-asset / jquery.inputmask (3.1.61) Laden aus dem Cache Sperrdatei schreiben Automatisches Laden von Dateien 

AuthClient-Unterstützung konfigurieren

Wir müssen die AuthClient-Konfigurationseinstellungen unserer Webkonfigurationsdatei in hinzufügen \ config \ web.php.

Fügen Sie Array-Elemente für alle Drittanbieter-Services hinzu, die Sie unterstützen möchten (Details zu den einzelnen Services finden Sie im AuthClient-Handbuch). Im Moment verwenden wir Platzhalterschlüssel für Twitter.

 'basic', 'basePath' => dirname (__ DIR__), 'bootstrap' => ['log'], 'language' => 'de', // zurück zu englischen 'components' => ['authClientCollection' => ['class' => 'yii \ authclient \ Collection', 'clients' => ['google' => ['class' => 'yii \ authclient \ clients \ GoogleOpenId'], 'twitter' => ['class '=>' yii \ authclient \ clients \ Twitter ',' consumerKey '=>' twitter_consumer_key ',' consumerSecret '=>' twitter_consumer_secret ',],],],

Google funktioniert sofort und ohne zusätzliche Konfiguration. Für Twitter müssen wir jedoch eine Anwendung registrieren.

Registrieren Sie sich bei Twitter

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

Klicken Neue App erstellen. Ich habe festgestellt, dass die Rückmeldungs-URL nicht erforderlich war, aber jetzt habe ich den Platzhalter http://mydomain.com/user/security/auth verwendet.

Hier ist die neue Seite für unsere Bewerbung:

Hier ist die die Einstellungen Seite:

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

Wir werden diese Schlüssel gleich nutzen.

Schlüssel vor GitHub schützen

Beim Schützen Ihrer Schlüssel vor GitHub 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. 

In Einführung in MailTrap: Ein gefälschter SMTP-Server zum Testen von Anwendungs-E-Mails vor der Produktion habe ich zu Testzwecken damit begonnen, die benutzerdefinierten SMTP-Einstellungen von MailTrap in meine Konfiguration von Yii SwiftMailer zu integrieren. Dies stellt sicher, dass wir die Registrierungs-E-Mails erhalten, wenn wir uns auf unserer lokalen Entwicklungsplattform anmelden.

Wir legen sowohl die Twitter-Anwendungsschlüssel als auch die MailTrap-SMTP-Schlüssel in ein /var/secure/hello.ini außerhalb des Repository:

oauth_twitter_key = "xxxxxxxxxxxxxxxxxx" oauth_twitter_secret = "xxxxxyyyyzzzzzzz222222x1111xx" smtp_host = "mysmtp.com" smtp_username = "apple12345678" smtp_password = "yyzz !!!!"

Hier ist der Code in \ config \ web.php welche diese Einstellungen enthält und die einzelnen Konfigurationsvariablen setzt:

 'basic', 'basePath' => dirname (__ DIR__), 'bootstrap' => ['log'], 'language' => 'de', // zurück zu englischen 'components' => ['authClientCollection' => ['class' => 'yii \ authclient \ Collection', 'clients' => ['google' => ['class' => 'yii \ authclient \ clients \ GoogleOpenId'], 'twitter' => ['class '=>' yii \ authclient \ clients \ Twitter ',' consumerKey '=> $ config [' oauth_twitter_key '],' consumerSecret '=> $ config [' oauth_twitter_secret '],],]], 

Weiter unten konfigurieren wir die SMTP-Einstellungen für SwiftMailer:

'mailer' => ['class' => 'yii \ swiftmailer \ Mailer', 'viewPath' => '@ app / mailer', 'useFileTransport' => false, 'transport' => ['class' => ' Swift_SmtpTransport ',' host '=> $ config [' smtp_host '],' username '=> $ config [' smtp_username '],' password '=> $ config [' smtp_password '],' port '=>' 25 ' , 'Verschlüsselung' => 'tls',],],

Aktualisieren des Datenbankschemas zum Speichern von Sitzungsschlüsseln

Da wir Yii2-User verwenden, wurde bereits eine Token-Tabelle zum Speichern der AuthClient-Schlüssel bereitgestellt.

Verwenden Sie yii \ db \ Schema; benutze dektrium \ user \ migrations \ Migration; / ** * @author Dmitry Erofeev  * / class m140504_130429_create_token_table erweitert Migration public function up () $ this-> createTable ('% token', ['user_id' => Schema :: TYPE_INTEGER. 'NOT NULL', 'code' => Schema :: TYPE_STRING. '(32) NOT NULL', 'created_at' => Schema :: TYPE_INTEGER. 'NOT NULL', 'type' => Schema :: TYPE_SMALLINT. 'NOT NULL'], $ this-> tableOptions); $ this-> createIndex ('token_unique', '% token', ['user_id', 'code', 'type'], true); $ this-> addForeignKey ('fk_user_token', '% token', 'user_id', '% user', 'id', 'CASCADE', 'RESTRICT');  public function down () $ this-> dropTable ('% token'); 

Wir werden den Inhalt dieser Tabelle am Ende dieses Tutorials prüfen, nachdem wir uns über Twitter registriert haben.

Fügen Sie das AuthClient-Widget zur Benutzeroberfläche hinzu

Auf der Anmeldeseite von Yii2-User wird auf der Anmeldeseite das Connect-Widget für AuthClient-Dienste angezeigt. Beachten Sie dazu die Google- und Twitter-Symbole unten auf der Seite:

Aus irgendeinem Grund sind sie jedoch nicht auf der Registrierungsseite für die Registrierung enthalten. Dies scheint mir ein Versehen zu sein.

Um die Anmeldeseite zu ändern, müssen Sie die Registrierungsansicht überschreiben. Glücklicherweise machen Yii und Yii2-user diese übersichtliche Ansicht auch zum Überschreiben von Ansichten in Yii2-User.

Zurückkehren zu \ config \ web.php, Wir fügen die Ansichtskomponente unten hinzu:

 'basic', 'basePath' => dirname (__ DIR__), 'bootstrap' => ['log'], 'language' => 'de', // zurück zu englischen 'components' => ['view' => ['theme' => ['pathMap' => ['@dektrium / user / views' => '@ app / views / user'],],], 'authClientCollection' => [

Dann legen wir unsere eigene modifizierte Version von Yii2-user register.php in ein @ app / views / user / registration / register.php. Wenn die Registrierungsseite angefordert wird, lädt Yii unsere Version, die das Connect-Widget enthält:

 * * Die vollständigen Informationen zum Urheberrecht und zur Lizenz finden Sie in der Datei LICENSE.md *, die mit diesem Quellcode verteilt wurde. * / use yii \ helpers \ Html; Verwenden Sie yii \ widgets \ ActiveForm; Verwenden Sie dektrium \ user \ widgets \ Connect; / ** * @var yii \ web \ View $ this * @var yii \ widgets \ ActiveForm $ form * @var dektrium \ user \ models \ Benutzer $ user * / $ this-> title = Yii :: t ('Benutzer ', 'Anmelden'); $ this-> params ['breadcrumbs'] [] = $ this-> title; ?> 
 
 
 
 
Titel)?>
 
 
  'Anmeldeformular', ]); ?>  ['/ user / security / auth']])?> Feld ($ model, 'username')?> Feld ($ model, 'email')?> getModule ('user') -> enableGeneratingPassword == false):?> Feld ($ model, 'password') -> passwordInput ()?>   'btn btn-success btn-block'])?>  
 
 
  
 
 
 

Hier ist jetzt unsere Anmeldeseite:

Benutzererfahrung beim Verbinden über Dienste

So sieht der Anmeldeprozess aus. Wenn Sie oben auf das Twitter-Symbol klicken, werden Sie aufgefordert, sich bei Ihrem Twitter-Konto anzumelden:

Dann werden Sie aufgefordert, die Anwendung mit Ihrem Konto zu autorisieren:

Dann bringt es dich zum Verbinden Anmeldeformular in unserer Bewerbung - diese Seite wird auch von Yii2-User bereitgestellt:

Wenn Sie auf klicken Fertig, Es fügt Ihr OAuth-Token in die Token-Tabelle ein und leitet Sie zur Startseite zurück, die vollständig mit unserer Anwendung authentifiziert ist:

Hier ist ein Blick in die Token-Tabelle, in der die Dienstsitzungsschlüssel für jeden Benutzer gespeichert werden:

Bei nachfolgenden Anmeldeversuchen leitet Twitter Sie ohne weitere Autorisierung um.

So integrieren wir mit Yii2-User Dienste von Drittanbietern in die Yii2-Basisanwendungsvorlage. Ich hoffe, Sie freuen sich darüber, wie einfach das ist.

Vielleicht möchten Sie unsere Build Your Startup With PHP-Serie ausprobieren, die die erweiterte Vorlage von Yii2 mit Integration von Drittanbietern verwendet (abgesehen von Yii2-User)..

Was kommt als nächstes?

Achten Sie auf kommende Tutorials in meiner Programmierreihe "Programmieren mit Yii2", während ich mich weiter mit verschiedenen Aspekten des Frameworks beschäftige. 

Ich freue mich über Feature- und Themenanfragen. Sie können sie in den Kommentaren unten posten oder mich auf meiner Lookahead Consulting-Website per E-Mail benachrichtigen.

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. 

• Leitfaden zur AuthClient-Erweiterung für Yii 2
  
• Yii2 OAuth2-Bibliotheksdokumentation
• Yii2 Developer Exchange, meine Website für Yii2-Ressourcen
• Eine Sammlung von Yii-basierten Skripten zu CodeCanyon