เพิ่มข้อความแจ้งแบบแตะเพียงครั้งเดียวลงในเว็บไซต์เพื่อให้ผู้ใช้ลงชื่อสมัครใช้หรือลงชื่อเข้าใช้เว็บแอปได้ ใช้ 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-context
เพื่อเปลี่ยนข้อความที่ใช้ในชื่อพรอมต์
เช่น data-context: "signup"
เปลี่ยน "ลงชื่อเข้าใช้" เป็น "ลงชื่อสมัครใช้"
ดูรายการแอตทริบิวต์ทั้งหมดที่รองรับได้ที่g_id_onload
ข้อมูลอ้างอิง
JavaScript
แสดงข้อความแจ้งแบบแตะครั้งเดียว โดยส่งข้อมูลเข้าสู่ระบบ JWT กลับไปยังตัวแฮนเดิลการเรียกกลับ JavaScript ของเบราว์เซอร์
<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'
เปลี่ยน "ลงชื่อเข้าใช้" เป็น "ลงชื่อสมัครใช้"
ดูรายการตัวเลือกข้อมูลทั้งหมดได้ที่ข้อมูลอ้างอิง idConfiguration
สถานะพรอมต์
ใช้ฟังก์ชัน Callback ของ JavaScript เพื่อรอการแจ้งเตือนสถานะ UI ของพรอมต์
ระบบจะส่งการแจ้งเตือนสำหรับช่วงเวลาต่อไปนี้
การแสดงผล: การดำเนินการนี้จะเกิดขึ้นหลังจากเรียกใช้เมธอด
prompt()
การแจ้งเตือนมีค่าบูลีนเพื่อระบุว่า UI แสดงอยู่หรือไม่ช่วงเวลาที่ข้าม: กรณีนี้เกิดขึ้นเมื่อการยกเลิกอัตโนมัติ การยกเลิกด้วยตนเอง หรือเมื่อ Google ออกข้อมูลเข้าสู่ระบบไม่ได้ เช่น เมื่อมีการออกจากระบบ Google ในเซสชันที่เลือก
ในกรณีนี้ เราขอแนะนำให้คุณเปลี่ยนไปใช้ผู้ให้บริการข้อมูลประจำตัวรายถัดไป หากมี
ช่วงเวลาที่ปิด: เกิดขึ้นเมื่อ Google ดึงข้อมูลเข้าสู่ระบบได้สําเร็จ หรือผู้ใช้ต้องการหยุดขั้นตอนการดึงข้อมูลเข้าสู่ระบบ เช่น เมื่อผู้ใช้เริ่มป้อนชื่อผู้ใช้และรหัสผ่านในกล่องโต้ตอบการเข้าสู่ระบบ คุณสามารถเรียกใช้เมธอด
google.accounts.id.cancel()
เพื่อปิดข้อความแจ้งแบบแตะครั้งเดียวและทริกเกอร์ช่วงเวลาที่ปิด
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
ส่งตัวแฮนเดิลการเรียกคืนเป็นพารามิเตอร์ไปยัง 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 และข้อความแจ้งแบบแตะครั้งเดียวอาจแสดงร่วมกันในหน้าเดียว
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'
});