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" οnclick="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>

 

转载于:https://www.cnblogs.com/zousaili/p/9406886.html