Hur man programmerar med Yii2 AuthClient Integration With Twitter & Google

Vad du ska skapa

Om du frågar, "Vad är Yii?" kolla in min tidigare handledning: Introduktion till Yii Framework, som granskar fördelarna med Yii och innehåller en översikt över vad som är nytt i Yii 2.0, släppt i oktober 2014.

I denna programmering med Yii2-serien guidar jag läsare som använder den nyuppgraderade Yii2 Framework for PHP. I denna handledning guidar jag dig genom integrering av det inbyggda AuthClient-stödet för att ge inloggning från tredje parts nätverk som Twitter, Google och Facebook.

För dessa exempel fortsätter vi att föreställa oss att vi bygger ett ramverk för att skicka enkla statusuppdateringar, t.ex. vår egen mini-Twitter, med hjälp av vår hej kodbas. Använd GitHub-länkarna på den här sidan för att ladda ner kodförvaret.

I programmering med Yii2: Integrerande användarregistrering gick jag igenom integrationen av Yii2-användarbiblioteket för användarregistrering och autentisering. I den här handledningen lär vi dig hur du integrerar AuthClient med Yii2-användaren och åsidosätter dess åsikter.

Bara en påminnelse, jag deltar i diskussionerna nedan. Om du har en fråga eller ett ämnesförslag, vänligen skriv en kommentar nedan. Du kan också nå mig på Twitter @ reifman eller maila mig på Lookahead Consulting.

Vad är AuthClient?

AuthClient är Yiis inbyggda stöd för dina applikationer att autentisera via tredjepartstjänster med OpenID, OAuth eller OAuth2. 

Till exempel ger AuthClient stöd för nya besökare att registrera och logga in på din ansökan med deras Twitter-konto istället för att behöva lämna ett lösenord.

Utanför lådan tillhandahålls stöd till följande kunder:

  • Facebook
  • GitHub
  • Google (via OpenID och OAuth)
  • Linkedin
  • Microsoft Live
  • Twitter
  • Också populära ryska tjänster VKontakte och Yandex (via OpenID och OAuth)

Konfigurationen för varje klient är lite annorlunda. För OAuth krävs det att du får klient-ID och hemlig nyckel från den tjänst du ska använda. För OpenID fungerar det i de flesta fall.

För denna handledning går jag igenom dig genom att lägga till Twitter och Google-autentisering.

Installera AuthClient i vår applikation

Lägg till AuthClient till Kompositör

Först måste vi lägga till AuthClient-biblioteket till composer.json:

"minimumstabilitet": "stabilt", "kräver": "php": "> = 5.4.0", "yiisoft / yii2": "*", "yiisoft / yii2-bootstrap": "*" yiisoft / yii2-swiftmailer ":" * "," dektrium / yii2-användare ":" 0.8.2 "," stichoza / google-translate-php ":" ~ 2.0 "," yiidoc / yii2-redaktor ":" 2.0 .0 "," yiisoft / yii2-authclient ":" * ",

Då behöver vi uppdatera kompositör:

sudo composer-uppdatering Lösenord: Laddar kompositregister med paketinformation Uppdatering av beroenden (inklusive krav-dev) - Ta bort bower-asset / jquery.inputmask (3.1.58) - Installera bower-asset / jquery.inputmask (3.1.61) Laddar från cache Skriva låsfil Generera autoload-filer 

Konfigurera AuthClient Support

Vi måste lägga till AuthClient-konfigurationsinställningarna i vår webbkonfigurationsfil i \ Config \ web.php.

Lägg till arrayelement för alla tredjepartstjänster som du vill stödja (detaljer för var och en finns i AuthClient Guide). För tillfället använder vi platshållartangenter för Twitter.

 'basic', 'basePath' => dirname (__ DIR__), 'bootstrap' => ['logg'], 'language' => 'en', // tillbaka till engelska 'components' => ['authClientCollection' => ['class' => 'yii \ authclient \ Samling', 'klienter' => ['google' => ['class' => 'yii \ authclient \ klienter \ GoogleOpenId'], 'twitter' => ['klass '=>' yii \ authclient \ klienter \ Twitter ',' consumerKey '=>' twitter_consumer_key ',' consumerSecret '=>' twitter_consumer_secret ',],],],

