Ik weet zeker dat het u wel eens is overkomen: u bezoekt een website, wilt zich registreren, maar stuit op een eindeloos formulier dat van alles vraagt, zelfs de naam van uw huisdier. Uiteindelijk geven de meesten van ons het op en sluiten we het tabblad . Om dit probleem op te lossen, heeft Google One Tap gelanceerd, een tool die is ontworpen om registratie vrijwel direct te laten verlopen en alle drempels tussen de gebruiker en de content weg te nemen.
Het is in feite een modaal venster dat soepel op het scherm verschijnt en waarmee je de app met één tik kunt openen . Je hoeft je e-mailadres of wachtwoord niet in te voeren, want het systeem gebruikt de Google-sessie die je al in je browser hebt geopend. Het is een geniale zet om conversies te verhogen, omdat het de drempel verlaagt en een uiterst naadloze en moderne gebruikerservaring biedt.
Hoe de magie van One Tap werkt
In tegenstelling tot de klassieke "Inloggen met Google"-knop, is One Tap proactief. Het systeem vraagt ​​de gebruiker om zijn of haar accountgegevens op basis van beveiligingstokens en de automatische invulfunctie of Smart Lock van Android . Als de gebruiker deze wachtwoordbeheerfuncties niet heeft geconfigureerd, wordt het systeem mogelijk niet geactiveerd en moet de gebruiker terugvallen op traditionele methoden. Qua beveiliging is alles gebaseerd op wachtwoordloze tokens , wat betekent dat gegevensuitwisseling veel veiliger is dan het versturen van wachtwoorden via het netwerk.
Stappen om One Tap in je project te integreren
Als je dit op je website wilt implementeren, is het proces vrij eenvoudig als je een logische volgorde aanhoudt. De eerste stap is het voorbereiden van Google Search Console.
1. Configuratie in de Google Cloud Console
Je kunt niets doen zonder de sleutels tot het koninkrijk. Je moet naar Google Cloud gaan en een nieuw project aanmaken . Daar moet je het OAuth-toestemmingsscherm configureren , waar je de naam van je app en het support-e-mailadres invoert. Een belangrijk detail is het kiezen van de doelgroep: intern voor je bedrijf of extern voor iedereen. Als je extern kiest, vergeet dan niet dat Google je zal vragen de applicatie te verifiëren voordat deze in productie wordt genomen.
Vervolgens moet je de OAuth-client-ID genereren . Hier definieer je welke domeinen geautoriseerd zijn. Een handige tip is om twee aparte clients aan te maken: één voor testen op localhost en één voor het daadwerkelijke productiedomein. Dit helpt je beveiligingsconflicten tijdens de ontwikkeling te voorkomen.
2. Frontend-implementatie
Afhankelijk van hoe je pagina is opgebouwd, heb je twee mogelijkheden:
- Via statische HTML: Ideaal voor eenvoudige websites of websites met agressieve caching. Je hoeft alleen maar een
divmet de IDg_id_onloadwaarbij je je client-ID en de bestemmings-URL doorgeeft waarnaar Google de inloggegevens via een POST-verzoek zal verzenden. - Via dynamische JavaScript: Voor wie meer controle wil. Je gebruikt deze methode.
google.accounts.id.initializeen vervolgens activeer je de prompt metgoogle.accounts.id.prompt()Dit geeft u bijvoorbeeld de mogelijkheid om: beslissen wanneer het bericht moet worden weergegeven op basis van de vraag of de gebruiker na enkele dagen is teruggekeerd.
Een cruciaal punt is dat u het One Tap-bericht niet mag bedekken met andere elementen op uw website (zoals banners of pop-ups). Als het systeem detecteert dat u zelfs maar één pixel van de Google iframe verbergt, kan uw project worden opgeschort wegens schending van de UX-richtlijnen.
3. Backendvalidatie (De cruciale stap)
Wanneer de gebruiker klikt, stuurt Google een JWT (JSON Web Token). Je moet nooit blindelings vertrouwen. Dit token is alleen geldig omdat het op uw server is aangekomen. Het is verplicht om het te verifiëren met behulp van de officiële bibliotheek van Google (zoals...). google-auth in Python of de Google Client API in PHP/Laravel).
Het proces omvat het decoderen van de JWT en het controleren of het veld aud (publiek) precies overeenkomen met uw OAuth-client-IDBovendien is het, om namaakaanvallen te voorkomen, essentieel om een CSRF-tokenvalidatie Door de browsercookie te vergelijken met de waarde die in het POST-verzoek is verzonden. Na verificatie kunt u het e-mailadres en de gebruikersnaam achterhalen om hun account aan te maken of hen in te loggen.
Bijzondere gevallen en gedragingen van de prompt
De One Tap-functie verschijnt niet altijd, en dat is normaal. Er zijn zogenaamde " instructiemomenten ". De prompt kan bijvoorbeeld worden overgeslagen als de gebruiker deze onlangs handmatig heeft gesloten, waardoor een exponentiële afkoelperiode wordt geactiveerd. Om dit tijdens het testen te resetten, kunt u naar de site-instellingen in uw browser gaan en de machtigingen opnieuw instellen.
Je kunt de context ook aanpassen. Als je het attribuut gebruikt. data-context="signup"De tekst verandert van "Toegang..." naar "Registreer je bij…"Dat is veel logischer als de gebruiker nieuw is op je platform.
Geavanceerde integraties met tools zoals Logto
Als je de volledige identiteitsserver niet handmatig wilt beheren, vereenvoudigen oplossingen zoals Logto het proces. Met deze tools kun je Google visueel koppelen als identiteitsprovider (IdP) . Plak simpelweg de Client ID en Client Secret in de console en schakel de One Tap-functie in. Dit is vooral handig in native Android-apps, waar je de Chrome Custom Tabs -ervaring kunt combineren met de One Tap-flow voor naadloze authenticatie.
Het is belangrijk om te weten dat One Tap, per definitie, alleen een ID-token retourneert . Als uw applicatie toegang nodig heeft tot externe Google API's (zoals Google Drive of Agenda), kunt u het toegangstoken niet rechtstreeks van One Tap verkrijgen. In dat geval moet u een stapsgewijze autorisatiestroom starten nadat de gebruiker is ingelogd, waarbij u de specifieke benodigde machtigingen (scopes) aanvraagt.
Dit authenticatiesysteem transformeert de omslachtige registratie in een vrijwel naadloos proces, waarbij gebruik wordt gemaakt van de vertrouwde infrastructuur van Google om de gebruikersidentiteit te valideren met behulp van JWT. Van cloudgebaseerde configuratie van inloggegevens tot controle van de promptstatus en strenge tokenverificatie aan de serverzijde: de implementatie van One Tap stelt ontwikkelaars in staat om drempels bij de toegang te elimineren en de conversieratio's van hun website aanzienlijk te verhogen. Deel deze informatie zodat anderen er ook meer over kunnen leren.