youtube如何在不重定向的情况下登录到Gmail帐户? [英] How youtube gets logged in to gmail account without getting redirected?

问题描述

第1步:我登录了我的Gmail帐户.浏览器实际上重定向到accounts.google.com.所以我在那里登录并重定向回已登录的gmail

Step 1: i logged into my gmail account. Browser actually redirects to accounts.google.com. So i logged in there and redirected back to gmail logged in

步骤2:现在，在浏览器中，键入youtube.com.没有任何重定向，我使用gmail帐户登录了youtube.

Step 2: Now in browser i type youtube.com. Without any redirects i get logged into youtube with the gmail account.

Youtube是一个完全不同的域.它如何与accounts.google.com通信而不进行任何重定向?我通过Chrome开发者工具检查了网络请求，但没有看到这样的重定向！

Youtube is a complete different domain. How it communicates with accounts.google.com without any redirect? I checked network request through Chrome developer tools but see no such redirect!

推荐答案

这是一种技术解决方案，允许使用中央sso域(accounts.google.com)在两个或更多的网站(例如youtube或gmail)之间进行跨域通信

This is the technical solution scheme to allow cross domain communication between two o more websites like youtube or gmail using a central sso domain (accounts.google.com)

1)使用gmail登录重定向到account.google.com，识别您的身份，并使用您的帐户信息发布身份验证令牌(JWT格式).令牌存储在浏览器的localStorage中

1) Login in gmail redirects to accounts.google.com, identifies you and issue an authentication token (JWT format) with your account information. The token is stored in browser localStorage

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

2)Youtube检查account.google.com localStorage寻找身份验证令牌.如果找到，则允许您输入.

2) Youtube checks accounts.google.com localStorage looking for auth tokens. If found, allows you to enter.

可以使用中间域accounts.google.com在域之间共享Cookie和localStorage.在主页上嵌入iframe，它可以访问cookie并将消息发送到主窗口.

Cookies and localStorage can be shared between domains using an intermediate domain accounts.google.com. On the home page is embedded an iframe, which accesses cookies and sends messages to the main.

//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的消息发送到父页面

When iframe is loaded, sends a message with the jwt to parent page

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-> Inspect->资源->本地存储，例如，在accounts.google.com中将看到共享信息(有很多数据字段).

So domain1.com and domain2.com can share cookies/localStorage in this way. Open Chrome->Inspect->Resources->Local storage and you will see for example in accounts.google.com the shared info (there are many data fields).

JWT是自包含的，并用服务器密钥签名.它包含用户数据，并且可以验证发行人的完整性和身份

JWT is self contained and signed with server key. It contains the user data, and integrity and identity of the issuer can be verified

查看 https://github.com/Aralink/ssojwt ，以了解SSO的实现这样，并解决了不同浏览器的所有问题

Check out https://github.com/Aralink/ssojwt to see an implementation of SSO in this way, and resolving all issues with the different browsers

这是google使用的一般架构.如果您浏览gmail或youtube代码，则会看到很多内容和其他附加字段. Google还添加了原产地限制.如果要使用accounts.google.com SSO，则必须在google应用中注册，获取集成ID并指定授权的来源

This is the general schema used by google. If you browse the gmail or youtube code you will see many things and other additional fields. Google also add a origin restriction. If you want to use the accounts.google.com SSO you have to register in google apps, get an integration ID and specify your authorized origins

这篇关于youtube如何在不重定向的情况下登录到Gmail帐户?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！