Сигурен съм, че ви се е случвало: отивате на уебсайт, искате да се регистрирате, но сте изправени пред безкраен формуляр, който дори пита за името на домашния ви любимец. В крайна сметка повечето от нас... Хвърляме кърпата в джоба и затваряме разделаЗа да реши този проблем, Google пусна One Tap, инструмент, предназначен да направи регистрацията практически мигновена, премахвайки всякакви бариери между потребителя и съдържанието.
По принцип това е модален прозорец, който се появява нежно на екрана и ви позволява да Влезте в приложението с едно докосванеНяма нужда да въвеждате имейла или паролата си, тъй като системата използва сесията на Google, която вече имате отворена в браузъра си. Това е майсторски ход за подобряване на процента на конверсия, защото минимизира триенето и предлага... изключително гладко потребителско изживяване и модерен.
Как работи магията на One Tap
За разлика от класическия бутон „Вход с Google“, One Tap е проактивен. Системата подканва потребителя да влезе в акаунта въз основа на токени за сигурност и Автоматично попълване в Android или Smart LockАко потребителят не е конфигурирал тези функции за управление на ключове, системата може да не се стартира и може да се наложи да прибегне до традиционни методи. Що се отнася до сигурността, всичко е базирано на... токени без паролаТова означава, че обменът на данни е много по-сигурен от изпращането на ключове по мрежата.
Стъпки за интегриране на One Tap във вашия проект
Ако искате да внедрите това на уебсайта си, процесът е доста прост, ако следвате логичен ред. Първата стъпка е да подготвите Google Search Console.
1. Конфигурация в Google Cloud Console
Не можеш да направиш нищо без ключовете за кралството. Трябва да отидеш в Google Cloud и създайте нов проектСлед като влезете, трябва да конфигурирате Екран за съгласие за OAuthкъдето ще въведете името на приложението си и имейл адреса за поддръжка. Важен детайл е изборът на аудитория: вътрешна (за вашата компания) или външна (за всички). Ако изберете външна, не забравяйте, че Google ще ви попита проверете приложението преди да го пуснат в производство.
След това трябва да генерирате Идентификатор на OAuth клиентТук определяте кои домейни са оторизирани. Професионален съвет е да създадете два отделни клиента: един за тестове на localhost и друг за действителния производствен домейн, като по този начин се избягват конфликти със сигурността по време на разработката.
2. Внедряване на фронтенда
Имате два пътя в зависимост от това как е изградена страницата ви:
- Чрез статичен HTML: Идеален за прости уебсайтове или такива с агресивно кеширане. Просто трябва да вмъкнете
divс личната картаg_id_onload, като предавате вашия клиентски идентификатор и целевия URL адрес, където Google ще изпрати идентификационните данни чрез POST. - Чрез динамичен JavaScript: За тези, които искат повече контрол. Вие използвате метода
google.accounts.id.initializeи след това задействате подканата сgoogle.accounts.id.prompt()Това ви позволява, например, реши кога да се покаже съобщението въз основа на това дали потребителят се е върнал след няколко дни.
Критичен момент е, че Не трябва да покривате съобщението One Tap с други елементи на вашия уебсайт (като банери или изскачащи прозорци). Ако системата открие, че скривате дори един пиксел от Google iframe, може да се сблъскате с последствия. спрете проекта си за нарушаване на UX стандартите.
3. Валидиране на бекенда (жизненоважната стъпка)
Когато потребителят кликне, Google изпраща JWT (JSON Web Token). Никога не бива да се доверяваш сляпо Този токен е валиден само защото е пристигнал на вашия сървър. Задължително е да го проверите, използвайки официалната библиотека на Google (като например google-auth на Python или Google Client API на PHP/Laravel).
Процесът включва декодиране на JWT и проверка дали полето aud (аудитория) съвпада точно с вашата Идентификатор на OAuth клиентОсвен това, за да се предотвратят атаки с фалшифициране, е от съществено значение да се внедри Валидиране на CSRF токени Чрез сравняване на „бисквитката“ на браузъра със стойността, изпратена в POST заявката. След проверка можете да извлечете имейла и потребителското име, за да създадете акаунта им или да ги влезете.
Специални случаи и поведение на подканата
Едно докосване не винаги се появява и това е нормално. Има така наречените моменти на обучениеНапример, подканата може да бъде пропуснато Ако потребителят наскоро го е затворил ръчно, това задейства експоненциален период на охлаждане. За да нулирате това по време на тестване, можете да отидете в настройките на сайта в браузъра си и нулиране на разрешения.
Можете също да персонализирате контекста. Ако използвате атрибута data-context="signup"Текстът ще се промени от „Достъп...“ на „Регистрирайте се в…“което е много по-логично, ако потребителят е нов във вашата платформа.
Разширени интеграции с инструменти като Logto
Ако не искате да управлявате целия сървър за самоличност ръчно, има решения като Logto, които опростяват процеса. Тези инструменти позволяват Свържете Google като доставчик на самоличност (IdP) визуално. Просто трябва да поставите клиентския идентификатор и клиентската тайна в конзолата си и да активирате превключвателя с едно докосване. Това е особено полезно в оригинални приложения за Android, където можете да комбинирате изживяването на Персонализирани раздели на Chrome с One Tap flow за безпроблемно удостоверяване.
Струва си да се отбележи, че One Tap, по дизайн, Връща само ID токенАко приложението ви се нуждае от достъп до външни API-та на Google (като Google Диск или Календар), няма да можете да получите токена за достъп директно от One Tap. В този случай ще трябва да инициирате поток от поетапно оторизиране след като потребителят е влязъл в системата, като поиска необходимите специфични разрешения (обхвати).
Тази система за удостоверяване превръща досадната регистрация в практически безпроблемен процес, използвайки надеждната инфраструктура на Google за валидиране на самоличността на потребителите чрез JWT. От облачна настройка на идентификационни данни до бърз контрол на състоянието и строга проверка на токени от страна на сървъра, внедряването на One Tap позволява на разработчиците да елиминират трудностите при влизане и значително да увеличат процента на конверсия на уебсайтовете си. Споделете информацията и други ще научат по темата.