Cum se programează cu Yii2 Integrarea cu AuthClient cu Twitter și Google

Dacă vă întrebați: "Ce este Yii?" verificați tutorialul meu anterior: Introducere în Cadrul Yii, care analizează beneficiile Yii și include o prezentare generală a ceea ce este nou în Yii 2.0, lansat în octombrie 2014.

În această serie de programare cu seria Yii2, îndrumăm cititorii în folosirea noii tehnologii Yii2 Framework for PHP. În acest tutorial vă voi îndruma prin integrarea suportului AuthClient încorporat pentru a vă conecta de la rețele terțe precum Twitter, Google și Facebook.

Pentru aceste exemple, vom continua să ne imaginăm că construim un cadru pentru afișarea actualizărilor de stare simple, de ex. propriul nostru mini-Twitter, folosind codul nostru hello. Utilizați legăturile GitHub din această pagină pentru a descărca depozitul de coduri.

În programarea cu Yii2: Integrarea înregistrării utilizatorilor, am parcurs integrarea bibliotecii Yii2-User pentru înregistrarea și autentificarea utilizatorilor. În acest tutorial, vom învăța cum să integrăm AuthClient cu Yii2-User și să-i ignorăm vederile.

Doar un memento, eu particip la discuțiile de mai jos. Dacă aveți o sugestie de întrebare sau subiect, vă rugăm să postați un comentariu de mai jos. Puteți să mă contactați și pe Twitter @reifman sau trimiteți-mi un e-mail la Lookahead Consulting.

Ce este AuthClient?

AuthClient este suportul încorporat de către Yii pentru ca aplicațiile dvs. să se autentifice prin intermediul unor servicii terțe cu OpenID, OAuth sau OAuth2. 

De exemplu, AuthClient oferă suport pentru vizitatorii noi care se înregistrează și se conectează la aplicația dvs. folosind contul lor Twitter, în loc să furnizeze o parolă.

Din cutie, se oferă suport pentru următorii clienți:

• Facebook
• GitHub
• Google (prin intermediul OpenID și OAuth)
• LinkedIn
• Microsoft Live
• Stare de nervozitate
• De asemenea, serviciile populare rusești VKontakte și Yandex (prin intermediul OpenID și OAuth)

Configurația pentru fiecare client este puțin diferită. Pentru OAuth este necesar să obțineți codul clientului și cheia secretă din serviciul pe care îl veți utiliza. Pentru OpenID funcționează din cutie în majoritatea cazurilor.

Pentru acest tutorial, vă voi ajuta să adăugați Twitter și autentificarea Google.

Instalarea AuthClient în aplicația noastră

Adăugați AuthClient la Compozitor

Mai întâi, trebuie să adăugăm biblioteca AuthClient la composer.json:

"minimum-stabilitate": "stabil", "solicita": "php": "> = 5.4.0" "yiisoft / yii2" yiisoft / yii2-swiftmailer ":" * "," dektrium / yii2-user ":" 2.0.2 "," stichoza / google-translate-php " .0 "," yiisoft / yii2-authclient ":" * ",

Apoi, trebuie să actualizăm compozitorul:

sudo compozitor update Parola: Încărcarea depoziturilor compozitorului cu informații despre pachete Actualizarea dependențelor (inclusiv necesitatea dev) - Înlăturarea bower-asset / jquery.inputmask (3.1.58) - Instalarea bower-asset / jquery.inputmask (3.1.61) Scrierea fișierului de blocare Generarea fișierelor autoload 

Configurarea suportului AuthClient

Trebuie să adăugăm setările de configurare AuthClient la fișierul nostru de configurare web din \ Config \ web.php.

Adăugați elemente de matrice pentru toate serviciile terță parte pe care doriți să le acceptați (detalii despre fiecare pot fi găsite în Ghidul AuthClient). Pentru moment, vom folosi cheile de substituire pentru Twitter.

 'basic', 'basePath' => dirname (__ DIR__), 'bootstrap' => ['log'], 'language' => 'en', // back to English ' ['class' => 'yii \ authclient \ clients \ GoogleOpenId'], 'twitter' => ['clasa' '=>' yii \ authclient \ clienți \ Twitter ',' consumerKey '=>' twitter_consumer_key ',' consumerSecret '=>' twitter_consumer_secret ',],

