<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://apis.google.com/js/platform.js" async="async"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<meta name="google-signin-client_id" content="{yourClientID}">
<title>Login with Google</title>
<link href="/style.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<center>
<div id ="login">
<h4>Please login with google first.</h4>
<div class="g-signin2" data-onsuccess="onSignIn"></div>
</div>
</center>
<script>
var url = location.href;
var getid = "";//參數-code
//以下取得參數
if(url.indexOf('?')!=-1)
{
//在此直接將各自的參數資料切割放進ary中
var ary = url.split('?')[1].split('&');
//此時ary的內容為：
//ary[0] = 'id=U001'，ary[1] = 'name=GQSM'
//下迴圈去搜尋每個資料參數
for(i=0;i<=ary.length-1;i++)
{
//如果資料名稱為id的話那就把他取出來
if(ary[i].split('=')[0] == 'id'){
getid = ary[i].split('=')[1];
}
}
}
// 登入之後
function onSignIn(googleUser) {
var id_token = googleUser.getAuthResponse().id_token;
console.log(getid);
var formData = new FormData();
formData.append('token', id_token);
formData.append('getid', getid);
var name = "";
var uriGAS = "{you gas url}";
$("#login").hide();
fetch(uriGAS, {
method: "POST",
body: formData
}).then(response => response.json())
.then(result => {
var login = result.login;
if(login == true) {
name = result.name;
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut();
alert(" Login successfully, please go back to the APP. ");
window.opener=null;
window.close();
}else{
console.log("error");
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut();
alert("Login error.");
$("#login").show();
}
}) .catch(err => {
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut();
alert(err);
$("#login").show();
});
}
</script>
</body>
</html>
html code