Google kommer att träna i rutan utan ytterligare konfiguration, men för Twitter måste vi registrera en ansökan.

Registrera vår Twitter-ansökan

Skapa en ny Twitter-applikation på Twitter Application Dashboard:

Klick Skapa ny app. Jag fann att återuppringningsadressen var onödig, men för närvarande använde jag platshållaren http://mydomain.com/user/security/auth.

Här är den nya sidan för vår ansökan:

Här är inställningar sida:

Här är Nycklar och åtkomsttoken sida. Här måste vi kopiera Konsumentnyckel (API-nyckel) och Konsumenthemlighet (API-hemlighet):

Vi använder dessa nycklar på ett ögonblick.

Skydda nycklar från GitHub

För att skydda dina nycklar från GitHub beskrev jag i detalj hur jag använder en konfigurationsfil för att lagra alla mina nycklar förutom mitt GitHub-arkiv. Sedan tar jag med den här filen i början av min Yii-konfigurationsfiler. Detta hindrar mig från att oavsiktligt kolla in mina nycklar till mitt förråd och kompromissa med mina konton. 

I introduktion till MailTrap: En falsk SMTP-server för förproduktionstestning av ansökningsadress, började jag också integrera MailTraps anpassade SMTP-inställningar i min Yii SwiftMailer-konfiguration för teständamål. Detta kommer att se till att vi får registreringsemail när vi registrerar oss på vår lokala utvecklingsplattform.

Vi placerar både Twitter Application Key och MailTrap SMTP-tangenterna in i /var/secure/hello.ini utanför förvaret:

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

Här är koden i \ Config \ web.php som inkluderar dessa inställningar och ställer in de enskilda konfigurationsvariablerna:

 'basic', 'basePath' => dirname (__ DIR__), 'bootstrap' => ['logg'], 'language' => 'en', // tillbaka till engelska 'components' => ['authClientCollection' => ['class' => 'yii \ authclient \ Samling', 'klienter' => ['google' => ['class' => 'yii \ authclient \ klienter \ GoogleOpenId'], 'twitter' => ['klass '=>' yii \ authclient \ klienter \ Twitter ',' consumerKey '=> $ config [' oauth_twitter_key '],' consumerSecret '=> $ config [' oauth_twitter_secret '],],],], 

Nedan nedan är hur vi konfigurerar SMTP-inställningarna för SwiftMailer:

'mailer' => ['class' => 'yii \ swiftmailer \ Mailer', 'viewPath' => '@ app / mailer', 'useFileTransport' => false, 'transport' => ['class' => ' Swift_SmtpTransport ',' host '=> $ config [' smtp_host '],' användarnamn '=> $ config [' smtp_username '],' lösenord '=> $ config [' smtp_password '],' port '=>' 25 ' , 'kryptering' => 'tls',],],

Uppdatering av databasschemat till butikssessionstangenter

Eftersom vi använder Yii2-Användare, finns det redan ett teckentabell för att lagra AuthClient-tangenterna.

använd yii \ db \ schema; använd dektrium \ user \ migrations \ Migration; / ** * @author Dmitry Erofeev  * / class m140504_130429_create_token_table utökar migration public function up () $ this-> createTable ('token', ['user_id' => Schema :: TYPE_INTEGER. 'NOT NULL', 'code' => Schema :: TYPE_STRING. '(32) INTE NULL', 'created_at' => Schema :: TYPE_INTEGER. 'INTE NULL', 'typ' => Schema :: TYPE_SMALLINT. 'NOT NULL'], $ this-> tableOptions); $ this-> createIndex ('token_unique', 'token', ['user_id', 'code', 'typ'], true); $ this-> addForeignKey ('fk_user_token', 'token', 'user_id', '% user', 'id', 'CASCADE', 'RESTRICT');  offentlig funktion ner () $ this-> dropTable ('token'); 

