การผสานรวม Google Sign-In เข้ากับเว็บแอปของคุณ

Google Sign-In จะจัดการโฟลว์ OAuth 2.0 และวงจรโทเค็น ซึ่งช่วยให้การผสานรวมกับ Google APIs ง่ายขึ้น ผู้ใช้มีตัวเลือกในการเพิกถอนสิทธิ์เข้าถึงแอปพลิเคชันได้ทุกเมื่อ

เอกสารนี้อธิบายวิธีผสานรวมการลงชื่อเข้าใช้ด้วยบัญชี Google ขั้นพื้นฐานให้เสร็จสมบูรณ์

สร้างข้อมูลเข้าสู่ระบบการให้สิทธิ์

แอปพลิเคชันที่ใช้ OAuth 2.0 เพื่อเข้าถึง Google APIs ต้องมีข้อมูลเข้าสู่ระบบการให้สิทธิ์ ที่ระบุแอปพลิเคชันไปยังเซิร์ฟเวอร์ OAuth 2.0 ของ Google ขั้นตอนต่อไปนี้จะอธิบายวิธี สร้างข้อมูลเข้าสู่ระบบสำหรับโปรเจ็กต์ จากนั้นแอปพลิเคชันจะใช้ข้อมูลเข้าสู่ระบบเพื่อเข้าถึง API ที่คุณเปิดใช้สำหรับโปรเจ็กต์นั้นได้

  1. Go to the Clients page.
  2. คลิกสร้างไคลเอ็นต์
  3. เลือกประเภทแอปพลิเคชันเป็นเว็บแอปพลิเคชัน
  4. ตั้งชื่อไคลเอ็นต์ OAuth 2.0 แล้วคลิกสร้าง

หลังจากกำหนดค่าเสร็จแล้ว ให้จดรหัสไคลเอ็นต์ที่สร้างขึ้น คุณจะต้องใช้รหัสไคลเอ็นต์เพื่อทำขั้นตอนถัดไปให้เสร็จสมบูรณ์ (ระบบจะสร้างรหัสลับไคลเอ็นต์ด้วย แต่คุณจะใช้ได้เฉพาะสำหรับการดำเนินการฝั่งเซิร์ฟเวอร์)

โหลดไลบรารีแพลตฟอร์ม Google

คุณต้องรวมไลบรารีแพลตฟอร์มของ Google ไว้ในหน้าเว็บที่ผสานรวม การลงชื่อเข้าใช้ด้วย Google

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

ระบุรหัสไคลเอ็นต์ของแอป

ระบุรหัสไคลเอ็นต์ที่คุณสร้างสำหรับแอปใน Google Developers Console ด้วยgoogle-signin-client_idองค์ประกอบเมตา

<meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">

เพิ่มปุ่ม Google Sign-In

วิธีที่ง่ายที่สุดในการเพิ่มปุ่มลงชื่อเข้าใช้ด้วย Google ลงในเว็บไซต์คือการใช้ ปุ่มลงชื่อเข้าใช้ที่แสดงผลโดยอัตโนมัติ คุณสามารถ เพิ่มปุ่มที่จะกำหนดค่าตัวเองโดยอัตโนมัติให้มีข้อความ โลโก้ และสีที่เหมาะสมสำหรับสถานะการลงชื่อเข้าใช้ของผู้ใช้และขอบเขตที่คุณขอได้ด้วยโค้ดเพียงไม่กี่บรรทัด

หากต้องการสร้างปุ่มลงชื่อเข้าใช้ด้วย Google ที่ใช้การตั้งค่าเริ่มต้น ให้เพิ่มองค์ประกอบ div ที่มีคลาส g-signin2 ลงในหน้าลงชื่อเข้าใช้

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

รับข้อมูลโปรไฟล์

หลังจากลงชื่อเข้าใช้ผู้ใช้ด้วย Google โดยใช้ขอบเขตเริ่มต้นแล้ว คุณจะ เข้าถึงรหัส Google, ชื่อ, URL โปรไฟล์ และอีเมลของผู้ใช้ได้

หากต้องการเรียกข้อมูลโปรไฟล์ของผู้ใช้ ให้ใช้เมธอด getBasicProfile() 

function onSignIn(googleUser) {
  var profile = googleUser.getBasicProfile();
  console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
  console.log('Name: ' + profile.getName());
  console.log('Image URL: ' + profile.getImageUrl());
  console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.
}

ให้ผู้ใช้ออกจากระบบ

คุณสามารถอนุญาตให้ผู้ใช้ลงชื่อออกจากแอปโดยไม่ต้องลงชื่อออกจาก Google ได้โดย เพิ่มปุ่มหรือลิงก์ลงชื่อออกจากเว็บไซต์ หากต้องการสร้างลิงก์ลงชื่อออก ให้แนบฟังก์ชันที่เรียกใช้เมธอด GoogleAuth.signOut() กับเหตุการณ์ onclick ของลิงก์

<a href="#" onclick="signOut();">Sign out</a>
<script>
  function signOut() {
    var auth2 = gapi.auth2.getAuthInstance();
    auth2.signOut().then(function () {
      console.log('User signed out.');
    });
  }
</script>