Come programmare con Yii2 integrazione AuthClient con Twitter e Google

Se stai chiedendo "Cos'è Yii?" guarda il mio tutorial precedente: Introduzione al framework Yii, che rivede i vantaggi di Yii e include una panoramica delle novità in Yii 2.0, rilasciata nell'ottobre 2014.

In questa serie di programmazione con Yii2, guido i lettori all'uso del nuovo Yii2 Framework per PHP. In questo tutorial, ti guiderò attraverso l'integrazione del supporto AuthClient integrato per fornire l'accesso da reti di terze parti come Twitter, Google e Facebook.

Per questi esempi, continueremo a immaginare che stiamo costruendo un framework per la pubblicazione di semplici aggiornamenti di stato, ad es. il nostro mini-Twitter, usando il nostro codice base Hello. Utilizzare i link GitHub in questa pagina per scaricare il repository del codice.

In Programming With Yii2: Integrazione della registrazione degli utenti, ho seguito l'integrazione della libreria Yii2-User per la registrazione e l'autenticazione degli utenti. In questo tutorial, impareremo come integrare AuthClient con Yii2-User e sovrascrivere le sue viste.

Solo un promemoria, parteciperò alle discussioni di seguito. Se hai una domanda o un suggerimento sull'argomento, per favore pubblica un commento qui sotto. Puoi anche raggiungermi su Twitter @reifman o mandarmi una email a Lookahead Consulting.

Che cos'è AuthClient?

AuthClient è il supporto integrato di Yii per le tue applicazioni per l'autenticazione tramite servizi di terze parti con OpenID, OAuth o OAuth2. 

Ad esempio, AuthClient fornisce supporto ai nuovi visitatori per registrarsi e accedere alla tua applicazione utilizzando il loro account Twitter invece di dover fornire una password.

Viene fornito il supporto per i seguenti client:

• Facebook
• GitHub
• Google (tramite OpenID e OAuth)
• LinkedIn
• Microsoft Live
• cinguettio
• Anche i servizi russi più popolari VKontakte e Yandex (tramite OpenID e OAuth)

La configurazione per ciascun client è leggermente diversa. Per OAuth è necessario ottenere l'ID cliente e la chiave segreta dal servizio che si intende utilizzare. Per OpenID funziona già nella maggior parte dei casi.

Per questo tutorial, ti guiderò attraverso l'aggiunta dell'autenticazione di Twitter e Google.

Installare AuthClient nella nostra applicazione

Aggiungi AuthClient a Composer

Innanzitutto, dobbiamo aggiungere la libreria AuthClient a 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 ":" * ",

Quindi, dobbiamo aggiornare il compositore:

aggiornamento su compositore sudo Password: caricamento dei repository di compositore con informazioni sul pacchetto Aggiornamento delle dipendenze (incluso require-dev) - Rimozione di bower-asset / jquery.inputmask (3.1.58) - Installazione di bower-asset / jquery.inputmask (3.1.61) Caricamento dalla cache Scrittura del file di blocco Generazione di file di caricamento automatico 

Configurazione del supporto AuthClient

Abbiamo bisogno di aggiungere le impostazioni di configurazione AuthClient al nostro file di configurazione web in \ Config \ web.php.

Aggiungi elementi di array per tutti i servizi di terze parti che desideri supportare (i dettagli sono disponibili nella Guida di AuthClient). Per ora, utilizzeremo le chiavi segnaposto per Twitter.

 'basic', 'basePath' => dirname (__ DIR__), 'bootstrap' => ['log'], 'language' => 'en', // back to English 'components' => ['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 funzionerà senza configurazione aggiuntiva, ma per Twitter è necessario registrare un'applicazione.

Registra la nostra applicazione Twitter

Crea una nuova applicazione Twitter sul dashboard dell'applicazione Twitter:

Clic Crea una nuova app. Ho scoperto che l'URL di richiamata non era necessario, ma per ora ho usato il segnaposto http://mydomain.com/user/security/auth.

Ecco la nuova pagina per la nostra applicazione:

Ecco il impostazioni pagina:

