Google Sign-In จะจัดการขั้นตอนและวงจรโทเค็น OAuth 2.0 เพื่อลดความซับซ้อนของการผสานรวมกับ Google APIs ผู้ใช้มีตัวเลือกในการเพิกถอนสิทธิ์เข้าถึงแอปพลิเคชันได้ทุกเมื่อ
เอกสารนี้อธิบายวิธีการผสานรวม Google Sign-In ขั้นพื้นฐานให้เสร็จสมบูรณ์
สร้างข้อมูลเข้าสู่ระบบการให้สิทธิ์
แอปพลิเคชันที่ใช้ OAuth 2.0 เพื่อเข้าถึง Google API ต้องมีข้อมูลเข้าสู่ระบบการให้สิทธิ์ที่ระบุแอปพลิเคชันไปยังเซิร์ฟเวอร์ OAuth 2.0 ของ Google ขั้นตอนต่อไปนี้อธิบายวิธีสร้างข้อมูลเข้าสู่ระบบสําหรับโปรเจ็กต์ จากนั้นแอปพลิเคชันจะใช้ข้อมูลเข้าสู่ระบบเพื่อเข้าถึง API ที่คุณเปิดใช้สําหรับโปรเจ็กต์นั้น
- Go to the Credentials page.
- คลิกสร้างข้อมูลเข้าสู่ระบบ > รหัสไคลเอ็นต์ OAuth
- เลือกประเภทแอปพลิเคชันเว็บแอปพลิเคชัน
- ตั้งชื่อไคลเอ็นต์ OAuth 2.0 แล้วคลิก Create (สร้าง)
หลังจากการกําหนดค่าเสร็จสมบูรณ์ ให้สังเกตรหัสไคลเอ็นต์ที่สร้างขึ้น คุณจะต้องใช้รหัสไคลเอ็นต์เพื่อทําขั้นตอนถัดไปให้เสร็จสมบูรณ์ (นอกจากนี้ยังสร้างรหัสลับไคลเอ็นต์ให้คุณอีกด้วย แต่คุณต้องใช้ข้อมูลลับสําหรับการดําเนินการฝั่งเซิร์ฟเวอร์เท่านั้น)
โหลดไลบรารีของ Google Platform
คุณต้องรวมไลบรารี Google Platform ไว้ในหน้าเว็บที่ผสานรวม 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 Sign-In
วิธีที่ง่ายที่สุดในการเพิ่มปุ่ม Google Sign-In ลงในเว็บไซต์คือการใช้ปุ่มลงชื่อเข้าใช้ที่แสดงผลโดยอัตโนมัติ เมื่อใช้โค้ดเพียงไม่กี่บรรทัด ให้เพิ่มปุ่มที่กําหนดค่าตัวเองโดยอัตโนมัติให้มีข้อความ โลโก้ และสีที่เหมาะสมสําหรับสถานะการลงชื่อเข้าใช้ของผู้ใช้และขอบเขตที่คุณขอ
หากต้องการสร้างปุ่ม Google Sign-In ที่ใช้การตั้งค่าเริ่มต้น ให้เพิ่มเอลิเมนต์ 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>