Hoe te programmeren met Yii2 Google-verificatie

Wat je gaat creëren

Als je vraagt: "Wat is Yii?" uitchecken Introductie tot het Yii Framework, die de voordelen van Yii beoordeelt en een overzicht van Yii 2.0 bevat.

In deze serie Programming With Yii2 begeleid ik lezers in gebruik van het Yii2 Framework voor PHP. In deze zelfstudie zal ik u blijven begeleiden bij de integratie van de ingebouwde AuthClient, met behulp van de Google Accounts API en OAuth 2.0. 

Het kan nuttig zijn om Programming With Yii2: Integrating User Registration te bekijken, waarin de integratie van de bibliotheek met Yii2-gebruikers wordt doorlopen voor gebruikersregistratie en authenticatie, en Programming With Yii2: AuthClient-integratie met Twitter, Google en andere netwerken, waarin de integratie wordt onderzocht met Twitter-authenticatie en de nu verouderde ondersteuning voor Google's OpenID. In deze zelfstudie leert u hoe u van onze eerdere Google OpenID-integratie naar OAuth 2.0-integratie met de Google Accounts-API kunt gaan.

Voor deze voorbeelden zullen we blijven voortbouwen op het raamwerk voor de serie, onze hello codebase. Gebruik de GitHub-koppelingen op deze pagina om de download voor de coderepository te krijgen.

Voordat we van start gaan, onthoud alsjeblieft dat ik probeer deel te nemen aan de onderstaande discussies. Als je een vraag of een suggestie voor een onderwerp hebt, plaats dan een reactie hieronder of neem contact met mij op via Twitter @reifman. U kunt mij ook rechtstreeks e-mailen.

Als je hebt gemerkt dat er vertraging is opgetreden in deze serie, komt dat omdat ik recentelijk ben teruggekomen van hersenoperaties. Bedankt voor uw geduld en ondersteuning - het is goed om regelmatig opnieuw te schrijven en ik kijk uit naar de verdere dekking van Yii2.

Updaten van Yii2-gebruiker

Sinds ik laatst over deze onderwerpen heb geschreven, heeft Yii2 User veel verbeterd. Het eerste dat we moeten doen is de bibliotheek bijwerken. Je kunt dit met componist doen op de opdrachtregel:

componist vereist "dektrium / yii2-user: 0.9. * @ dev" 

Hiermee wordt composer.json automatisch bijgewerkt:

"minimum-stability": "stable", "require": "php": "> = 5.4.0", "yiisoft / yii2": "*", "yiisoft / yii2-bootstrap": "*", " yiisoft / yii2-swiftmailer ":" * "," dektrium / yii2-user ":" 0.9.*@dev "," stichoza / google-translate-php ":" ~ 2.0 "," yiidoc / yii2-redactor ": "2.0.0", "yiisoft / yii2-authclient": "*",,

Voer daarna de nieuwste databasemigraties uit voor Yii2-gebruiker - dit zal uw database bijwerken met de nieuwste bibliotheek:

php yii migrate / up --migrationPath = @ vendor / dektrium / yii2-user / migrations

U ziet waarschijnlijk zoiets als dit:

