Slik programmerer du med Yii2 AuthClient Integrering med Twitter og Google

Hva du skal skape

Hvis du spør, "Hva er Yii?" sjekk ut min tidligere opplæring: Introduksjon til Yii Framework, som vurderer fordelene med Yii og inneholder en oversikt over hva som er nytt i Yii 2.0, utgitt i oktober 2014.

I denne programmeringen med Yii2-serien, er jeg veiledende lesere i bruk av den nylig oppgraderte Yii2 Framework for PHP. I denne veiledningen vil jeg veilede deg gjennom integrering av den innebygde AuthClient-støtten for å gi innlogging fra tredjepartsnett som Twitter, Google og Facebook.

For disse eksemplene fortsetter vi å forestille oss at vi bygger et rammeverk for å legge ut enkle statusoppdateringer, f.eks. vår egen mini-Twitter, ved hjelp av vår hei kodebase. Bruk GitHub-koblingene på denne siden for å laste ned kodelageret.

I programmering med Yii2: Integrerer brukerregistrering, gikk jeg gjennom integrering av Yii2-brukerbiblioteket for brukerregistrering og godkjenning. I denne veiledningen lærer vi hvordan du integrerer AuthClient med Yii2-bruker og tilsidesetter visninger.

Bare en påminnelse, jeg deltar i diskusjonene nedenfor. Hvis du har et spørsmål eller et emneforslag, vennligst legg inn en kommentar nedenfor. Du kan også nå meg på Twitter @ reifman eller email meg på Lookahead Consulting.

Hva er AuthClient?

AuthClient er Yiis innebygd støtte for at programmene dine kan godkjenne via tredjepartstjenester med OpenID, OAuth eller OAuth2. 

For eksempel gir AuthClient støtte til nye besøkende til å registrere og logge inn på søknaden din ved hjelp av sin Twitter-konto i stedet for å måtte oppgi et passord.

Utenfor esken er det gitt støtte for følgende kunder:

  • Facebook
  • GitHub
  • Google (via OpenID og OAuth)
  • Linkedin
  • Microsoft Live
  • Twitter
  • Også populære russiske tjenester VKontakte og Yandex (via OpenID og OAuth)

Konfigurasjon for hver klient er litt annerledes. For OAuth er det nødvendig å få klient-ID og hemmelig nøkkel fra tjenesten du skal bruke. For OpenID fungerer det i de fleste tilfeller ikke.

For denne opplæringen vil jeg gå deg gjennom å legge til Twitter og Google-godkjenning.

Installere AuthClient i vårt program

Legg til AuthClient til Komponist

Først må vi legge til AuthClient-biblioteket til composer.json:

"minimumstabilitet": "stabilt", "krever": "php": "> = 5.4.0", "yiisoft / yii2": "*", "yiisoft / yii2-bootstrap": "*" yiisoft / yii2-swiftmailer ":" * "," dektrium / yii2-bruker ":" 0.8.2 "," stichoza / google-translate-php ":" ~ 2.0 "," yiidoc / yii2-redactor ":" 2.0 .0 "," yiisoft / yii2-authclient ":" * ",

Da må vi oppdatere komponisten:

sudo-komponistoppdatering Passord: Laster inn kompositorbeholdninger med pakkeinformasjon Oppdatere avhengigheter (inkludert krav-dev) - Fjerner bower-asset / jquery.inputmask (3.1.58) - Installere bower-asset / jquery.inputmask (3.1.61) Laster fra cache Skrive låsfil Generere autoload-filer 

Konfigurere AuthClient-støtte

Vi må legge til AuthClient-konfigurasjonsinnstillingene i vår webkonfigurasjonsfil i \ Config \ web.php.

Legg til elementelementer for alle tredjepartstjenestene du vil støtte (detaljer for hver finner du i AuthClient Guide). For nå bruker vi plassholdernøkler til Twitter.

 'basic', 'basePath' => dirname (__ DIR__), 'bootstrap' => ['logg'], 'språk' => 'no', // tilbake til engelsk 'components' => ['authClientCollection' => ['class' => 'yii \ authclient \ Collection', 'klienter' => ['google' => ['class' => 'yii \ authclient \ klienter \ GoogleOpenId'], 'twitter' => ['klasse '=>' yii \ authclient \ klienter \ Twitter ',' consumerKey '=>' twitter_consumer_key ',' consumerSecret '=>' twitter_consumer_secret ',],],],

