เพิ่มพรอมต์ One Tap ลงในเว็บไซต์เพื่อให้ผู้ใช้ลงชื่อสมัครใช้หรือลงชื่อเข้าใช้เว็บแอป ใช้ HTML และ JavaScript เพื่อแสดงผลและปรับแต่งพรอมต์
ข้อกำหนดเบื้องต้น
ทําตามขั้นตอนที่อธิบายไว้ในการตั้งค่าเพื่อกําหนดค่าหน้าจอขอความยินยอม OAuth รับรหัสไคลเอ็นต์ และโหลดไลบรารีของไคลเอ็นต์
เพิ่มปุ่มลงชื่อเข้าใช้ด้วย Google ไปยังหน้าเข้าสู่ระบบ
การแสดงผลพรอมต์
วางข้อมูลโค้ดลงในหน้าเว็บที่คุณต้องการให้แสดง One Tap
HTML
แสดงข้อความแจ้งการแตะครั้งเดียว โดยส่งคืนข้อมูลเข้าสู่ระบบ JWT ไปยังปลายทางการเข้าสู่ระบบ
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-login_uri="https://your.domain/your_login_endpoint"
data-your_own_param_1_to_login="any_value"
data-your_own_param_2_to_login="any_value">
</div>
แอตทริบิวต์ data-login_uri คือ URI ของปลายทางการเข้าสู่ระบบของเว็บแอป คุณสามารถเพิ่มแอตทริบิวต์ข้อมูลที่กำหนดเอง ซึ่งจะส่งไปยังปลายทางการเข้าสู่ระบบพร้อมกับโทเค็นรหัสที่ Google ออกให้
คุณอาจใช้แอตทริบิวต์ data-skip_prompt_cookie และคุกกี้เพื่อควบคุมว่าจะแสดงข้อความแจ้งให้ใช้ One Tap ในหน้า HTML แบบคงที่ซึ่งคุณไม่สามารถเปลี่ยนเนื้อหาได้หรือไม่ หากตั้งค่าคุกกี้ที่ระบุไว้ ระบบจะไม่แสดงข้อความแจ้ง
ใช้แอตทริบิวต์ data-context ที่ไม่บังคับเพื่อเปลี่ยนข้อความที่ใช้ใน
ชื่อพรอมต์ เช่น data-context: "signup" เปลี่ยน "ลงชื่อเข้าใช้" เป็น
"ลงชื่อสมัครใช้"
โดยค่าเริ่มต้น ข้อความแจ้งแบบแตะครั้งเดียวจะปิดโดยอัตโนมัติหากผู้ใช้คลิก
ภายนอกข้อความแจ้ง คุณปิดใช้ลักษณะการทำงานนี้ได้หากตั้งค่าแอตทริบิวต์
data-cancel_on_tap_outside เป็น "เท็จ"
ดูรายการแอตทริบิวต์ที่รองรับทั้งหมดได้ในข้อมูลอ้างอิงของ g_id_onload
JavaScript
แสดงข้อความแจ้งการแตะครั้งเดียว โดยส่งคืนข้อมูลเข้าสู่ระบบ JWT ไปยังเครื่องจัดการ JavaScript Callback ของเบราว์เซอร์
<script>
window.onload = function () {
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: 'YOUR_CALLBACK_HANDLER'
});
google.accounts.id.prompt();
}
</script>
หากต้องการกำหนดค่าข้อความแจ้งแบบแตะครั้งเดียวใน JavaScript คุณต้องเรียกใช้เมธอด
initialize() ก่อน จากนั้นเรียกใช้เมธอด prompt() เพื่อแสดง UI ของพรอมต์
ใช้ช่อง context (ไม่บังคับ) เพื่อเปลี่ยนข้อความที่ใช้ในชื่อพรอมต์
เช่น context: 'signup' เปลี่ยน "ลงชื่อเข้าใช้" เป็น "ลงชื่อสมัครใช้"
โดยค่าเริ่มต้น ข้อความแจ้งแบบแตะครั้งเดียวจะปิดโดยอัตโนมัติหากผู้ใช้คลิก
ภายนอกข้อความแจ้ง คุณปิดใช้ลักษณะการทำงานนี้ได้หากตั้งค่าพร็อพเพอร์ตี้ cancel_on_tap_outside เป็น "เท็จ"
ดูรายการตัวเลือกข้อมูลทั้งหมดได้ในidConfigurationอ้างอิง
สถานะพรอมต์
ใช้ฟังก์ชัน Callback ของ JavaScript เพื่อฟังการแจ้งเตือนสถานะ UI ของพรอมต์
ระบบจะส่งการแจ้งเตือนในกรณีต่อไปนี้
ช่วงเวลาที่แสดง: เกิดขึ้นหลังจากเรียกใช้เมธอด
prompt()การแจ้งเตือนมีค่าบูลีนเพื่อระบุว่า UI แสดงอยู่หรือไม่ช่วงที่ข้าม: กรณีนี้เกิดขึ้นเมื่อมีการปิดข้อความแจ้งแบบ One Tap โดยการยกเลิกอัตโนมัติ การยกเลิกด้วยตนเอง หรือเมื่อ Google ไม่สามารถออกข้อมูลเข้าสู่ระบบ เช่น เมื่อมีการออกจากระบบ Google ในเซสชันที่เลือก
ในกรณีนี้ เราขอแนะนำให้คุณดำเนินการต่อกับผู้ให้บริการข้อมูลประจำตัวรายถัดไป หากมี
ช่วงเวลาที่ปิด: เหตุการณ์นี้เกิดขึ้นเมื่อ Google ดึงข้อมูล ข้อมูลเข้าสู่ระบบได้สำเร็จ หรือผู้ใช้ต้องการหยุดขั้นตอนการดึงข้อมูลเข้าสู่ระบบ ตัวอย่างเช่น เมื่อผู้ใช้เริ่มป้อนชื่อผู้ใช้และรหัสผ่านลงใน กล่องโต้ตอบการเข้าสู่ระบบ คุณสามารถเรียกใช้เมธอด
google.accounts.id.cancel()เพื่อ ปิด One Tap และทริกเกอร์ช่วงเวลาที่ถูกปิดได้
HTML
ใช้แอตทริบิวต์ data-moment_callback เพื่อระบุฟังก์ชันเรียกกลับของ JavaScript ต้องมีตัวแฮนเดิลการเรียกกลับเพื่อรับการแจ้งเตือน
<html>
<head>
<script>
function continueWithNextIdp(notification) {
if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
// try Next provider if One Tap is not displayed or skipped
}
}
</script>
</head>
<body>
...
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-login_uri="https://your.domain/your_login_endpoint"
data-moment_callback="continueWithNextIdp"
</div>
...
</body>
</html>
หากต้องการช่วยให้ผู้ใช้ลงชื่อเข้าใช้หรือลงชื่อสมัครใช้ได้ คุณสามารถสื่อสารกับ ผู้ให้บริการข้อมูลประจำตัวหลายรายเพื่อค้นหาข้อมูลเข้าสู่ระบบที่ใช้ได้ คุณอาจต้องการทราบสถานะ UI ของพรอมต์เพื่อให้เรียกผู้ให้บริการข้อมูลประจำตัวรายถัดไปได้
JavaScript
ส่งตัวแฮนเดิล Callback เป็นพารามิเตอร์ไปยัง google.accounts.id.prompt,
โดยใช้ฟังก์ชันลูกศรเพื่อจัดการการอัปเดตการแจ้งเตือน
<script>
window.onload = function () {
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: 'YOUR_CALLBACK_HANDLER'
});
google.accounts.id.prompt((notification) => {
if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
// try next provider if OneTap is not displayed or skipped
}
});
}
</script>
ปุ่มและพรอมต์
ปุ่มลงชื่อเข้าใช้ด้วย Google และข้อความแจ้ง One Tap อาจแสดงร่วมกัน ในหน้าเดียว
HTML
แสดงทั้งปุ่มลงชื่อเข้าใช้ด้วย Google และข้อความแจ้ง One Tap โดยใส่ทั้งองค์ประกอบ g_id_onload และ g_id_signin
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-context="signin"
data-ux_mode="redirect"
data-login_uri="https://your.domain/your_login_endpoint"
data-itp_support="true">
</div>
<div class="g_id_signin"
data-type="standard"
data-shape="rectangular"
data-theme="outline"
data-text="signin_with"
data-size="large"
data-logo_alignment="left">
</div>
JavaScript
แสดงปุ่มลงชื่อเข้าใช้ด้วย Google และข้อความแจ้ง One Tap โดยเรียกใช้ทั้งฟังก์ชัน renderButton() และ prompt() พร้อมกัน
<script>
window.onload = function () {
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: 'YOUR_CALLBACK_HANDLER'
});
const parent = document.getElementById('google_btn');
google.accounts.id.renderButton(parent, {theme: "filled_blue"});
google.accounts.id.prompt();
}
</script>
อย่าบัง One Tap
ส่วนนี้จะมีผลเฉพาะเมื่อปิดใช้ FedCM เท่านั้น เมื่อเปิดใช้ FedCM แล้ว เบราว์เซอร์จะแสดงข้อความแจ้งผู้ใช้ที่ด้านบนของเนื้อหาในหน้า
Google One Tap ต้องไม่ถูกเนื้อหาอื่นบดบังเพื่อให้ผู้ใช้ปลายทางเห็นข้อมูลทั้งหมดที่แสดง มิเช่นนั้น ระบบอาจทริกเกอร์หน้าต่างป๊อปอัปในบางกรณี
ตรวจสอบเลย์เอาต์หน้าเว็บและพร็อพเพอร์ตี้ z-index ขององค์ประกอบอีกครั้งเพื่อให้แน่ใจว่า Google One Tap จะไม่ถูกเนื้อหาอื่นบดบังในทุกกรณี การเปลี่ยนแปลงโฟลว์ UX อาจเกิดขึ้นแม้ว่าจะครอบคลุมพิกเซลเดียวที่ขอบก็ตาม
การตอบกลับเกี่ยวกับข้อมูลเข้าสู่ระบบ
ในการตอบกลับข้อมูลเข้าสู่ระบบจะมี JWT ที่ Google ลงนาม ระบบจะส่งคืนการตอบกลับ ไปยังเบราว์เซอร์โดยใช้ฟังก์ชันเรียกกลับของ JavaScript หรือไปยัง แพลตฟอร์มของคุณผ่านการเปลี่ยนเส้นทางไปยังปลายทางการเข้าสู่ระบบ
การเรียกกลับของ JS
ใช้ HTML หรือ JavaScript เพื่อกำหนดค่าการเรียกกลับ
HTML
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-callback="YOUR_CALLBACK_HANDLER"
</div>
JavaScript
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: 'YOUR_CALLBACK_HANDLER'
});
ตัวอย่างเช่น handleCredentialResponse จะถอดรหัส JWT และพิมพ์ฟิลด์โทเค็น
บางส่วนของรหัสไปยังคอนโซล
<script>
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: handleCredentialResponse
});
function handleCredentialResponse(response) {
const responsePayload = decodeJwtResponse(response.credential);
console.log("ID: " + responsePayload.sub);
console.log('Full Name: ' + responsePayload.name);
console.log('Given Name: ' + responsePayload.given_name);
console.log('Family Name: ' + responsePayload.family_name);
console.log("Image URL: " + responsePayload.picture);
console.log("Email: " + responsePayload.email);
}
function decodeJwtResponse(token) {
let base64Url = token.split('.')[1];
let base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
let jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
}).join(''));
return JSON.parse(jsonPayload);
}
</script>
เปลี่ยนเส้นทาง
หากต้องการส่งคืนข้อมูลเข้าสู่ระบบไปยังปลายทางการเข้าสู่ระบบของแพลตฟอร์ม ให้เพิ่ม URL ไปยังการตั้งค่าURI การเปลี่ยนเส้นทางที่ได้รับอนุญาตของเว็บไคลเอ็นต์ OAuth 2.0
ใช้ HTML หรือ JavaScript เพื่อกำหนดค่า URI เปลี่ยนเส้นทาง
HTML
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-ux_mode="redirect"
data-login-uri="YOUR_LOGIN_URI"
</div>
JavaScript
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
ux_mode: 'redirect',
login_uri: 'YOUR_LOGIN_URI'
});