Как YouTube входит в учетную запись Gmail без перенаправления?

Шаг 1: я вошел в свою учетную запись gmail. Браузер фактически перенаправляет на accounts.google.com. Итак, я вошел туда и перенаправил обратно на Gmail, войдя в систему.

Шаг 2: Теперь в браузере я набираю youtube.com. Без каких-либо перенаправлений я захожу на YouTube с учетной записью gmail.

Youtube — это совершенно другой домен. Как он общается с accounts.google.com без редиректа? Я проверил сетевой запрос с помощью инструментов разработчика Chrome, но такого перенаправления не вижу!


person chanchal118    schedule 01.06.2016    source источник


Ответы (1)


Это схема технического решения, обеспечивающая междоменную связь между двумя или более веб-сайтами, такими как YouTube или Gmail, с использованием центрального домена sso (accounts.google.com).

1) Вход в gmail перенаправляет на account.google.com, идентифицирует вас и выдает токен аутентификации (формат JWT) с информацией о вашей учетной записи. Токен хранится в локальном хранилище браузера.

//Store the Json Web token with accountInfo in localStorage
localStorage.setItem('tokenId',jwt);

2) Youtube проверяет localStorage на account.google.com в поисках токенов авторизации. Если найдено, позволяет войти.

Файлы cookie и localStorage могут быть разделены между доменами с помощью промежуточного домена accounts.google.com. На главной странице встроен iframe, который получает доступ к файлам cookie и отправляет сообщения на главную.

//Create iframe when page is loaded pointing to sso domain. For example in gmail.com and youtube.com pointing to accounts.google.com
var iframe = document.createElement('iframe');
iframe.style.display = "none";
iframe.src = 'https://sso.domain.com/sso.html?sourceDomain=...;
iframe.id = 'sso.iframe';
document.body.appendChild(iframe);

Когда iframe загружается, отправляет сообщение с jwt на родительскую страницу

window.parent.postMessage(jwt, sourceDomain);

Родительская страница получает токен

//Message listener for SSO events (created by the sso.iframe)
addEventListener("message", _listener, false);

function _listener(event){
    //origin check
    if (  sourceDomain.lastIndexOf(event.origin ) == -1){
        return;
    }

    var jwt = event.data
    //do something with the token...
 }

Таким образом, domain1.com и domain2.com могут совместно использовать файлы cookie/localStorage. Откройте Chrome->Проверить->Ресурсы->Локальное хранилище, и вы увидите, например, на account.google.com общую информацию (там много полей данных).

JWT автономен и подписан ключом сервера. Он содержит пользовательские данные, а целостность и личность эмитента могут быть проверены.

Посетите https://github.com/Aralink/ssojwt, чтобы увидеть реализацию SSO таким образом, и решение всех проблем с разными браузерами

Это общая схема, используемая Google. Если вы просмотрите код gmail или youtube, вы увидите много вещей и других дополнительных полей. Google также добавляет ограничение происхождения. Если вы хотите использовать accounts.google.com систему единого входа, вам необходимо зарегистрироваться в приложениях Google, получить идентификатор интеграции и указать свои авторизованные источники.

person pedrofb    schedule 01.06.2016
comment
Не могли бы вы подробно рассказать, как эти localStorage читаются при первом доступе к YouTube после входа в gmail? - person chanchal118; 02.06.2016
comment
Спасибо тебе за это. Я использовал это в качестве стратегии единого входа для своих приложений. - person wobsoriano; 25.04.2020