Google va lucra din cutie fără configurație suplimentară, dar pentru Twitter, trebuie să înregistrăm o aplicație.

Înregistrați-ne aplicația Twitter

Creați o nouă aplicație Twitter pe tabloul de bord al aplicației Twitter:

Clic Creați aplicația nouă. Am constatat că URL-ul de apel invers a fost inutil, dar deocamdată am folosit substituentul http://mydomain.com/user/security/auth.

Iată noua pagină a aplicației noastre:

Iată-l Setări pagină:

Iată-l Cheile și accesoriile pagină. Aici, trebuie să copiem Cheia pentru clienți (cheia API) și Secretul consumatorilor (Secretul API):

Vom folosi aceste chei într-o clipă.

Protejarea cheilor de la GitHub

În Protejarea cheilor de la GitHub, am descris în detaliu modul în care folosesc un fișier de configurare pentru a stoca toate cheile mele în afară de depozitul meu GitHub. Apoi, includ acest fișier la începutul fișierelor de configurare Yii. Acest lucru mă împiedică să verific în mod accidental cheile mele în depozitul meu și să-mi compromită conturile. 

De asemenea, în Introducere în MailTrap: Un server SMTP fals pentru testarea pre-producției aplicației de e-mail, am început să integrez setările SMTP personalizate ale MailTrap în configurația Yii SwiftMailer pentru scopuri de testare. Acest lucru ne va asigura că primim e-mailurile de înregistrare atunci când ne înscriem pe platforma noastră de dezvoltare locală.

Am plasat atât cheile aplicației Twitter, cât și cheile SMTP MailTrap /var/secure/hello.ini în afara depozitului:

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

Iată codul din \ Config \ web.php care include aceste setări și stabilește variabilele individuale de configurare:

 'basic', 'basePath' => dirname (__ DIR__), 'bootstrap' => ['log'], 'language' => 'en', // back to English ' ['class' => 'yii \ authclient \ clients \ GoogleOpenId'], 'twitter' => ['clasa' 'config [' oauth_twitter_key '],' consumerSecret '=> $ config [' oauth_twitter_secret ']],],], 

Mai jos, iată cum configurem setările SMTP pentru SwiftMailer:

