เรากําลังจะ ปิดให้บริการไลบรารีแพลตฟอร์มการลงชื่อเข้าใช้ Google สําหรับเว็บ คลังจะดาวน์โหลดไม่ได้หลังจากวันที่เลิกใช้งาน 31 มีนาคม 2023 แต่ให้ใช้บริการใหม่ของ Google Identity สําหรับเว็บแทน
โดยค่าเริ่มต้น ระบบจะบล็อกรหัสไคลเอ็นต์ที่สร้างขึ้นใหม่ไม่ให้ใช้ไลบรารีแพลตฟอร์มเก่า รหัสลูกค้าที่มีอยู่จะไม่ได้รับผลกระทบ โดยรหัสไคลเอ็นต์ใหม่ที่สร้างขึ้นก่อนวันที่ 29 กรกฎาคม 2022 จะตั้งค่า `plugin_name` เพื่อเปิดใช้ไลบรารี Google Platform ได้

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

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

เอกสารนี้อธิบายวิธีการผสานรวม Google Sign-In พื้นฐานให้สมบูรณ์

สร้างข้อมูลรับรองการอนุญาต

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

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

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

โหลด Google Platform Library

คุณต้องรวม Google Platform Library ในหน้าเว็บของคุณที่รวม Google Sign-In เข้าไว้ด้วยกัน

<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

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

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

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

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

หลังจากที่คุณได้ลงชื่อเข้าใช้ผู้ใช้กับ Google โดยใช้ขอบเขตเริ่มต้น คุณจะสามารถเข้าถึง Google ID, ชื่อ, 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>