$ php yii migrate / up --migrationPath = @ vendor / dektrium / yii2-user / migrations Yii Migration Tool (gebaseerd op Yii v2.0.6) Totaal 4 nieuwe migraties die moeten worden toegepast: m141222_110026_update_ip_field m141222_135246_alter_username_length m150614_103145_update_social_account_table m150623_212711_fix_username_notnull Pas de bovenstaande migraties toe? (yes | no) [nee]: yes *** apply m141222_110026_update_ip_field> verander column registration_ip in table % user in string (45) ... done (time: 0.009s) *** applied m141222_110026_update_ip_field (time: 0.030s ) *** apply m141222_135246_alter_username_length> verander kolom gebruikersnaam in tabel % user in string (255) ... klaar (tijd: 0.010s) *** toegepast m141222_135246_alter_username_length (tijd: 0.012s) *** apply m150614_103145_update_social_account_table> voeg kolom toe code string (32) naar tabel % social_account ... done (tijd: 0.008s)> voeg column created_at integer toe aan tabel % social_account ... done (time: 0.009s)> voeg kolom email string toe aan tabel  % social_account ... done (time: 0.008s)> kolom-gebruikersnaamreeks toevoegen aan tabel % social_account ... done (tijd: 0.009s)> unieke index account_unique_code maken op % social_account (code) ... done (time: 0.016s) *** applied m150614_103145_update_social_account_table (time: 0.059s) *** apply m150623_212711_fix_username_notnull> al ter kolom gebruikersnaam in tabel % user naar string (255) NOT NULL ... done (tijd: 0.009s) *** toegepast m150623_212711_fix_username_notnull (tijd: 0.011s) Migratie succesvol uitgevoerd.

Je moet ook de componentdefinitie voor yii2-gebruiker naar modules verplaatsen in \ hello \ config \ web.php:

'modules' => ['redactor' => 'yii \ redactor \ RedactorModule', 'class' => 'yii \ redactor \ RedactorModule', 'uploadDir' => '@ webroot / uploads', 'uploadUrl' => ' / hallo / uploads ',' user '=> [' class '=>' dektrium \ user \ Module ',' enableUnconfirmedLogin '=> TRUE,' confirmWithin '=> 21600,' cost '=> 12,' admins '= > ['admin']],],

Registreer uw Google-project

Om ervoor te zorgen dat uw Yii2-app-gebruikers zich registreren en inloggen met hun Google-accounts, moet u een Google-project registreren in de ontwikkelaarsconsole:

Laten we Maak een project genaamd yii2hello:

U wordt naar de startpagina van het project geleid met een verscheidenheid aan opties in het menu aan de linkerzijbalk:

Het is belangrijk om toegang te vragen tot elke API-groep met Google die we mogelijk gebruiken. Voor Yii2-gebruiker moeten we Google+ API's inschakelen. Klik op API's en auth> API's en zoek naar google+:

Dan klikken API inschakelen:

Je ziet een lijst met de Ingeschakelde API's die nu het Google+ API:

Vervolgens moeten we inloggegevens toevoegen, zodat we onze API-verzoeken bij Google kunnen verifiëren voor de activiteiten van dit project. Klik Geloofsbrieven:

Laten we de gebruiken OAuth 2.0 client-ID optie hierboven. U wordt vervolgens gevraagd om een OAuth toestemmingsscherm en vul informatie in over uw aanvraag die wordt gepresenteerd aan gebruikers die proberen zich te registreren of zich aanmelden met uw applicatie:

Op de Geloofsbrieven pagina, zullen we kiezen web applicatie, en omdat we lokaal testen, bieden we twee instellingen voor authenticatie-callbacks. Ik gebruik poort 8888 voor mijn lokale ontwikkeling. Dus mijn Geautoriseerde JavaScript-oorsprong zal http: // localhost: 8888 zijn en Yii2 Gebruiker vereist de Geautoriseerde redirect-URI's pad van http: // localhost: 8888 / hallo / user / security / auth? authclient = google.

U krijgt API-sleutels te zien, ook bekend als a klant identificatie en klant geheim:

Ik zal bekijken waar ik de onderstaande sleutels moet plaatsen.

De AuthClient-ondersteuning configureren

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. 

In mijn /var/secure/hello.ini bestand, sla ik alle sleutels op voor mijn applicatie - plaats hier ook uw Google API-sleutels:

oauth_google_clientId = "41xxxxxxxxxxxxxeusercontent.com" oauth_google_clientSecret = "LmxxxxxxxxxxxxxxxxxxxxxxFJ4" oauth_twitter_key = "rxkxxxxxxxxxxxxxxxxxopjU" oauth_twitter_secret = "b7gU4twxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxkLy0z2e" smtp_host = "mailtrap.io" smtp_username = "2xxxxxxxxxxxxxxxxx2" smtp_password = "2xxxxxxxxxxxxxxxxx5" mysql_host = "localhost" mysql_un = "xxxxxxxxxxxx" mysql_db = "hallo" mysql_pwd = "xxxxxxxxxxxx"

