Google第三方網站登錄（JavaScript SDK）

官網：https://developers.google.com/identity/sign-in/web/

一、創建應用

 a、去谷歌控制台創建應用 

   網址：https://accounts.google.com/signin/v2/identifier?service=cloudconsole&passive=1209600&osid=1&continue=https%3A%2F%2Fconsole.developers.google.com%2Fproject%2F_%2Fapiui%2Fapis%2Flibrary%3Fref%3Dhttps%3A%2F%2Fblog.csdn.net%2Fzh_rey%2Farticle%2Fdetails%2F79013290&followup=https%3A%2F%2Fconsole.developers.google.com%2Fproject%2F_%2Fapiui%2Fapis%2Flibrary%3Fref%3Dhttps%3A%2F%2Fblog.csdn.net%2Fzh_rey%2Farticle%2Fdetails%2F79013290&flowName=GlifWebSignIn&flowEntry=ServiceLogin

b、應用配置如圖所示

 

 點擊菜單按鈕-->API和服務-->證書-->鼠標右鍵VantageFX Web客戶端 做如下配置

  1）、授權的jacasvript起源 : 一般是網址

 2）、授權重定向url ：當前頁面的url

二、自定義登錄和注銷

參考：https://blog.csdn.net/zh_rey/article/details/79013290

<button id="customBtn" type="button">Google登錄</button>

<button type="button" onclick="signOut();">Sign out</button>

<script src="https://apis.google.com/js/api:client.js"></script>
<script>
var googleUser = {};
var startApp = function() {
gapi.load('auth2', function() {
auth2 = gapi.auth2.init({
client_id: 'xxxx', //客戶端ID
cookiepolicy: 'single_host_origin',
scope: 'profile' //可以請求除了默認的'profile' and 'email'之外的數據
});
attachSignin(document.getElementById('customBtn'));
});
};

function attachSignin(element) {
auth2.attachClickHandler(element, {},
function(googleUser) {
var profile = auth2.currentUser.get().getBasicProfile();

console.log('ID: ' + profile.getId());
console.log('Full Name: ' + profile.getName());
console.log('Given Name: ' + profile.getGivenName());
console.log('Family Name: ' + profile.getFamilyName());
console.log('Image URL: ' + profile.getImageUrl());
console.log('Email: ' + profile.getEmail());
},
function(error) {
console.log(JSON.stringify(error, undefined, 2));
});
}
startApp();

//注銷
function signOut() {
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function() {
alert('用戶注銷成功');
});
}
</script>