В предыдущей статье я рассказал о том, как организовать логин на сайт с помощью js-библиотеки от Microsoft. Идея в том, чтобы не создавать собственный модуль регистрации (он, скорее всего, получится уязвимым к хакерским атакам), а воспользоваться возможностями крупных корпораций, которые атак, в общем-то, не боятся.
IT-монстров с собственными API аутентификации и авторизации множество (Google, Microsoft, Facebook, Twitter, Яндекс), и хочется воспользоваться как можно большим количеством таких возможностей. Мешает то, что у каждой из них свой уникальный API для этих целей, и с каждым нужно разбираться. Я осилил лишь 3. Про первую технологию (MSAL) уже написал, этот материал будет про аутентификацию от Google, и еще про Яндекс планирую. Больше мне и не надо, поскольку потенциальные потребители моих услуг пользуются именно этими сервисами.
Кто-то может сказать, что незачем изобретать велосипед: есть готовые интегрированные инструменты для подобных целей. Прежде всего, это hello.js. В этом модуле собрано несколько вариантов аутентификации, и все они приведены к изящному "единому знаменателю". Хорошая разработка, но я от нее отказался: во-первых, некоторые примененные в ней технологии уже успели устареть, хотя пока еще и не окончательно отвергнуты (ADAL вместо MSAL). Во-вторых, я хотел бы полностью контролировать клиент-серверное взаимодействие. В-третьих, интересно сравнить технологии, используемые корпорациями.
Приступим, наконец, к разбору работы Google API (GAPI) применительно к аутентификации пользователей. GAPI - библиотека, интегрирующая различные технологии Google, которые могут быть выполнены в рамках веб-страницы. Есть среди них и модуль auth2, которым мы и воспользуемся. Но сначала в html нужно добавить такой код:
<script src="/js/invite-with-gapi.js"></script>
<script src="https://apis.google.com/js/platform.js?onload=init" async defer></script>
Внимательный читатель уже видит отличие от MSAL: там мы сначала загружали скрипт от Microsoft, а затем собственный. Здесь же последовательность обратная. Это объясняется тем, что библиотека от Google вызывает функцию init (url заканчивается параметрами - ?onload=init). Это значит, что на момент, когда скрипт загрузится, эта самописная функция уже должна "поджидать" его на странице. В противном случае platform.js не найдет ее и не произойдет никакой аутентификации.
Что содержит invite-with-gapi.js? Как и в предыдущем примере с MSAL, этот файл используется многократно, точнее говоря, 2 раза: первый - в момент начала аутентификации, второй - после того, как сервера Google проверят регистрацию пользователя у себя, а также убедятся в том, что он согласен предоставить вашему приложению права на получение его персональных данных. Приведу содержимое этого файла. Как и предыдущий, он написан на CoffeeScript (почему - объяснено в статье о MSAL):
@.init = ()->
switch @.location.pathname
when '/signup-gapi.html'
setTimeout ()->
gapi.load 'auth2', ()->
gauth2 = gapi.auth2.init
client_id: '640986499797-blah-blah.apps.googleusercontent.com'
ux_mode: 'redirect'
redirect_uri: 'https://js-invite.ru/json/invite-with-gapi'
scope: 'profile email'
gauth2.signIn()
, 1000
when '/json/invite-with-gapi'
gapi.load 'auth2', ()->
gauth2 = gapi.auth2.init
client_id: '640986499797-blah-blah.apps.googleusercontent.com'
scope: 'profile email'
.then (res)->
prof = res.currentUser.get().getBasicProfile()
url = '/json/invite-with-email?'
url += "name=#{encodeURIComponent(prof.getName())}&"
url += "to=#{encodeURIComponent(prof.getEmail())}"
window.location = url
Как видим, в отличие от MSAL, эта технология не нуждается в возврате к первоначальной странице, а организует логин всего за два шага: токен доступа выдается уже при переадресации на ваш сервер. Кстати, хранит информацию об аутентификации Google API не в sessionStorage, а в localStorage.
Работающий пример можно посмотреть здесь.
В общем, что ни компания, то свои правила. И это вы еще Яндекс не видели :). Про его вариант аутентификации я собираюсь рассказать в следующей статье.
Top comments (0)