Давно я не рассказывал истории из профессиональной жизни.
Вчера мы поменяли кнопки логина через соцсети. Раньше показывали белые круглые, в которых угадать соцсеть можно было только по форме логотипа. В новом дизайне явно написано название соцсети и вся кнопка фирменного цвета.
В случае фейсбука мы хотим использовать классную кнопку «продолжить как имярек» с аватаркой. (кстати, летом у гугла была похожая возможность в режиме беты и, говорят, она адски повышала конверсию, но сейчас её выключили).
Из-за этой кнопки с аватаркой всё и закрутилось. Для начала, пришлось выкинуть старый механизм аутентификации с oauth-редиректом и подключить библиотеку фб, которая делает всю работу сама. Потом я заметил (уже на продакшене), что страница логина крешится. Оказалось, что фейсбук хитро инициализирует свою js-библиотеку и при определенной последовательности загрузки скриптов она ломается. Воспроизводится это у нас не каждый раз и только на продакшене. В сафари ломается чаще, чем в хроме, так что любовь нашего фронтендера Ромы к Linux отладку не упрощала. Чтобы не ломать страницу целиком, мы срочно вставили try-catch, а потом сделали хитрую схему.
Теперь мы сначала показываем все три кнопки соцсети как обычно (oauth-редирект для фб вернулся в код обратно), при этом в фоне грузим библиотеку фб. После успешной загрузки красивой кнопки фб, мы заменяем нашу кнопку логина на родную фб, так что это практически незаметно.
В отношении этой разработки у меня два разных чувства:
- жалость, что зря потеряли время, потому что у большинства пользователей, которым нужен логин через Facebook, уже загружена js-библиотека фейсбука, так что можно было не извращаться + кажется, что тупо недоразобрались с js-ошибками;
- чувство удовлетворения, что сделали качественно «заднюю стенку шкафа», все три кнопки логина покажутся мгновенно, без задержки в любом случае.
В любом случае, получилось классно. Логиньтесь!
В ролях: продакт 🤔 Алексей Горностаев, дизайн 🖌 Андрей Кулагин, фронтенд 🖼 Роман Ахмадуллин.