Google vil trene ut av boksen uten ytterligere konfigurasjon, men for Twitter må vi registrere et program.

Registrer vår Twitter-søknad

Opprett et nytt Twitter-program på Twitter Application Dashboard:

Klikk Opprett ny app. Jeg fant ut at tilbakekallingsadressen var unødvendig, men for nå brukte jeg stedholderen http://mydomain.com/user/security/auth.

Her er den nye siden for vår søknad:

Her er innstillinger side:

Her er Taster og tilgangstegn side. Her må vi kopiere Forbrukernøkkel (API-nøkkel) og Forbrukerhemmelig (API Secret):

Vi bruker disse tastene på et øyeblikk.

Beskytte nøkler fra GitHub

Når jeg beskytter tastene dine fra GitHub, beskrev jeg i detalj hvordan jeg bruker en konfigurasjonsfil for å lagre alle mine nøkler bortsett fra GitHub-depotet mitt. Deretter inkluderer jeg denne filen i begynnelsen av min Yii konfigurasjonsfiler. Dette forhindrer meg ved et uhell å sjekke inn mine nøkler til mitt arkiv og ødelegge kontoene mine. 

I introduksjon til MailTrap: En falsk SMTP-server for pre-produksjonstesting av applikasjons-e-post, begynte jeg å integrere MailTraps tilpassede SMTP-innstillinger i min Yii SwiftMailer-konfigurasjon for testformål. Dette sikrer at vi mottar registreringsemailene når vi registrerer oss på vår lokale utviklingsplattform.

Vi plasserer både Twitter Application nøklene og MailTrap SMTP nøklene inn i /var/secure/hello.ini utenfor lageret:

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

Her er koden i \ Config \ web.php som inkluderer disse innstillingene og angir de enkelte konfigurasjonsvariablene:

 'basic', 'basePath' => dirname (__ DIR__), 'bootstrap' => ['logg'], 'språk' => 'no', // tilbake til engelsk 'components' => ['authClientCollection' => ['class' => 'yii \ authclient \ Collection', 'klienter' => ['google' => ['class' => 'yii \ authclient \ klienter \ GoogleOpenId'], 'twitter' => ['klasse '=>' yii \ authclient \ klienter \ Twitter ',' consumerKey '=> $ config [' oauth_twitter_key '],' consumerSecret '=> $ config [' oauth_twitter_secret '],],],], 

Ytterligere nedenfor, her er hvordan vi konfigurerer SMTP-innstillingene for SwiftMailer:

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

Oppdaterer databaseskjemaet for å lagre sesjonstaster

Fordi vi bruker Yii2-bruker, er det allerede gitt et Token-tabell for lagring av AuthClient-nøklene.

bruk yii \ db \ Schema; bruk dektrium \ user \ migrations \ Migration; / ** * @author Dmitry Erofeev  * / klasse m140504_130429_create_token_table utvider Migrasjon offentlig funksjon opp () $ this-> createTable ('token', ['user_id' => Skjema :: TYPE_INTEGER. 'IKKE NULL', 'kode' => Skjema :: TYPE_STRING. '(32) IKKE NULL', 'created_at' => Skjema :: TYPE_INTEGER. 'IKKE NULL', 'type' => Skjema :: TYPE_SMALLINT. 'NOT NULL'], $ this-> tableOptions); $ this-> createIndex ('token_unique', 'token', ['user_id', 'kode', 'type'], sant); $ this-> addForeignKey ('fk_user_token', 'token', 'user_id', '% user', 'id', 'CASCADE', 'RESTRICT');  offentlig funksjon ned () $ this-> dropTable ('token'); 

Vi undersøker innholdet i denne tabellen på slutten av denne opplæringen, etter at vi har registrert via Twitter.

Legg til AuthClient Widget til brukergrensesnittet