Vi kommer att undersöka innehållet i denna tabell i slutet av denna handledning, efter att vi har registrerat via Twitter.

Lägg till AuthClient Widget till användargränssnittet

Inloggningssidan för Yii2-användaren visar dess Connect-widget för AuthClient-tjänster på inloggningssidan. Lägg märke till Google och Twitter-ikonen längst ner på sidan:

Av någon anledning ingår de inte på registreringssidan. Det här ser ut som ett tillsyn till mig.

För att ändra registreringssidan måste vi överväga registreringsvyn. Lyckligtvis gör Yii och Yii2-användaren det här enkelt, se även Övergripande visningar i Yii2-Användaren.

Återgår till \ Config \ web.php, vi lägger till visningskomponenten nedan:

 'basic', 'basePath' => dirname (__ DIR__), 'bootstrap' => ['logg'], 'language' => 'en', // tillbaka till engelska 'components' => ['view' => ['theme' => ['pathMap' => ['@ dektrium / användare / views' => '@ app / views / user'],], 'authClientCollection' =>

Sedan lägger vi vår egen ändrade version av Yii2-användarens register.php in @ App / vyer / användare / registrering / register.php. När registreringssidan begärs laddar Yii vår version, som inkluderar Connect-widgeten:

 * * För fullständig upphovsrätt och licensinformation, se LICENSE.md * -filen som distribuerades med denna källkod. * / använd yii \ helpers \ Html; använd yii \ widgets \ ActiveForm; använd dektrium \ user \ widgets \ Connect; / ** * @var yii \ web \ Visa $ this * @var yii \ widgets \ ActiveForm $ form * @var dektrium \ user \ models \ User $ användare * / $ this-> title = Yii :: t ', 'Bli Medlem'); $ this-> params ['breadcrumbs'] [] = $ this-> title; ?> 

titel)?>

'anmälningsblankett', ]); ?> ['/ användare / säkerhet / auth']])?> fält ($ modell, 'användarnamn')?> fält ($ modell, 'email')?> getModule ('user') -> enableGeneratingPassword == false):?> fält ($ modell, lösenord) -> passwordInput ()?> 'btn btn-success btn-block'])?>

Här är vår anmälningssida nu:

Användarupplevelse av anslutning via tjänster

Så här ser registreringsprocessen ut. När du klickar på Twitter-ikonen ovan kommer den att fråga dig att logga in på ditt Twitter-konto:

Då kommer det att be dig att godkänna ansökan med ditt konto:

Då tar det dig till Ansluta registreringsformulär i vår ansökan-denna sida tillhandahålls också av Yii2-User:

När du klickar Avsluta, den infogar ditt OAuth-token i Token-tabellen och omdirigerar dig till hemsidan som är fullständigt autentiserad med vår ansökan:

Här är en titt inuti Token-tabellen, som lagrar servicesessionstangenterna för varje användare:

Vid efterföljande inloggningsförsök, kommer Twitter att omdirigera dig utan att behöva ytterligare behörighet.

Så här integrerar vi tjänster från tredje part i Yii2-basprogrammet med Yii2-användare. Jag hoppas att du är nöjd med hur enkelt det här är.

Du kanske vill kolla in vår Building Your Startup With PHP-serie, som kommer att använda Yii2s avancerade mall med tredjepartsintegration (förutom Yii2-användare).

Vad kommer härnäst?

Titta på kommande handledningar i min programmering med Yii2-serien när jag fortsätter att dyka in i olika aspekter av ramen. 

Jag välkomnar funktion och ämnesförfrågningar. Du kan skicka in dem i kommentarerna nedan eller maila mig på min Lookahead Consulting webbplats.

Om du vill veta när nästa Yii2 handledning kommer, följ mig @ reifman på Twitter eller kolla min instruktörssida. Min instruktörssida kommer att innehålla alla artiklar från denna serie så snart de publiceras. 

  • Guide till AuthClient Extension för Yii 2
  • Yii2 OAuth2-biblioteksdokumentation
  • Yii2 Developer Exchange, min Yii2 resurs webbplats
  • En samling av Yii-baserade skript på CodeCanyon