Come programmare con Yii2 Google Authentication

Cosa starai creando

Se stai chiedendo "Cos'è Yii?" check-out Introduzione al framework Yii, che rivede i vantaggi di Yii e include una panoramica di Yii 2.0.

In questa serie di programmazione con Yii2, guido i lettori all'uso di Yii2 Framework per PHP. In questo tutorial, continuerò a guidarti attraverso l'integrazione del AuthClient incorporato, utilizzando l'API di Google Account e OAuth 2.0. 

Potrebbe essere utile rivedere Programmazione con Yii2: Integrazione registrazione utente, che passa attraverso l'integrazione della libreria Yii2-User per la registrazione e l'autenticazione dell'utente e Programmazione con Yii2: Integrazione AuthClient con Twitter, Google e altre reti, che esplora l'integrazione con l'autenticazione di Twitter e il supporto ormai obsoleto per OpenID di Google. Questo tutorial ti mostrerà come passare dalla precedente integrazione di Google OpenID all'integrazione di OAuth 2.0 con l'API di Google Account.

Per questi esempi, continueremo a costruire sul framework per la serie, il nostro ciao codebase. Utilizzare i link GitHub in questa pagina per ottenere il download per il repository del codice.

Prima di iniziare, ricorda, cerco di partecipare alle discussioni di seguito. Se hai una domanda o un suggerimento sull'argomento, per favore pubblica un commento qui sotto o contattami su Twitter @reifman. Puoi anche scrivermi direttamente via email.

Se hai notato che c'è stato un ritardo in questa serie, è perché sono tornato di recente da un intervento chirurgico al cervello. Grazie per la vostra pazienza e supporto: è bello scrivere di nuovo regolarmente e non vedo l'ora di continuare la copertura di Yii2.

Aggiornamento utente Yii2

Dall'ultima volta che ho scritto su questi argomenti, l'utente di Yii2 è migliorato moltissimo. La prima cosa che dobbiamo fare è aggiornare la sua libreria. Puoi farlo con il compositore alla riga di comando:

il compositore richiede "dektrium / yii2-user: 0.9. * @ dev" 

Questo aggiornerà automaticamente compositore.json:

"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": "*",,

Successivamente, esegui le ultime migrazioni del database per l'utente Yii2: questo aggiornerà il tuo database con l'ultima libreria:

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

Probabilmente vedrai qualcosa di simile a questo:

$ php yii migrate / up --migrationPath = @ vendor / dektrium / yii2-user / migrations Yii Migration Tool (basato su Yii v2.0.6) Totale 4 nuove migrazioni da applicare: m141222_110026_update_ip_field m141222_135246_alter_username_length m150614_103145_update_social_account_table m150623_212711_fix_username_notnull Applicare le migrazioni di cui sopra? (sì | no) [no]: sì *** applicando m141222_110026_update_ip_field> modifica colonna registration_ip nella tabella % user a stringa (45) ... done (time: 0.009s) *** applicato m141222_110026_update_ip_field (time: 0.030s ) *** applicando m141222_135246_alter_username_length> modifica il nome utente della colonna nella tabella % user a string (255) ... done (time: 0.010s) *** applicato m141222_135246_alter_username_length (time: 0.012s) *** applicando m150614_103145_update_social_account_table> aggiungi colonna stringa di codice (32) alla tabella % social_account ... done (time: 0.008s)> aggiungi la colonna created_at integer alla tabella % social_account ... done (time: 0.009s)> aggiungi la colonna email stringa alla tabella  % social_account ... done (time: 0.008s)> aggiungi il nome utente della colonna stringa alla tabella % social_account ... done (time: 0.009s)> crea un indice univoco account_unique_code su % social_account (codice) ... done (time: 0.016s) *** applicato m150614_103145_update_social_account_table (time: 0.059s) *** applicando m150623_212711_fix_username_notnull> al nome utente colonna nella tabella % utente a stringa (255) NOT NULL ... done (time: 0.009s) *** applicato m150623_212711_fix_username_notnull (time: 0.011s) Migrato con successo.

Devi anche spostare la definizione del componente per yii2-user in moduli in \ hello \ config \ web.php:

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

Registra il tuo progetto Google

Per consentire agli utenti dell'app Yii2 di registrarsi e accedere con i propri account Google, è necessario registrare un progetto Google nella Console per gli sviluppatori:

Diamo Crea un progetto chiamato yii2hello:

Verrai indirizzato alla home page del progetto con una varietà di opzioni nel menu della barra laterale sinistra:

È importante richiedere l'accesso a qualsiasi gruppo di API con Google che stiamo utilizzando. Per l'utente Yii2, dobbiamo abilitare le API di Google+. Clicca su API e auth> API e cercare Google+:

Quindi, fare clic Abilita API:

Vedrai un elenco di API abilitate che ora include il API di Google+:

Successivamente, dobbiamo aggiungere credenziali in modo da poter autenticare le nostre richieste API con Google per le attività di questo progetto. Clic Credenziali:

Usiamo il ID client OAuth 2.0 opzione sopra. Ti verrà quindi chiesto di creare un Schermata di consenso OAuth e inserisci informazioni sulla tua domanda che verrà presentata agli utenti che tentano di registrarsi o accedere con la tua domanda:

