Meniul
AcasăWindows 10

Cum se creează o foaie de înscriere în html. Creați un formular de înregistrare cu un singur clic


Buna, draga prietena! În acest tutorial, vom învăța cum să creăm două formulare HTML5: un formular de conectare și un formular de înregistrare. Aceste forme vor fi schimbate între ele folosind pseudoclasa CSS3 :target. Vom folosi CSS3 și un font icon. Ideea acestui demo este de a arăta utilizatorului un formular de autentificare și de a le oferi un link „mergi la” către formularul de înregistrare.
În acest tutorial voi vorbi în detaliu despre cum să creați un efect ca în Demo 1. Autentificare HTML

E-mailul sau numele dvs. de utilizator

Parola Dvs

Ţine-mă logat.

nu esti inca membru? Alăturaţi-ne

Inscrie-te

Nume de utilizator

Email-ul tau

Parola Dvs

Vă rugăm să vă confirmați parola

Deja un membru? Du-te și conectează-te


Aici am folosit mai multe trucuri HTML5. De exemplu, element tip=parolă ascunde automat ceea ce introduce utilizatorul și înlocuiește caracterele cu puncte sau asteriscuri (în funcție de browser). Element tip=e-mail permite browserului să verifice dacă formatul este corect adrese de email. În plus, am folosit parametrul cere=necesar; browsere care acceptă acest parametru nu va permite utilizatorului să trimită formularul până când câmpul nu este completat, nu este necesar JavaScript aici. Parametru autocompletare=pornit va completa automat unele câmpuri. De asemenea, am folosit text alternativ pentru a ghida utilizatorul atunci când completează formularul.

Acum vreo două puncte complicate. Probabil ați observat două link-uri la începutul formularului. Acest truc îngrijit va permite formei noastre să se comporte corect atunci când lucrăm cu ancore.

Al doilea punct este legat de utilizarea unui font cu pictograme. Vom folosi data-attribute pentru a afișa pictogramele. Setarea parametrului data-icon="icon_character" Cu caracterele adecvate în HTML, trebuie să atribuim doar o singură regulă în CSS pentru a stila toate pictogramele. Puteți citi mai multe despre această tehnică pe site-ul web: 24 Ways: Displaying Icons with Fonts and Data-Attributes.

CSS Pentru puritatea codului, voi sări peste parametrii de bază(html, body etc.), dar le puteți găsi în fișiere sursă. Din nou, folosesc tehnici CSS3 care nu vor funcționa în toate browserele. Deci, să începem!Stilizarea formularelor folosind CSS3 Mai întâi, să dăm formularelor noastre un stil de bază.

#subscribe, #login( poziție: absolut; sus: 0px; lățime: 88%; umplutură: 18px 6% 60px 6%; margine: 0 0 35px 0; fundal: rgb(247, 247, 247); chenar: 1px solid rgba(147, 184, 189,0.8); box-shadow: 0pt 2px 5px rgba(105, 108, 109, 0.7), 0px 0px 8px 5px rgba(208, 223, 226, 0.5px-radius: 0.5px-radius) ; ) #login( z-index: 22; )

Aici vom atribui proprietăți pentru antet:

/**** text ****/ #wrapper h1( dimensiunea fontului: 48px; culoare: rgb(6, 106, 117); padding: 2px 0 10px 0; font-family: "FranchiseRegular","Arial Narrow ",Arial,sans-serif; font-weight: bold; text-align: center; padding-bottom: 30px; ) /** În prezent, numai webkit acceptă background-clip:text; **/ #wrapper h1( fundal: -webkit-repeating-linear-gradient(-45deg, rgb(18, 83, 93) , rgb(18, 83, 93) 20px, rgb(64, 111, 118) 20px, rgb(64, 111, 118) 40px, rgb(18, 83, 93) 40px); -webkit-text-fill-color: transparent; -webkit-background-clip: text; ) #wrapper h1:after( continut: " "; display:block; lățime:100%; înălțime:2px; margin-top:10px; fundal: liniar-gradient(stânga, rgba(147.184.189,0) 0%, rgba(147.184.189,0,8) 20%, rgba( 147.184.189,1) 53%, rgba(147.184.189,0,8) 79%, rgba(147.184.189,0) 100%);