Innloggingssiden for Yii2-brukeren viser sin Koble-widget for AuthClient-tjenester på påloggingssiden. Legg merke til Google og Twitter-ikonene nederst på siden:

Av en eller annen grunn er de ikke inkludert på registreringsmeldingssiden. Dette virker som et tilsyn for meg.

For å kunne endre registreringssiden må vi overstyre registreringsvisningen. Heldigvis gjør Yii og Yii2-brukeren dette enkelt, se også Overordnede visninger i Yii2-Bruker.

Tilbake til \ Config \ web.php, vi legger til visningskomponenten nedenfor:

 'basic', 'basePath' => dirname (__ DIR__), 'bootstrap' => ['logg'], 'language' => 'no', // tilbake til engelsk 'components' => ['view' => ['tema' => ['pathMap' => ['@ dektrium / bruker / visninger' => '@ app / visninger / bruker'],], 'authClientCollection' =>

Deretter plasserer vi vår egen endrede versjon av Yii2-brukerens register.php i @ App / visninger / bruker / registrering / register.php. Når registreringssiden blir bedt om, laster Yii vår versjon, som inkluderer Connect-widgeten:

 * * For full opphavsrett og lisensinformasjon, vennligst se filen LICENSE.md * som ble distribuert med denne kildekoden. * / bruk yii \ helpers \ Html; bruk yii \ widgets \ ActiveForm; bruk dektrium \ user \ widgets \ Connect; / ** * @var yii \ web \ Se $ dette * @var yii \ widgets \ ActiveForm $ form * @var dektrium \ user \ models \ Bruker $ bruker * / $ this-> title = Yii :: t ('bruker ', 'Melde deg på'); $ this-> params ['breadcrumbs'] [] = $ this-> tittelen; ?> 

tittel)?>

'registreringsskjema', ]); ?> ['/ bruker / sikkerhet / auth']])?> felt ($ modell, 'brukernavn')?> felt ($ modell, 'e-post')?> getModule ('user') -> enableGeneratingPassword == false):?> felt ($ modell, 'passord') -> passordInput ()?> 'btn btn-suksess btn-blokk'])?>

Her er vår registreringsside nå:

Brukeropplevelse av forbindelse via tjenester

Slik ser påmeldingsprosessen ut. Når du klikker på Twitter-ikonet ovenfor, vil det be deg om å logge på Twitter-kontoen din:

Deretter vil det be deg om å godkjenne søknaden med kontoen din:

Så tar det deg til Koble registreringsskjema i vår søknad - denne siden er også levert av Yii2-Bruker:

Når du klikker Bli ferdig, den legger inn OAuth-token i Token-tabellen og omdirigerer deg til hjemmesiden fullt autentisert med vår søknad:

Her er en titt inne i Token-tabellen, som lagrer serviceøktastene for hver bruker:

Ved påfølgende påloggingsforsøk vil Twitter omdirigere deg uten å kreve ytterligere autorisasjon.

Slik integrerer vi tredjeparts tjenester i Yii2 grunnleggende applikasjonsmalen med Yii2-User. Jeg håper du er fornøyd med hvor greit dette er.

Du vil kanskje sjekke ut Bygg din oppstart med PHP-serien, som bruker Yii2s avanserte mal med tredjepartsintegrasjon (bortsett fra Yii2-bruker).

Hva blir det neste?

Se etter kommende opplæringsprogrammer i min programmering med Yii2-serien når jeg fortsetter å dykke inn i ulike aspekter av rammen. 

Jeg aksepterer funksjon og emneforespørsler. Du kan legge inn dem i kommentarene under eller sende meg en e-post på Lookahead Consulting.

Hvis du vil vite når neste Yii2 opplæring kommer, følg meg @ reifman på Twitter eller sjekk min instruktørside. Min instruktørside vil inkludere alle artiklene fra denne serien så snart de er publisert. 

  • Guide til AuthClient Extension for Yii 2
  • Yii2 OAuth2 Biblioteksdokumentasjon
  • Yii2 Developer Exchange, min Yii2 ressurs side
  • En samling av Yii-baserte skript på CodeCanyon