Siguran sam da vam se to dogodilo: odete na web stranicu, želite se registrirati, ali suočite se s beskrajnim obrascem koji čak traži ime vašeg ljubimca. Na kraju, većina nas... Bacamo ručnik i zatvaramo računKako bi riješio ovaj problem, Google je pokrenuo One Tap, alat osmišljen za praktički trenutnu registraciju, uklanjajući sve prepreke između korisnika i sadržaja.
U osnovi, to je modalni prozor koji se nježno pojavljuje na ekranu i omogućuje vam da Uđite u aplikaciju jednim dodiromNema potrebe unositi e-poštu ili lozinku jer sustav koristi Google sesiju koju već imate otvorenu u pregledniku. To je majstorski potez za poboljšanje stope konverzije jer minimizira trenje i nudi... izuzetno glatko korisničko iskustvo i moderno.
Kako djeluje magija jednog dodira
Za razliku od klasičnog gumba "Prijava s Googleom", One Tap je proaktivan. Sustav provjerava korisnički račun na temelju sigurnosnih tokena i Androidovo automatsko dovršavanje ili Smart LockAko korisnik nije konfigurirao ove funkcije upravljanja ključevima, sustav se možda neće pokrenuti i možda će morati pribjeći tradicionalnim metodama. Što se tiče sigurnosti, sve se temelji na... tokeni bez lozinkeTo znači da je razmjena podataka puno sigurnija od slanja ključeva preko mreže.
Koraci za integraciju One Tapa u vaš projekt
Ako želite ovo implementirati na svojoj web stranici, postupak je prilično jednostavan ako slijedite logičan redoslijed. Prvi korak je priprema Google Search Consolea.
1. Konfiguracija u Google Cloud Consoleu
Ne možeš ništa učiniti bez ključeva kraljevstva. Moraš otići na Google Cloud i stvori novi projektJednom kada uđete, morate konfigurirati Zaslon za pristanak na OAuthgdje ćete unijeti naziv svoje aplikacije i e-adresu za podršku. Važan detalj je odabir publike: interna (za vašu tvrtku) ili eksterna (za sve). Ako odaberete eksternu, imajte na umu da će vas Google pitati provjeri aplikaciju prije puštanja u proizvodnju.
Zatim morate generirati ID OAuth klijentaOvdje definirate koje su domene autorizirane. Profesionalni savjet je stvoriti dva odvojena klijenta: jedan za testovi na localhostu i još jedan za stvarnu produkcijsku domenu, čime se izbjegavaju sigurnosni sukobi tijekom razvoja.
2. Implementacija frontenda
Imate dva puta ovisno o tome kako je vaša stranica izgrađena:
- Putem statičkog HTML-a: Idealno za jednostavne web stranice ili one s agresivnim keširanjem. Samo trebate umetnuti
divs osobnom iskaznicomg_id_onload, prosljeđujući vaš ID klijenta i odredišni URL gdje će Google poslati vjerodajnicu putem POST-a. - Putem dinamičkog JavaScripta: Za one koji žele više kontrole. Koristite metodu
google.accounts.id.initializea zatim pokrećete upit sgoogle.accounts.id.prompt()To vam omogućuje, na primjer, odlučiti kada će se poruka prikazati na temelju toga je li se korisnik vratio nakon nekoliko dana.
Kritična točka je da Ne smijete prekriti poruku One Tap s drugim elementima vaše web stranice (kao što su banneri ili skočni prozori). Ako sustav otkrije da skrivate čak i jedan piksel Google iframea, mogli biste se suočiti s posljedicama. obustavite svoj projekt zbog kršenja UX standarda.
3. Validacija pozadinskog sustava (ključni korak)
Kada korisnik klikne, Google šalje JWT (JSON web token). Nikad ne trebaš slijepo vjerovati Ovaj token je valjan samo zato što je stigao na vaš poslužitelj. Obavezno ga je provjeriti pomoću službene Googleove biblioteke (kao što je google-auth u Pythonu ili Google Client API-ju u PHP-u/Laravelu).
Proces uključuje dekodiranje JWT-a i provjeru da li je polje aud (publika) točno odgovara vašem ID OAuth klijentaNadalje, kako bi se spriječili napadi krivotvorenja, bitno je provesti Validacija CSRF tokena Uspoređujući kolačić preglednika s vrijednošću poslanom u POST zahtjevu. Nakon provjere možete izdvojiti e-poštu i korisničko ime kako biste kreirali njihov račun ili ih prijavili.
Posebni slučajevi i ponašanja upita
Jedan dodir se ne pojavljuje uvijek, i to je normalno. Postoje takozvani trenuci poučavanjaNa primjer, upit bi mogao biti izostavljeno Ako ga je korisnik nedavno ručno zatvorio, to pokreće eksponencijalno razdoblje hlađenja. Da biste to resetirali tijekom testiranja, možete otići u postavke web-mjesta u svom pregledniku i resetiraj dopuštenja.
Također možete prilagoditi kontekst. Ako koristite atribut data-context="signup"Tekst će se promijeniti iz "Pristup..." u "Registrirajte se na…"što ima puno više smisla ako je korisnik nov na vašoj platformi.
Napredne integracije s alatima poput Logtoa
Ako ne želite ručno upravljati cijelim poslužiteljem identiteta, postoje rješenja poput Logtoa koja pojednostavljuju proces. Ovi alati omogućuju Povežite Google kao pružatelja identiteta (IdP) vizualno. Samo trebate zalijepiti ID klijenta i tajnu klijenta u konzolu i aktivirati prekidač jednim dodirom. To je posebno korisno u izvornim Android aplikacijama, gdje možete kombinirati iskustvo Chrome prilagođene kartice s postupkom jednim dodirom za besprijekornu autentifikaciju.
Vrijedi napomenuti da je One Tap, po svojoj prirodi, Vraća samo ID tokenAko vaša aplikacija treba pristup vanjskim Google API-jima (kao što su Google disk ili Kalendar), nećete moći izravno dobiti token za pristup od One Tap-a. U tom slučaju morat ćete pokrenuti tijek inkrementalna autorizacija nakon što se korisnik prijavi, zatraživši potrebna specifična dopuštenja (opsege).
Ovaj sustav autentifikacije pretvara zamornu registraciju u gotovo besprijekoran proces, koristeći Googleovu pouzdanu infrastrukturu za provjeru identiteta korisnika pomoću JWT-a. Od postavljanja vjerodajnica u oblaku do brze kontrole stanja i rigorozne provjere tokena na strani poslužitelja, implementacija One Tap-a omogućuje programerima uklanjanje trenja pri ulasku i značajno povećanje stope konverzije njihove web stranice. Podijelite informacije i drugi će saznati više o temi.