Sul Credenziali pagina, sceglieremo applicazione web, e dal momento che stiamo testando localmente, forniremo due impostazioni per i callback di autenticazione. Io uso la porta 8888 per il mio sviluppo locale. Così il mio Origini JavaScript autorizzate sarà http: // localhost: 8888 e Yii2 User richiede il URI di reindirizzamento autorizzati percorso di http: // localhost: 8888 / ciao / utente / sicurezza / auth? authclient = google.

Ti verranno presentate le chiavi API, note anche come Identificativo cliente segreto del cliente:

Esaminerò dove posizionare le chiavi qui sotto.

Configurazione del supporto AuthClient

In Proteggi le tue chiavi da GitHub, ho descritto in dettaglio come utilizzo un file di configurazione per memorizzare tutte le mie chiavi oltre al mio repository GitHub. Quindi, includo questo file all'inizio dei miei file di configurazione Yii. Questo mi impedisce di controllare accidentalmente le mie chiavi nel mio repository e compromettere i miei account. 

Nel mio /var/secure/hello.ini file, memorizzo tutte le chiavi per la mia applicazione: inserisci qui anche le chiavi dell'API di Google:

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

Abbiamo bisogno di aggiungere riferimenti a queste chiavi nelle impostazioni di configurazione di AuthClient nel nostro file di configurazione web in \ Config \ web.php. Aggiungi elementi di array per tutti i servizi di terze parti che desideri supportare:

 'basic', 'basePath' => dirname (__ DIR__), 'bootstrap' => ['log'], 'language' => 'en', // back to English 'components' => ['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'],],],],

Inoltre, in Introduzione a MailTrap: un server SMTP falso per i test di pre-produzione delle e-mail delle applicazioni, ho iniziato a integrare le impostazioni SMTP personalizzate di MailTrap nella configurazione Yii SwiftMailer a scopo di test. Ciò garantirà che riceviamo le e-mail di registrazione quando ci iscriviamo alla nostra piattaforma di sviluppo locale.

Per questo tutorial, ho scoperto che dovevo aggiornare le informazioni sulla porta per SwiftMailer a 2525 pollici \ Config \ web.php:

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

Registrazione con il tuo account Google

Ora siamo finalmente pronti per esplorare utilizzando l'interfaccia front-end di Yii2 User. Iniziamo con la registrazione. Clicca sul Iscriviti opzione nel menu e vedrai questo modulo:

Per registrarti con tutto ciò che abbiamo creato oggi, fai clic sull'icona Google+. Poiché sono connesso solo a un account Google, ci sarà un popup e un reindirizzamento trasparenti per completare la mia registrazione:

Dovresti vedere la home page che mostra che sei autenticato nell'angolo in alto a destra:

Accesso con il tuo account Google

Clic Disconnettersi e quindi possiamo provare ad accedere con l'icona di Google+. Clic Registrati nel menu dell'intestazione:

Quindi, fare clic su Icona di Google+ ancora. Sarai portato direttamente alla schermata principale per mostrare che hai effettuato l'accesso di nuovo. Molto carino, eh? Ma cosa succede se hai effettuato l'accesso a due account Google?

Quando selezioni il tuo account Google con cui accedere, verrai reindirizzato alla pagina iniziale in modalità autenticata.

Il profilo utente e l'area di connessione

Anche se non è ancora configurato nel nostro menu di intestazione Bootstrap, se visiti  http: // localhost: 8888 / hello / utente / Impostazioni / reti, vedrai la nuova interfaccia di connessione per account di terzi all'interno di Yii2 User:

Una volta effettuato l'accesso, gli utenti possono connettersi e disconnettere i loro account social da qui. C'è anche una gestione degli account e un'area del profilo utente. È abbastanza ben fatto. 

Si consiglia di controllare il mio Building Your Startup with PHP series, che utilizza il modello avanzato di Yii2 con l'integrazione di terze parti, attualmente senza Yii2 User. Tuttavia, ora c'è una guida per integrare l'utente di Yii2 con il modello avanzato, quindi potrei aggiornarlo presto.

Qual'è il prossimo?

Guarda le prossime esercitazioni nella mia serie Programming with Yii2 mentre continuo a immergermi nei diversi aspetti del framework. 

Accolgo richieste di argomenti e argomenti. Puoi postarli nei commenti qui sotto o mandarmi una e-mail sul mio sito Web di Lookahead Consulting.

Se vuoi sapere quando arriverà il prossimo tutorial di Yii2, seguimi @reifman su Twitter o controlla la mia pagina di istruttore. La mia pagina di istruttore includerà tutti gli articoli di questa serie non appena saranno pubblicati. 

  • Programmazione con Yii2: integrazione registrazione utente (Tuts +)
  • Programmazione con Yii2: integrazione AuthClient con Twitter, Google e altre reti (Tuts +)
  • Guida a AuthClient Extension per Yii 2
  • Yii2 Documentazione OAuth2 Library
  • Yii2 Developer Exchange, il mio sito di risorse Yii2