Hoe te programmeren met Yii2 AuthClient-integratie met Twitter & Google

Als je vraagt: "Wat is Yii?" bekijk mijn eerdere tutorial: Introductie tot het Yii Framework, die de voordelen van Yii bekijkt en een overzicht bevat van wat er nieuw is in Yii 2.0, uitgebracht in oktober 2014.

In deze serie Programming With Yii2 begeleid ik lezers in gebruik van het onlangs bijgewerkte Yii2 Framework voor PHP. In deze zelfstudie begeleid ik u bij de integratie van de ingebouwde AuthClient-ondersteuning om in te loggen bij externe netwerken zoals Twitter, Google en Facebook.

Voor deze voorbeelden blijven we ons voorstellen dat we een raamwerk bouwen voor het plaatsen van eenvoudige statusupdates, bijvoorbeeld onze eigen mini-Twitter, met behulp van onze hello codebase. Gebruik de GitHub-koppelingen op deze pagina om de coderepository te downloaden.

In Programming With Yii2: Integratie van gebruikersregistratie, heb ik de integratie van de Yii2-User-bibliotheek doorlopen voor gebruikersregistratie en -verificatie. In deze zelfstudie leren we hoe we AuthClient met Yii2-gebruiker kunnen integreren en zijn opvattingen kunnen negeren.

Alleen een herinnering, ik neem wel deel aan de onderstaande discussies. Als je een vraag of een suggestie voor een onderwerp hebt, plaats dan een commentaar hieronder. Je kunt me ook bereiken op Twitter @reifman of me e-mailen op Lookahead Consulting.

Wat is AuthClient?

AuthClient is Yii's ingebouwde ondersteuning voor uw applicaties om te authenticeren via services van derden met OpenID, OAuth of OAuth2. 

AuthClient biedt bijvoorbeeld ondersteuning voor nieuwe bezoekers om zich te registreren en zich aan te melden bij uw applicatie via hun Twitter-account in plaats van een wachtwoord in te voeren.

Out of the box, ondersteuning voor de volgende clients wordt geboden:

• Facebook
• GitHub
• Google (via OpenID en OAuth)
• LinkedIn
• Microsoft Live
• tjilpen
• Ook populaire Russische services VKontakte en Yandex (via OpenID en OAuth)

Configuratie voor elke client is een beetje anders. Voor OAuth is het nodig om een ​​client-ID en een geheime sleutel te verkrijgen bij de service die u gaat gebruiken. Voor OpenID werkt het in de meeste gevallen uit de doos.

Voor deze zelfstudie begeleid ik u bij het toevoegen van Twitter- en Google-verificatie.

AuthClient installeren in onze applicatie

Voeg AuthClient toe aan Composer

Eerst moeten we de AuthClient-bibliotheek toevoegen aan composer.json:

"minimum-stability": "stable", "require": "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 ":" * ",

Vervolgens moeten we de componist bijwerken:

sudo composer update Wachtwoord: Plaatsen van composer-repositories met pakketinformatie Bijwerken van afhankelijkheden (inclusief require-dev) - Verwijderen van bower-asset / jquery.inputmask (3.1.58) - Installeren van bower-asset / jquery.inputmask (3.1.61) Bezig met laden van cache Lock-bestand schrijven Autoload-bestanden genereren 

Configureren van AuthClient-ondersteuning

We moeten de AuthClient-configuratie-instellingen toevoegen aan ons webconfiguratiebestand \ Config \ web.php.

Voeg array-elementen toe voor alle services van derden die u wilt ondersteunen (details hierover zijn te vinden in de AuthClient-handleiding). Voorlopig gebruiken we tijdelijke sleutels voor Twitter.

 'basic', 'basePath' => dirname (__ DIR__), 'bootstrap' => ['log'], 'language' => 'en', // terug naar Engelse 'componenten' => ['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 zal out-of-the-box werken zonder aanvullende configuratie, maar voor Twitter moeten we een applicatie registreren.

