Jag är säker på att det har hänt dig: du går till en webbplats, vill registrera dig, men möts av ett oändligt formulär som frågar efter allt, till och med ditt husdjurs namn. Till slut ger de flesta av oss upp och stänger fliken . För att lösa detta problem har Google lanserat One Tap, ett verktyg som är utformat för att göra registreringen praktiskt taget omedelbar och eliminera alla hinder mellan användaren och innehållet.
I grund och botten är det ett modalt fönster som visas smidigt på skärmen och låter dig öppna appen med ett enda tryck . Du behöver inte skriva in din e-postadress eller ditt lösenord, eftersom systemet använder Google-sessionen som du redan har öppen i din webbläsare. Det är ett mästerverk för att förbättra konverteringar eftersom det minimerar friktion och erbjuder en extremt sömlös och modern användarupplevelse .
Så fungerar magin med One Tap
Till skillnad från den klassiska knappen "Logga in med Google" är One Tap proaktiv. Systemet uppmanar användaren att ange sitt konto baserat på säkerhetstokens och Androids autofyll- eller Smart Lock- funktioner. Om användaren inte har konfigurerat dessa lösenordshanteringsfunktioner kanske systemet inte aktiveras och de kan behöva tillgripa traditionella metoder. Säkerhetsmässigt är allt baserat på lösenordslösa tokens , vilket innebär att datautbyte är mycket säkrare än att skicka lösenord över nätverket.
Steg för att integrera One Tap i ditt projekt
Om du vill implementera detta på din webbplats är processen ganska enkel om du följer en logisk ordning. Det första steget är att förbereda Google Search Console.
1. Konfiguration i Google Cloud Console
Du kan inte göra någonting utan nycklarna till kungariket. Du måste gå till Google Cloud och skapa ett nytt projekt . Där måste du konfigurera OAuth-samtyckesskärmen , där du anger apps namn och support-e-postadress. En viktig detalj är att välja målgrupp: intern för ditt företag eller extern för alla. Om du väljer extern, kom ihåg att Google kommer att be dig verifiera applikationen innan den driftsätts till produktion.
Därefter behöver du generera OAuth-klient-ID:t . Det är här du definierar vilka domäner som är auktoriserade. Ett proffstips är att skapa två separata klienter: en för testning på localhost och en annan för den faktiska produktionsdomänen. Detta hjälper dig att undvika säkerhetskonflikter under utvecklingen.
2. Frontend-implementering
Du har två alternativ beroende på hur din sida är uppbyggd:
- Via statisk HTML: Perfekt för enkla webbplatser eller de med aggressiv cachning. Du behöver bara infoga en
divmed IDg_id_onload, och skickar ditt klient-ID och destinationsadressen dit Google skickar inloggningsuppgifterna via en POST. - Via dynamisk JavaScript: För dig som vill ha mer kontroll. Du använder metoden
google.accounts.id.initializeoch sedan utlöser du prompten medgoogle.accounts.id.prompt()Detta gör att du till exempel kan bestäm när meddelandet ska visas baserat på om användaren har återvänt efter flera dagar.
En viktig punkt är att du inte får täcka One Tap-meddelandet med andra element på din webbplats (som banners eller popup-fönster). Om systemet upptäcker att du döljer ens en enda pixel av Googles iframe kan ditt projekt bli avstängt för brott mot UX-riktlinjer.
3. Backend-validering (Det viktiga steget)
När användaren klickar skickar Google en JWT (JSON Web Token). Man ska aldrig lita blint Denna token är endast giltig eftersom den anlände till din server. Det är obligatoriskt att verifiera den med Googles officiella bibliotek (t.ex. google-auth i Python eller Google Client API i PHP/Laravel).
Processen innefattar avkodning av JWT och verifiering av att fältet aud (publik) matchar exakt din OAuth-klient-IDFör att förhindra förfalskningsattacker är det dessutom viktigt att implementera en CSRF-tokenvalidering Genom att jämföra webbläsarens cookie med värdet som skickades i POST-begäran kan du extrahera e-postadressen och användarnamnet för att skapa deras konto eller logga in.
Specialfall och beteenden hos prompten
One Tap visas inte alltid, och detta är normalt. Det finns så kallade " instruktionsmoment ". Till exempel kan uppmaningen hoppas över om användaren nyligen stängde den manuellt, vilket utlöser en exponentiell avkylningsperiod. För att återställa detta under testning kan du gå till webbplatsinställningarna i din webbläsare och återställa behörigheterna.
Du kan också anpassa kontexten. Om du använder attributet data-context="signup"Texten kommer att ändras från "Åtkomst..." till "Registrera dig på…"vilket är mycket mer logiskt om användaren är ny på din plattform.
Avancerade integrationer med verktyg som Logto
Om du inte vill hantera hela identitetsservern manuellt kan lösningar som Log förenkla processen. Dessa verktyg låter dig visuellt koppla Google som en identitetsleverantör (IdP) . Klistra bara in klient-ID och klienthemlighet i deras konsol och aktivera One Tap-reglaget. Detta är särskilt användbart i inbyggda Android-appar, där du kan kombinera Chrome Custom Tabs -upplevelsen med One Tap-flödet för sömlös autentisering.
Det är viktigt att notera att One Tap, av design, bara returnerar en ID-token . Om din applikation behöver åtkomst till externa Google API:er (som Google Drive eller Kalender) kommer du inte att kunna hämta åtkomsttoken direkt från One Tap. I så fall måste du initiera ett stegvis auktoriseringsflöde efter att användaren har loggat in och begära de specifika behörigheter (omfång) som krävs.
Detta autentiseringssystem förvandlar tråkig registrering till en praktiskt taget sömlös process, genom att utnyttja Googles betrodda infrastruktur för att validera användaridentitet med hjälp av JWT. Från molnbaserad konfiguration av autentiseringsuppgifter till snabb tillståndskontroll och rigorös verifiering av tokens på serversidan, gör implementeringen av One Tap det möjligt för utvecklare att eliminera friktion vid inmatning och avsevärt öka sina webbplatskonverteringsfrekvenser. Dela denna information så att andra kan lära sig om den.