Ecco il Chiavi e token di accesso pagina. Qui, abbiamo bisogno di copiare il Chiave utente (chiave API) e Segreto del consumatore (segreto dell'API):

Faremo uso di quelle chiavi in ​​un momento.

Proteggere le chiavi da GitHub

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. 

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.

Inseriamo sia le chiavi dell'applicazione Twitter sia le chiavi SMTP MailTrap /var/secure/hello.ini al di fuori del repository:

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

Ecco il codice in \ Config \ web.php che include queste impostazioni e imposta le singole variabili di configurazione:

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

Più sotto, ecco come configuriamo le impostazioni SMTP per SwiftMailer:

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

Aggiornamento dello schema del database per memorizzare le chiavi di sessione

Poiché utilizziamo Yii2-User, è già disponibile una tabella Token per la memorizzazione delle chiavi AuthClient.

usa yii \ db \ Schema; utilizzare dektrium \ user \ migrations \ Migration; / ** * @author Dmitry Erofeev  * / class m140504_130429_create_token_table estende Migration 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'); 

Esamineremo il contenuto di questa tabella alla fine di questo tutorial, dopo che ci siamo registrati tramite Twitter.

Aggiungi il widget AuthClient all'interfaccia utente

Nella pagina di accesso di Yii2-User viene visualizzato il relativo widget Connetti per i servizi AuthClient nella pagina di accesso, facendo attenzione alle icone di Google e Twitter nella parte inferiore della pagina:

Per qualche motivo, tuttavia, non sono inclusi nella pagina di registrazione. Questo mi sembra una svista.

Per modificare la pagina di registrazione, è necessario sostituire la vista di registrazione. Fortunatamente, Yii e Yii2-user rendono questo facile vedere anche le Override Views in Yii2-User.

Ritornando a \ Config \ web.php, aggiungiamo il componente vista qui sotto:

 'basic', 'basePath' => dirname (__ DIR__), 'bootstrap' => ['log'], 'language' => 'en', // back to English 'components' => ['view' => ['theme' => ['pathMap' => ['@ dektrium / user / views' => '@ app / views / user'],],], 'authClientCollection' => [

Quindi inseriamo la nostra versione modificata di Yii2-User's register.php in @ App / views / user / registrazione / register.php. Quando viene richiesta la pagina di registrazione, Yii caricherà la nostra versione, che include il widget Connect:

 * * Per informazioni complete sul copyright e sulla licenza, vedere il file LICENSE.md * che è stato distribuito con questo codice sorgente. * / usa yii \ helpers \ Html; usa yii \ widgets \ ActiveForm; usa dektrium \ user \ widgets \ Connect; / ** * @var yii \ web \ Visualizza $ this * @var yii \ widgets \ ActiveForm $ modulo * @var dektrium \ user \ models \ Utente $ utente * / $ this-> title = Yii :: t ('utente ', 'Iscriviti'); $ this-> params ['breadcrumbs'] [] = $ this-> title; ?> 
 
 
 
 
titolo)?>
 
 
  'formulario di registrazione', ]); ?>  ['/ user / security / auth']])?> campo ($ model, 'username')?> campo ($ model, 'email')?> getModule ('utente') -> enableGeneratingPassword == false):?> campo ($ model, 'password') -> passwordInput ()?>   'btn btn-successo btn-block'])?>  
 
 
  
 
 
 

Ecco la nostra pagina di registrazione ora:

Esperienza utente di connessione tramite servizi

Ecco come si presenta il processo di iscrizione. Quando fai clic sull'icona di Twitter sopra, ti verrà chiesto di accedere al tuo account Twitter:

Quindi ti chiederà di autorizzare l'applicazione con il tuo account:

Poi ti porterà al Collegare modulo di registrazione nella nostra applicazione - questa pagina è fornita anche da Yii2-User:

Quando si fa clic finire, inserisce il token OAuth nella tabella Token e reindirizza alla home page completamente autenticata con la nostra applicazione:

Ecco una panoramica della tabella Token, che memorizza le chiavi della sessione di servizio per ciascun utente:

Nei successivi tentativi di accesso, Twitter ti reindirizzerà senza richiedere ulteriori autorizzazioni.

Ecco come integriamo i servizi di terze parti nel modello di applicazione di base Yii2 con Yii2-User. Spero che tu sia contento di quanto sia semplice questo.

Si consiglia di controllare la nostra creazione della serie Startup With PHP, che utilizzerà il modello avanzato di Yii2 con l'integrazione di terze parti (a parte Yii2-User).

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. 

• Guida a AuthClient Extension per Yii 2
  
• Yii2 Documentazione OAuth2 Library
• Yii2 Developer Exchange, il mio sito di risorse Yii2
• Una raccolta di script basati su Yii su CodeCanyon