Registreer onze Twitter-applicatie

Maak een nieuwe Twitter-applicatie op het Twitter Application Dashboard:

Klik Maak een nieuwe app. Ik vond dat de callback-URL niet nodig was, maar voor nu heb ik de placeholder http://mydomain.com/user/security/auth gebruikt.

Dit is de nieuwe pagina voor onze applicatie:

Hier is de instellingen pagina:

Hier is de Sleutels en toegangstokens pagina. Hier moeten we het kopiëren Consumer Key (API Key) en Consumer Secret (API Secret):

We zullen deze toetsen in een oogwenk gebruiken.

Keys beschermen vanaf GitHub

Bij het beschermen van uw sleutels van GitHub, beschreef ik in detail hoe ik een configuratiebestand gebruik om mijn sleutels apart van mijn GitHub-repository op te slaan. Vervolgens neem ik dit bestand op aan het begin van mijn Yii-configuratiebestanden. Dit weerhoudt me ervan om per ongeluk mijn sleutels in mijn repository in te checken en mijn accounts in gevaar te brengen. 

Ook begon ik in Introduction to MailTrap: A Fake SMTP Server voor pre-productie testen van applicatie-e-mail, om de aangepaste SMTP-instellingen van MailTrap in mijn Yii SwiftMailer-configuratie te integreren voor testdoeleinden. Dit zorgt ervoor dat we de registratie-e-mails ontvangen wanneer we ons aanmelden op ons lokale ontwikkelingsplatform.

We plaatsen zowel de Twitter Applicatie-sleutels als de MailTrap SMTP-sleutels in /var/secure/hello.ini buiten de repository:

oauth_twitter_key = "xxxxxxxxxxxxxxxxxx" oauth_twitter_secret = "xxxxxyyyyzzzzzzz222222x1111xx" smtp_host = "mysmtp.com" smtp_username = "apple12345678" smtp_password = "yyyzz !!!! 32vd"

Hier is de code in \ Config \ web.php welke deze instellingen bevat en de individuele configuratievariabelen instelt:

 'basic', 'basePath' => dirname (__ DIR__), 'bootstrap' => ['log'], 'language' => 'en', // terug naar Engelse 'componenten' => ['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 '],],],], 

Verder hieronder, hier is hoe we de SMTP-instellingen voor SwiftMailer configureren:

'mailer' => ['class' => 'yii \ swiftmailer \ Mailer', 'viewPath' => '@ app / mailer', 'useFileTransport' => false, 'transport' => ['class' => ' Swift_SmtpTransport ',' host '=> $ config [' smtp_username '],' gebruikersnaam '=> $ config [' smtp_username '],' wachtwoord '=> $ config [' smtp_password '],' port '=>' 25 ' , 'codering' => 'tls',],],

Het databaseschema bijwerken om sessiesleutels op te slaan

Omdat we Yii2-gebruiker gebruiken, is er al een tokentabel voor het opslaan van de AuthClient-sleutels.

gebruik yii \ db \ Schema; gebruik dektrium \ user \ migrations \ Migration; / ** * @auteur Dmitry Erofeev  * / class m140504_130429_create_token_table breidt Migration uit 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'); 

We zullen de inhoud van deze tabel aan het einde van deze tutorial bekijken, nadat we ons hebben geregistreerd via Twitter.

Voeg de AuthClient-widget toe aan de gebruikersinterface

De aanmeldingspagina van de Yii2-gebruiker geeft de widget Verbinden voor AuthClient op de inlogpagina weer, let op de pictogrammen Google en Twitter onderaan de pagina:

Om de een of andere reden staan ​​ze echter niet op de inschrijvingspagina van de registratie. Dit lijkt me een vergissing.

Om de aanmeldingspagina te wijzigen, moeten we de registratieweergave overschrijven. Gelukkig maken Yii en Yii2-gebruiker dit eenvoudig: zie ook Overzijden in Yii2-gebruiker.