Rețineți că astăzi doar browserele cu suport webkit clip de fundal: text, așa că vom crea un fundal cu dungi numai pentru webkit și îl vom lega de antetul H1. Din moment ce parametrul clip de fundal: text funcționează doar în browserele Webkit, am decis să lucrez doar cu proprietățile webkit-ului. De aceea am împărțit CSS-ul în două părți și am folosit doar gradientul webkit-ului. Cu toate acestea, nu ar trebui să utilizați doar webkit pe site-urile dvs. web! Deci, de exemplu, parametrul -webkit-text-fill-color: transparent ne permite să avem fundal transparent, dar numai pentru browserele webkit, toate celelalte browsere vor ignora această proprietate.

Am creat și noi linie subtire sub titlu folosind elementul: pseudo-after-class. Am folosit un gradient cu o înălțime de 2 px și am redus opacitatea la margini la zero.

Acum să avem grijă de câmpurile de intrare și să le facem să arate frumos.

/**** stil de intrare avansat ****/ /* substituent */ ::-webkit-input-placeholder ( culoare: rgb(190, 188, 188); stil font: italic; ) input:-moz- substituent, textarea:-moz-placeholder( culoare: rgb(190, 188, 188); stil font: cursiv; ) intrare (contur: niciunul; )

În primul rând, vom modela marginile și vom elimina conturul. Dar fii atent: conturul îl ajută pe utilizator să înțeleagă în ce câmp se află. Dacă îl eliminați, trebuie să aplicați proprietățile: activ și: focus.

/* toate câmpurile exclud trimiterea și caseta de selectare */ #wrapper input:not())( lățime: 92%; margin-top: 4px; padding: 10px 5px 10px 32px; chenar: 1px solid rgb(178, 178, 178); dimensiunea casetei: caseta de conținut; raza de margine: 3px; umbră de casetă: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; tranziție: toate 0.2s liniare; ) #wrapper input:not(): activ , #wrapper input:not():focus( chenar: 1px solid rgba(91, 90, 90, 0.7); fundal: rgba(238, 236, 240, 0.2); box-shadow: 0px 1px 4px 0px rgba( 168, 168, 168, 0,9) insert; )

Aici am folosit pseudo class:not pentru a stila toate câmpurile, cu excepția casetelor de selectare. În plus, am decis să elimin stroke și am adăugat proprietățile:focus și:active.

Acum este timpul să vă distrați: font cu pictograme. Deoarece nu putem folosi pseudo-clasele :before și :after, vom adăuga pictograma la parametrul etichetă și apoi o vom plasa în câmp. Voi folosi biblioteca fontomas. Puteți potrivi singur pictogramele cu litera corespunzătoare. Amintiți-vă atributul pictogramă de date? Aici trebuie să introduceți litera. obisnuiam pictogramă-date='u' pentru conectare, „e” pentru e-mail, „p” pentru parolă. Odată ce am selectat literele, am descărcat fontul și am folosit generatorul de fonturi fontsquirrel pentru a-l converti într-un format potrivit pentru @font-face.

