2016-12-30 19 views
0

我注意到一個網站在DOM的腳本標記中顯示我的電子郵件,它引發了我的好奇心。我相信這是谷歌加,但我很好奇,要了解網站訪問登錄時你有的Gmail郵件Javascript google plus api?電子郵件引起關注

你知道這個API是什麼以及它的工作原理?

<script> 
window.__SSR = {c: 25.0 ,si:1,e:'[email protected]',dn:'myFIRSTname 
lastNAME',a:'bubble',at:'AEIZW7RgsJq10Op\/wP0ZzQ+m5j2k5IHLQYFn30BdkVKqfe6uNFdTaBsxUcAFbcSjHw39naaaaaaa3aDaysPCWuNIg6kFflTylDqdUS+zz+GE\x3d',ld:[null,[1,25,[] 
,1,90] 
] 
,r:'https:\/\/www.websiteIvisited.com\/',s:'widget',annd: 2.0 ,bp: {}, 
id:'https:\/\/www.websiteIvisited.com\/'}; 
document.addEventListener && document.addEventListener('DOMContentLoaded', function() 
{gapi.inline.tick('wdc', new Date().getTime());}, false); 
</script> 

回答

0

這個API被稱爲「谷歌登入的網站」

它是一種非常簡單的API和google摘要最重lifting.Here的是他們是如何做到這一點

1。 Web開發人員只是增加了它處理所有的谷歌登錄東西

<script src="https://apis.google.com/js/platform.js"></script> 

2.然後開發商把他CLIENT_ID(唯一的開發者和網站)和範圍platform.js(部O f用戶信息。他們希望訪問)。有很多方法,但大多數網站的使用<meta>標籤

<meta name="google-signin-scope" content="profile email"> 
<meta name="google-signin-client_id" content="CLIENT_ID.apps.googleusercontent.com"> 

3.將登錄button.Again很多選擇,但對於那些懶惰的開發者谷歌給出了platform.js將解析標記語法當您訪問的頁面platform.js將解析這些元標籤來記錄客戶端ID和scope.Then它創建登錄按鈕轉換成一個漂亮的按鈕,谷歌logo.Note的data-onsuccess="onSignIn"部分

<div class="g-signin2" data-onsuccess="onSignIn" data-theme="dark"></div> 

4.Now和綁定一個點擊處理程序,爲您顯示一個用於登錄的彈出窗口。單擊它時,將打開一個帶有URL欄的彈出窗口鎖定這是一個安全的窗口,其他網站無法看到它的內容。成功登錄後,platform.js會在數據到達時向google服務器請求數據,並關閉彈出窗口,並使用包含所有數據的參數調用onSignIn.Rest只是函數調用

<script> 
    function onSignIn(googleUser) { 
    var profile = googleUser.getBasicProfile(); 
    alert('Full Name: ' + profile.getName()); 
    alert('Given Name: ' + profile.getGivenName()); 
    alert('Family Name: ' + profile.getFamilyName()); 
    alert("Email: " + profile.getEmail()); 
    }; 
</script> 

此信息。得到您的網站(通過ajax或表單),然後插入一個動態創建的腳本。