Terugkerend naar \ Config \ web.php, we voegen de onderstaande view-component toe:

 'basic', 'basePath' => dirname (__ DIR__), 'bootstrap' => ['log'], 'language' => 'en', // terug naar Engelse 'componenten' => ['view' => ['theme' => ['pathMap' => ['@ dektrium / user / views' => '@ app / views / user'],],], 'authClientCollection' => [

Vervolgens plaatsen we onze eigen aangepaste versie van Yii2-User's register.php in @ App / views / user / registratie / register.php. Wanneer de registratiepagina wordt aangevraagd, laadt Yii onze versie, inclusief de Connect-widget:

 * * Raadpleeg voor de volledige copyright- en licentie-informatie het LICENSE.md * -bestand dat met deze broncode is gedistribueerd. * / gebruik yii \ helpers \ Html; gebruik yii \ widgets \ ActiveForm; gebruik dektrium \ user \ widgets \ Connect; / ** * @var yii \ web \ Bekijk $ this * @var yii \ widgets \ ActiveForm $ form * @var dektrium \ user \ models \ User $ user * / $ this-> title = Yii :: t ('gebruiker ', 'Inschrijven'); $ this-> params ['breadcrumbs'] [] = $ this-> title; ?> 
 
 
 
 
titel)?>
 
 
  'registratieformulier', ]); ?>  ['/ user / security / auth']])?> veld ($ model, 'gebruikersnaam')?> veld ($ model, 'email')?> getModule ('user') -> enableGeneratingPassword == false):?> field ($ model, 'password') -> passwordInput ()?>   'btn btn-success btn-block'])?>  
 
 
  
 
 
 

Hier is onze aanmeldingspagina nu:

Gebruikerservaring met verbinden via services

Dit is hoe het aanmeldingsproces eruit ziet. Wanneer u op het bovenstaande Twitter-pictogram klikt, wordt u gevraagd in te loggen op uw Twitter-account:

Vervolgens wordt u gevraagd om de toepassing met uw account te autoriseren:

Vervolgens gaat u naar de Aansluiten registratieformulier in onze applicatie-deze pagina wordt ook geleverd door Yii2-gebruiker:

Wanneer u klikt Af hebben, het voegt je OAuth-token in de Token-tabel in en leidt je om naar de startpagina die volledig is geverifieerd met onze applicatie:

Hier is een kijkje in de Token-tabel, die de servicesessiesleutels voor elke gebruiker opslaat:

Bij volgende aanmeldingspogingen zal Twitter u omleiden zonder dat hiervoor aanvullende autorisatie vereist is.

Op die manier integreren we services van derden in de Yii2-basistoepassingssjabloon met Yii2-gebruiker. Ik hoop dat je blij bent met hoe rechtlijnig dit is.

Misschien wil je onze Building Your Startup With PHP-serie eens bekijken, die de geavanceerde template van Yii2 met integratie met derden zal gebruiken (behalve Yii2-User).

Wat is het volgende?

Kijk uit naar komende tutorials in mijn Programming With Yii2-serie terwijl ik verder duik in verschillende aspecten van het framework. 

Ik verwelkom aanvragen voor functies en onderwerpen. Je kunt ze plaatsen in de reacties hieronder of e-mail me op mijn Lookahead Consulting-website.

Als je wilt weten wanneer de volgende Yii2-handleiding aankomt, volg me dan @reifman op Twitter of bekijk mijn instructeurspagina. Op mijn instructeurspagina staan ​​alle artikelen uit deze serie zodra ze zijn gepubliceerd. 

• Handleiding voor uitbreiding AuthClient voor Yii 2
  
• Yii2 OAuth2 Library-documentatie
• Yii2 Developer Exchange, mijn Yii2-bronsite
• Een verzameling Yii-gebaseerde scripts op CodeCanyon