@font-face (familie de fonturi: "FontomasCustomRegular"; src: url("fonts/fontomas-webfont.eot"); src: url("fonts/fontomas-webfont.eot?#iefix") format("embedded- tip deschis"), url("fonturi/fontomas-webfont.woff") format("woff"), url("fonturi/fontomas-webfont.ttf") format ("truetype"), url("fonturi/fontomas-webfont.ttf") .svg#FontomasCustomRegular") format("svg"); greutate font: normal; stil font: normal; ) /** truc magic! **/ :after ( conținut: attr(data-icon); font-family: "FontomasCustomRegular"; culoare: rgb(106, 159, 171); poziție: absolut; stânga: 10px; sus: 35px; lățime: 30px; )

Asta e tot. Nu trebuie să aveți o clasă separată pentru fiecare pictogramă. Am folosit parametrul conținut: attr(pictogramă de date) pentru a obține scrisoarea din atributul data-icon. Astfel, trebuie doar să atribuim un font, să selectăm o culoare și să plasăm o pictogramă.

Acum să atribuim reguli pentru butonul de trimitere a formularului.

/*stil ambele butoane*/ #wrapper p.button input( lățime: 30%; cursor: pointer; fundal: rgb(61, 157, 179); padding: 8px 5px; font-family: "BebasNeueRegular","Arial Narrow „,Arial,sans-serif; culoare: #fff; dimensiunea fontului: 24px; chenar: 1px rgb solid(28, 108, 122); margin-bottom: 10px; text-shadow: 0 1px 1px rgba(0, 0) , 0, 0,5); chenar-rază: 3px; casetă-umbră: 0px 1px 6px 4px rgba(0, 0, 0, 0,07) inset, 0px 0px 0px 3px rgb(254, 254, 254), 0px 5px pxrgb (210, 210, 210); tranziție: toate 0.2s liniare; ) #wrapper p.button input:hover( fundal: rgb(74, 179, 198); ) #wrapper p.button input:activ, #wrapper p. butonul de intrare:focus( fundal: rgb(40, 137, 154); poziție: relativ; sus: 1px; chenar: 1px rgb solid(12, 76, 87); umbră casetă: 0px 1px 6px 4px rgba(0, 0); , 0, 0,2) insert; ) p.login.button, p.signin.button( text-align: right; margin: 5px 0; )

Trucul este să folosești box-shadow pentru a crea mai multe cadre. Desigur, puteți folosi un singur cadru, dar puteți folosi și mai multe. Vom folosi parametrul de lungime pentru a crea un al doilea chenar alb „fals”, de 3px lățime, fără estompare.

Acum să stilăm caseta de selectare, nu vom face nimic neobișnuit aici:

/* Stilează caseta de selectare „Ține-mă minte”*/ .keeplogin( margin-top: -5px; ) .keeplogin input, .keeplogin label( display: inline-block; font-size: 12px; font-style: italic; ) . keeplogin input#loginkeeping( margin-right: 5px; ) .keeplogin label( lățime: 80%; )

Stilizarea subsolului formularului folosind multipli gradienti liniari pentru a crea un gradient cu dungi.

P.change_link( poziție: absolut; culoare: rgb(127, 124, 124); stânga: 0px; înălțime: 20px; lățime: 440px; padding: 17px 30px 20px 30px; font-size: 16px; text-align: right; chenar-sus: 1px rgb solid(219, 229, 232); chenar-rază: 0 0 5px 5px; fundal: rgb(225, 234, 235); fundal: repetare-linear-gradient(-45deg, rgb(247, 247, 247) , rgb(247, 247, 247) 15px, rgb(225, 234, 235) 15px, rgb(225, 234, 235) 30px, rgb(247, pxra) #247, 247) pxra) ; .change_link a ( afișare: bloc inline; greutate font: bold; fundal: rgb(247, 248, 241); umplutură: 2px 6px; culoare: rgb(29, 162, 193); margine-stânga: 10px; text -decor: niciunul; chenar-rază: 4px; chenar: 1px solid rgb(203, 213, 214); tranziție: toate 0.4s linear; ) #wrapper p.change_link a:hover (culoare: rgb(57, 191, 215) ); fundal: rgb(247, 247, 247); chenar: 1px rgb solid(74, 179, 198); ) #wrapper p.change_link a:active( poziție: relativ; sus: 1px; )

Acum puteți vedea că avem două forme frumoase, dar vrem să fie afișată doar una dintre ele. E timpul pentru animație!

Crearea animației Primul lucru pe care îl vom face este să ascundem a doua formă setând opacitatea la 0:

#register( indexul z: 21; opacitate: 0; )

Amintiți-vă că formularul de conectare are un z-index: 22? Pentru al doilea formular vom atribui acest parametru la 21 pentru a-l pune „sub” formularul de autentificare.

Acum partea distractivă: schimbăm formularele folosind pseudo class:target. Trebuie să înțelegeți un lucru despre :target: vom folosi ancore pentru ao muta. Comportamentul normal al unei ancore este să sară pe element specific pagini. Dar nu vrem asta, vrem doar să schimbăm formele. Acesta este locul în care trucul nostru de a folosi două link-uri din partea de sus a paginii vine în ajutor. În loc să ne direcționăm direct către a doua formă și să riscăm efectul de salt, vom da link-urilor un parametru display: niciunul. Acest lucru va ajuta la evitarea săriturii. Am descoperit acest truc pe site: CSS3 create (franceză).

#toregister:target ~ #wrapper #register, #tologin:target ~ #wrapper #login( z-index: 22; animation-name: fadeInLeft; animation-delay: .1s; )

Iată ce se întâmplă: când facem clic pe buton A te alatura, ne îndreptăm către #toreregistrare. Apoi are loc animația și abia apoi trecem la elementul #register. Folosim o animație numită fadeInLeft. Deoarece „ascundem” forma folosind transparență zero, vom aplica o animație care va apărea treptat. De asemenea, am schimbat indicele z, astfel încât să apară deasupra celeilalte forme. La fel se întâmplă și cu cealaltă formă.
Iată codul pentru animație. Am folosit cadrul de animație CSS3 de la Dan Eden și am adaptat acest cadru pentru tutorialul nostru.

Animație (durată de animație: 0,5 s; funcție de sincronizare de animație: ușurință; modul de umplere de animație: ambele; ) @keyframes fadeInLeft ( 0% ( opacitate: 0; transformare: translateX (-20px); ) 100% ( opacitate : 1; transforma: translateX(0); ) )

Forma care „dispare” va avea o animație de estompare la stânga:

#toregister:target ~ #wrapper #login, #tologin:target ~ #wrapper #register( animation-name: fadeOutLeftBig; ) @keyframes fadeOutLeft ( 0% ( opacitate: 1; transformare: translateX(0); ) 100% ( opacitate : 0; transformare: translateX(-20px); ) )

Acum puteți folosi celelalte animații ale lui Dan Eden folosind fișierul animate.css: doar schimbați clasa .animate și numele animației. Veți găsi și alte câteva animații la sfârșitul fișierului animate-custom.css.

Asta e tot, prieteni. Sper că v-a plăcut acest tutorial!

Rețineți că în unele browsere opțiunea clip de fundal: text nu sunt acceptate. ÎN Internet Explorer 9 animații nu funcționează. În Internet Explorer 8 și versiunile anterioare, pseudo-clasă: pseudo-clasa țintă nu este acceptată, așa că acest efect nu va funcționa deloc acolo.

P.S. Voi accepta cu plăcere orice comentarii referitoare la traducere într-un mesaj personal. Mulțumesc!

Etichete: Adăugați etichete

Aproape tot proiecte online constă din două părți - deschis, care este disponibil pentru toți utilizatorii, și închis, care poate fi accesat doar după înregistrarea pe site.

Evident, pentru ca utilizatorii resursei dvs. web să-și poată lăsa datele de înregistrare pentru a accesa secțiuni închise ale site-ului (fie el un blog sau un blog), trebuie să creați formular de înregistrare, pe orice pagină a site-ului. Și aici mulți se întreabă cum să creeze și să instaleze un astfel de formular.

Mai usor pentru cei care folosesc Funcționalitatea CMS, deoarece aceste sisteme au module gata făcute pentru lucrul cu formulare web. Adevărat, capacitățile lor sunt limitate. În alte cazuri, trebuie să înveți limbaje de programare (cum ar fi PHP, HTML) și să înțelegi sistemul de gestionare a bazelor de date (poți cheltui mult efort și, cel mai important, timp, dar totuși nu obții rezultate). Există o altă opțiune - să angajați un specialist care va finaliza sarcina. Dar munca programatorilor nu este ieftină, dar ce se întâmplă dacă nu există suficienți bani pentru a plăti munca?

A apărut de curând Metoda noua crearea de formulare web (înregistrare, formulare părere, comanda online de bunuri sau servicii etc.), care nu necesită cunoștințe de limbaje de programare (PHP, HTML) și alte tehnologii web (CSS, MySQL) - acesta este serviciul MyTaskHelper.ru - constructor online forme Acest site are intuitiv interfață clarăși nu necesită cunoștințe de programare.

Este ușor să creați un formular de înregistrare și să îl instalați pe site-ul dvs. web; trebuie doar să petreceți câteva minute și să urmați o serie de pași simpli:

1. Mai întâi, parcurgeți procesul de înregistrare și activare a contului dvs. (durează mai puțin de un minut);

2.Creați un proiect și un formular (pentru fiecare proiect puteți crea câte formulare doriți);

3.Adăugați câmpurile obligatorii la formularul de înregistrare (alegerea numelor vă aparține, totul depinde de scopul formularului). În sistem puteți selecta tipul fiecărui câmp (MyTaskHelper oferă 20 tipuri diferite, cum ar fi o linie de text, text cu mai multe linii, data, fișier, casetă de selectare, listă derulantă și altele);

4.Dacă este necesar, configurați funcționalitatea fiecărui câmp (aceasta ar putea fi validarea, completarea automată, implicit, dimensiunea câmpului);

5. În modulul Widgeturi, creați un design de formular care să se armonizeze cu ceea ce există deja pe site (disponibil un numar mare de parametrii). De asemenea, folosind a acestui modul poți seta „comportamentul” formularului atunci când utilizatorii îl completează, adică să faci formularul dinamic.

6.Atât, formularul de înregistrare este gata. Copiați codul de încorporare și plasați-l pe pagina web dorită.

Cu MyTaskHelper, tot ce aveți nevoie pentru a crea formulare web este un browser și o conexiune la internet. Caracteristică importantă Serviciul este că toate înregistrările introduse de utilizatori în formularul de înregistrare vor fi stocate pe serverele sistemului nostru într-o bază de date specială care este creată odată cu formularul. Nu puteți vizualiza numai informațiile colectate folosind oricare dintre formulare. Fiecare utilizator are acces la opțiuni precum gruparea datelor, sortarea bazelor de date, căutarea și filtrarea.

Buna ziua! Acum vom încerca să implementăm cel mai mult simpla inregistrare pe site-ul cu folosind PHP+ MySQL. Pentru a face acest lucru, Apache trebuie să fie instalat pe computer. Principiul de funcționare al scenariului nostru este prezentat mai jos.

1. Să începem prin a crea un tabel de utilizatori în baza de date. Acesta va conține datele utilizatorului (login și parolă). Să mergem la phpmyadmin (dacă creați o bază de date pe computer http://localhost/phpmyadmin/). Creăm un tabel utilizatori, acesta va avea 3 câmpuri.

O creez în baza de date mysql, puteți crea într-o altă bază de date. Apoi, setați valorile ca în figură:

2. Este necesară o conexiune la acest tabel. Să creăm un fișier bd.php. Conținutul său:

In cazul meu arata cam asa:

Salvați bd.php.
Grozav! Avem un tabel în baza de date și o conexiune la acesta. Acum puteți începe să creați o pagină pe care utilizatorii își vor lăsa datele.

3. Creați un fișier reg.php cu conținutul (toate comentariile în interior):



Înregistrare


Înregistrare


Autentificarea dvs.:




Parola Dvs:








4. Creați un fișier care va introduce date în baza de date și va salva utilizatorul. save_user.php (comentarii în interior):

5. Acum utilizatorii noștri se pot înregistra! Apoi, trebuie să creați o „ușă” pentru ca utilizatorii deja înregistrați să intre pe site. index.php (comentarii în interior):




pagina principala


pagina principala


Autentificarea dvs.:


Parola Dvs:






Inregistreaza-te



OK, totul sa terminat acum! Lecția poate fi plictisitoare, dar foarte utilă. Numai ideea de înregistrare este afișată aici, apoi o puteți îmbunătăți: adăugați securitate, design, câmpuri de date, încărcare avatare, deconectare din contul dvs. (pentru a face acest lucru, pur și simplu distruge variabilele din sesiune cu funcția unset) și curând. Noroc!

Am verificat totul, funcționează corect!

Iată un exemplu de formular de înregistrare folosind HTML. Aici un programator poate afișa câte „Câmpuri de text” dorește. Numele din fața câmpului de text se numește „Etichetă”. La sfârșitul din formularul de înregistrare este un buton „ADĂUGAȚI” în spatele căruia poate fi folosit orice link dorit. Odată făcut clic, acesta va redirecționa către acea destinație specială.

Iată un exemplu de formular de înregistrare folosind HTML. Aici un programator poate afișa câte „Câmpuri de text” dorește. Numele din fața câmpului de text se numește „Etichetă”. La sfârșitul formularului de înregistrare există un buton „ADĂUGAȚI” în spatele căruia poate fi folosit orice link dorit. Odată făcut clic, acesta va redirecționa către acea destinație specială. HTML Cod pentru formular de înregistrare

Iată un exemplu de formular de înregistrare folosind HTML. Aici un programator poate afișa câte „Câmpuri de text” dorește. Numele din fața câmpului de text se numește „Etichetă”. La sfârșitul formularului de înregistrare există un buton „ADĂUGAȚI” în spatele căruia poate fi folosit orice link dorit. Odată făcut clic, acesta va redirecționa către acea destinație specială.

În acest exemplu am arătat 9 „Câmp de text”. Mărimea casetei de text poate fi, de asemenea, modificată conform cerințelor.

înregistrare.html

formular de înregistrare Formular de înregistrare

Id:
Nume:
Curs:
Filiala:
Rola numărul:
Adresa de e-mail:
Nume de utilizator:
Despre noi:
Parola:

Știați că puteți utiliza serviciul Google, creați un formular de înregistrare pentru site-ul dvs. cu un singur clic? Toți cei care au cont Google, poate face clic pe buton și se poate conecta imediat la aplicația dvs., cu e-mailul, numele și fotografia lui.

Acest serviciu se numește autentificare federată și este construit pe protocolul OAuth2. Acest proces dificil, care implică partajarea datelor între serverul dvs. și Google, dar vom lăsa toată această muncă în seama bibliotecii PHP a Google, care se va ocupa de aproape totul la nivelul serverului.

Folosind acest serviciu, puteți simplifica foarte mult procesul de autorizare/înregistrare pentru dumneavoastră și utilizatorii dumneavoastră. Iată câteva dintre beneficii:

  • Nu este necesară crearea și verificarea formularelor de înregistrare și autorizare;
  • Nu este nevoie de funcția de recuperare a parolei uitate;
  • Autorizare/înregistrare foarte simplificată – veți primi e-mail persoană, nume și fotografie cu un singur clic;
  • Adresa a fost deja verificată de Google, așa că nu trebuie să trimiteți un mesaj pentru verificare.
  • Securitate serioasă de la Google.

Desigur, acest lucru va funcționa numai dacă persoana are un cont Google, așa că este logic să utilizați acest serviciu ca un plus sistem existentînregistrare. Asadar, haideti sa începem!

Instalare

Primul pas este să creați o nouă aplicație prin Consola API Google. Urmați instrucțiunile pentru a primi Informații suplimentare. După finalizarea procesului, copiați cheile primite în fișierul setup.php.

Rulați codul din schema.sql ( îl puteți găsi în arhivă) în PhpMyAdmin sau un instrument similar. Acesta va crea un tabel glogin_users în baza de date care va fi folosit pentru a stoca informații despre conturile de utilizator ale aplicației dvs. După aceea, scrieți detaliile conexiunii la baza de date în setup.php.

PHP

Creăm un formular de conectare utilizând autentificarea federată de la Google. Aceasta înseamnă că vizitatorii site-ului dvs. dau clic pe un link către pagina Google, unde acordă aplicației acces la contul lor și apoi vor fi redirecționați înapoi. Primești apoi un token de acces pe care îl poți folosi pentru a solicita informații despre ei. Iată o descriere simplificată a procesului de autorizare:

  • Când un utilizator dă clic pe butonul „Conectează-te cu Google” din demonstrația noastră, este direcționat către pagina de conectare a Google, unde vede ce permisiuni solicită aplicația noastră.
  • După ce permiteți accesul la această aplicație, aceștia vor fi redirecționați înapoi către site, în timp ce parametru special cod transmis în URL. Aplicația noastră va folosi acest cod pentru a obține un token de acces;
  • Folosind un token, aplicația solicită informații despre utilizator, care sunt stocate în baza de date.

Pentru a citi și a insera în baza de date, folosesc micuța bibliotecă Idiorm, pe care o puteți găsi în folderul bibliotecii.

Codul nostru PHP este organizat după cum urmează:

  • index.php este fișierul principal al aplicației;
  • setup.php - acest fișier conține informații de conectare la baza de date și chei obținute din Consola API Google;
  • Dosarul Bibliotecă - conține biblioteca Idiorm, PHP Biblioteci Google, și o clasă pentru includerea unei mărci temporale relative.

Să aruncăm o privire la codul de la începutul index.php:

necesită „setup.php”; // Creaza un nou API-ul Google client
$client = new apiClient() ;
//$client->setApplicationName("Tutorialzine"); // Configurați-l
$client -> setClientId ($client_id) ;
$client -> setClientSecret ($client_secret) ;
$client -> setDeveloperKey ($api_key) ;
$client -> setRedirectUri ($redirect_url) ;
$client -> setApprovalPrompt ( false );
$oauth2 = new apiOauth2Service($client) ; // Parametrul de cod înseamnă că aceasta este
// o redirecționare de la google, care poartă un cod temporar
if (isset ($_GET [ "cod" ] ) ) ( // Această metodă va obține jetonul de acces real de la Google,
// astfel încât să putem solicita informații despre utilizator
$client -> autentificare () ; // Obține datele utilizatorului
$info = $oauth2 -> userinfo -> get () ; // Găsiți această persoană în baza de date
$person = ORM::for_table ("glogin_users") -> unde ("email" , $info [ "email" ] ) -> find_one () ; dacă (! $persoană ) (
// Nu a fost găsită o astfel de persoană. Inregistreaza-te! $persoana = ORM::for_table("glogin_users")->create(); // Setați proprietățile care urmează să fie inserate în db
$persoana -> email = $info [ "email" ] ;
$persoana -> nume = $info [ "nume" ] ;

if (isset ($info [ "imagine" ] ) ) (
// Dacă utilizatorul a setat a google public poza de cont
$persoana -> fotografie = $info [ "poza" ] ;
}
altceva(
//în caz contrar, utilizați valoarea implicită
$persoană -> fotografie = "assets/img/default_avatar.jpg" ;
) // introduceți înregistrarea în baza de date
$persoana -> salvare () ;
) // Salvați ID-ul utilizatorului în sesiune
$_SESSION [ "user_id" ] = $persoana -> id () ; // Redirecționează la adresa URL a demonstrației de bază
header("Locație: $redirect_url");
Ieșire ;
) //Gestionați deconectarea
dacă (isset ($_GET [ "deconectare" ] ) ) (
dezactivat ($_SESSION [ "user_id" ] );
) $persoana = null ;
if (isset ($_SESSION [ "user_id" ] ) ) (
// Preluați persoana din baza de date
$persoana = ORM::for_table("glogin_users") -> find_one($_SESSION["user_id"]) ;
}

Ce se întâmplă aici este că verificăm codul în $_ GET parametrii. După cum am menționat mai sus, această setare este setată de Google atunci când utilizatorul este redirecționat înapoi după ce a permis accesul la aplicație. Apoi solicităm informații despre utilizator și le înregistrăm în baza de date. ID-ul utilizatorului (valoarea ID-ului din baza de date) este scris în sesiune. Este salvat între cereri și este folosit ca un semnalizare că utilizatorul a fost autentificat

Dacă doriți să aflați mai multe despre OAuth, citiți informațiile relevante de la Google despre acest subiect. Acolo puteți vedea și un tabel cu câmpurile pe care le returnează metoda get().

Spre final, definim variabila $persoana. Conține un obiect care este returnat de biblioteca Idiorm, cu proprietăți pentru fiecare coloană de tabel glogin_users. Puteți vedea cum este utilizat acest obiect în secțiunea următoare.

HTML

Codul HTML pentru exemplul nostru se află în partea de jos a index.php. Prin urmare, avem acces la obiectul $person, care este util atunci când afișăm numele și fotografia utilizatorului. Pagina în sine este document standard HTML5:





Formular de conectare bazat pe Google




Formular de autentificare