'mailer' => ['class' => 'yii \ swiftmailer \ Mailer', 'viewPath' => '@ app / mailer' "Config ['smtp_host'], 'port' => '25', 'config' , "criptare" => "tls",],],

Actualizarea schemei de baze de date pentru a stoca cheile de sesiune

Pentru că folosim Yii2-User, este deja furnizat un tabel Token pentru stocarea cheilor AuthClient.

utilizați yii \ db \ Schema; utilizați dectrium \ user \ migrations \ Migrarea; / ** * @ autorul Dmitri Erofeev  * / class m140504_130429_create_token_table extinde Migrarea public function up () $ this-> createTable ('% token', ['user_id' => Schema :: TYPE_INTEGER. :: TYPE_STRING. '(32) NOT NULL', 'created_at' => Schema :: TYPE_INTEGER. 'NOT NULL', 'type' => Schema :: TYPE_SMALLINT. $ this-> createIndex ('token_unique', 'token', ['user_id', 'code', 'type'], true); $ this-> addForeignKey ('fk_user_token', '% token', 'user_id', 'user%', 'id', 'CASCADE', 'RESTRICT');  funcția publică jos () $ this-> dropTable ('% token'); 

Vom examina conținutul acestui tabel la sfârșitul acestui tutorial, după ce ne-am înregistrat prin Twitter.

Adăugați widgetul AuthClient la interfața de utilizator

Pagina de conectare Yii2-User afișează widget-ul Conectare pentru serviciile AuthClient pe pagina de sign-in - remarcați pictogramele Google și Twitter din partea de jos a paginii:

Din anumite motive, acestea nu sunt incluse pe pagina de înregistrare a înregistrării. Acest lucru pare a fi o supraveghere pentru mine.

Pentru a modifica pagina de înscriere, trebuie să ignorăm vizualizarea înregistrării. Din fericire, utilizatorii Yii și Yii2 fac acest lucru ușor - vedeți, de asemenea, vizionări suprasolicitate în Yii2-User.

Revenind la \ Config \ web.php, adăugăm componenta de vizualizare de mai jos:

 'basic', 'basePath' => dirname (__ DIR__), 'bootstrap' => ['log'], 'language' => 'en' ['tema' => ['pathMap' => ['@ dektrium / user / views' => 'app'

Apoi, plasăm propria noastră versiune modificată a înregistrării Yii2-User's register.php @ App / opinii / utilizator / inregistrare / register.php. Când se solicită pagina de înregistrare, Yii va încărca versiunea noastră, care include widgetul Conectare:

 * * Pentru informații complete privind drepturile de autor și licență, vă rugăm să vizualizați fișierul LICENSE.md * care a fost distribuit cu acest cod sursă. * / folosiți yii \ helpers \ Html; utilizați yii \ widget-uri \ ActiveForm; utilizați dektrium \ user \ widgets \ Connect; / ** * @var yii \ web \ Vizualizați $ this * @var yii \ widgets \ ActiveForm $ form * @var dektrium \ user \ models \ Utilizator $ user * / $ this-> title = Yii :: t ', 'Inscrie-te'); $ this-> params ['breadcrumbs'] [] = $ acest-> titlu; ?> 
 
 
 
 
titlu)?>
 
 
  'formular de înregistrare', ]); ?>  ['/ user / security / auth']])?> câmp ($ model, 'username')?> câmp ($ model, "e-mail")?> getModule ('utilizator') -> enableGeneratingPassword == false):?> câmp ($ model, 'parola') -> parolaInput ()?>   'btn btn-succes btn-bloc'])?>  
 
 
  
 
 
 

Iată pagina noastră de înscriere acum:

Experiența utilizatorilor de conectare prin intermediul serviciilor

Iată cum arată procesul de înscriere. Când faceți clic pe pictograma Twitter de mai sus, vă va cere să vă conectați la contul dvs. de Twitter:

Apoi vă va cere să autorizați aplicația împreună cu contul dvs.:

Apoi vă va duce la Conectați formular de înregistrare în aplicația noastră - această pagină este de asemenea furnizată de Yii2-User:

Când faceți clic pe finalizarea, acesta inserează tokenul dvs. OAuth în tabelul Token și vă redirecționează către pagina de pornire complet autentificată cu aplicația noastră:

Iată o privire în interiorul tabelului Token, care stochează tastele sesiunii de serviciu pentru fiecare utilizator:

În încercările ulterioare de conectare, Twitter vă va redirecționa fără a necesita o autorizare suplimentară.

Așa integrăm serviciile terților în șablonul de aplicație de bază Yii2 cu Yii2-Utilizator. Sper că sunteți mulțumit de cât de simplu este acest lucru.

Poate doriți să verificați seria noastră Building Your Startup With PHP, care va folosi șablonul avansat al Yii2 cu integrarea terților (cu excepția Yii2-User).

Ce urmeaza?

Urmăriți tutorialele viitoare din programul meu de programare cu seria Yii2, deoarece continuam să scufundăm în diferite aspecte ale cadrului. 

Salut cererile de teme și teme. Puteți să le postați în comentariile de mai jos sau puteți să ne trimiteți un e-mail pe site-ul meu Lookahead Consulting.

Dacă doriți să știți când vine următorul tutorial Yii2, urmați-mă @reifman pe Twitter sau verificați pagina de instructor. Pagina mea de instructor va include toate articolele din această serie de îndată ce vor fi publicate. 

• Ghid pentru Extensia AuthClient pentru Yii 2
  
• Yii2 Documentație bibliotecă OAuth2
• Yii2 Developer Exchange, site-ul meu de resurse Yii2
• O colecție de scripturi bazate pe Yii pe CodeCanyon