We moeten verwijzingen naar deze sleutels toevoegen in de AuthClient-configuratie-instellingen in ons webconfiguratiebestand in \ Config \ web.php. Voeg array-elementen toe voor alle services van derden die u wilt ondersteunen:

 'basic', 'basePath' => dirname (__ DIR__), 'bootstrap' => ['log'], 'language' => 'en', // terug naar Engelse 'componenten' => ['view' => ['theme' => ['pathMap' => ['@ dektrium / user / views' => '@ app / views / user'],],], 'authClientCollection' => ['class' => 'yii \ authclient \ Collection ',' clients '=> [' google '=> [' class '=>' dektrium \ user \ clients \ Google ',' clientId '=> $ config [' oauth_google_clientId '],' clientSecret '= > $ config ['oauth_google_clientSecret'],], 'twitter' => ['class' => 'yii \ authclient \ clients \ Twitter', 'consumerKey' => $ config ['oauth_twitter_key'], 'consumerSecret' => $ config ['oauth_twitter_secret'],],],],

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.

Voor deze zelfstudie vond ik dat ik poortinformatie voor SwiftMailer moest bijwerken naar 2525 inch \ Config \ web.php:

'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 '=>' 2525 ' , 'codering' => 'tls',],],

Registreren bij uw Google-account

Nu zijn we eindelijk klaar om te verkennen met behulp van de front-end interface van de Yii2-gebruiker. Laten we beginnen met registratie. Klik op de Inschrijven optie in het menu en je ziet dit formulier:

Als u wilt registreren met alles wat we vandaag hebben gemaakt, klikt u op het Google+ pictogram. Omdat ik alleen op één Google-account ben ingelogd, krijg ik een transparante pop-up en omleiding om mijn registratie te voltooien:

U zou de startpagina moeten zien die aangeeft dat u bent geverifieerd in de rechterbovenhoek:

Aanmelden met uw Google-account

Klik Uitloggen en dan kunnen we proberen in te loggen met het Google+ pictogram. Klik Aanmelden in het kopmenu:

Klik vervolgens op de Google+ pictogram nog een keer. U wordt meteen naar het startscherm geleid om aan te geven dat u opnieuw bent ingelogd. Best cool, toch? Maar wat als u bent ingelogd op twee Google-accounts?

Wanneer u uw Google-account selecteert om in te loggen, wordt u teruggebracht naar de startpagina in de geverifieerde modus.

Het gebruikersprofiel en verbindingsgebied

Hoewel het nog niet is geconfigureerd in ons Bootstrap-headermenu, als u het bezoekt  http: // localhost: 8888 / hallo / user / instellingen / netwerken, je ziet de nieuwe verbindingsinterface voor accounts van derden binnen Yii2 User:

Nadat u bent ingelogd, kunnen uw gebruikers vanaf hier verbinding maken en hun sociale accounts loskoppelen. Er is ook een accountbeheer- en gebruikersprofielgebied. Het is best goed gedaan. 

Misschien wil je mijn Building Your Startup With PHP-serie eens bekijken, die gebruik maakt van Yii2's geavanceerde sjabloon met integratie door derden, momenteel zonder Yii2-gebruiker. Er is nu echter een handleiding om Yii2-gebruiker te integreren met de geavanceerde sjabloon, dus ik kan dit binnenkort bijwerken.

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. 

  • Programmeren met Yii2: gebruikersregistratie integreren (Tuts +)
  • Programmeren met Yii2: AuthClient-integratie met Twitter, Google en andere netwerken (Tuts +)
  • Handleiding voor uitbreiding AuthClient voor Yii 2
  • Yii2 OAuth2 Library-documentatie
  • Yii2 Developer Exchange, mijn Yii2-bronsite