這裡有新版 Google 登入教學，加上了Firebase紀錄的功能，更加完整

 本教學無須用到網頁後端

 在Google官方的引導及文件寫得算是很詳細清楚的
Google Sign-In Website

 1.首先在<head></head>中加入google函式庫及客戶端ID
  (紅字的部分加入你的google憑證)
code
<script src="https://apis.google.com/js/platform.js" async defer></script>
<meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">
2.接著加入登入及登出按鈕
  這裡的登出按鈕僅為一個anchor tag，主要是用來觸發onclick事件
code
//登入
<div class="g-signin2" data-onsuccess="onSignIn"></div>
//登出
<a class="g-signout2" href="#" onclick="signOut();">Sign out</a>





登入會像這個樣子，這是最基本型的登入按鈕


3.加入javascript function處理事件，其實官網都是有附完整程式碼的，也可以直接參考官網就好。
  在登入後，能取得以下幾項使用者資料，並不算多。
  
  而登出，相較之下就簡單許多了。
code
<script>
function onSignIn(googleUser) {
  var profile = googleUser.getBasicProfile();
  console.log('ID: ' + profile.getId()); 
  console.log('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()); 
}
    
 $.get("https://script.google.com/macros/s/Your_Sheet_ID/exec", {
                "name": profile.getName(),
                "email": profile.getEmail(),
   });
}

function signOut() {
    var auth2 = gapi.auth2.getAuthInstance();
    auth2.signOut().then(function () {
      console.log('User signed out.');
    });
  }
</script>
整體來說，Google這個整合的登入方式非常的簡單且安全，加入方式也非常Easy，如果你要做的網頁沒有涉及太過複雜的元素，或許可以考慮用此種登入系統，配合資料庫甚至我使用Google Sheet做資料庫，在登入後回傳特定用戶的Email就可驗證，畢竟Email不會有重複值。

 所以如果你嫌後端整合登入passport.js, oauth 或是 local 端自建登入帳號密碼麻煩，這將成為你的一個好選擇!
(以上皆為實際測試研究，如說明有誤請留言或私訊告知我，感謝 !)

Tags

Partical Weng

Post a Comment

張貼留言

較新的 較舊