เกี่ยวกับ Codelab นี้
1 ภาพรวม
ใน Codelab นี้ เราจะสร้างหน้าเว็บง่ายๆ ให้ผู้ใช้ลงชื่อเข้าใช้ คุณจะใช้ไลบรารี JavaScript ของ Google Identity Services เพื่อแสดงและปรับแต่งปุ่ม "ลงชื่อเข้าใช้ด้วย Google"
สิ่งที่คุณจะได้เรียนรู้
- วิธีเพิ่มปุ่มลงชื่อเข้าใช้ด้วย Google ลงในหน้าเว็บ
- วิธีตั้งค่าเว็บแอปพลิเคชัน OAuth 2.0
- วิธีถอดรหัสโทเค็นรหัส
- วิธีปรับแต่งปุ่มลงชื่อเข้าใช้ด้วย Google
สิ่งที่คุณต้องมี
- เครื่องมือแก้ไขข้อความและสถานที่สำหรับฝากหน้าเว็บ รวมถึงสภาพแวดล้อมที่เราจะกล่าวถึงใน Codelab นี้
- ทำงานภายในเครื่องเทอร์มินัลบนเครื่องของคุณ หรือ
- โดยใช้แพลตฟอร์มอย่าง Glitch
- โปรเจ็กต์ Google Cloud คุณจะใช้โปรเจ็กต์ที่มีอยู่หรือสร้างใหม่ก็ได้ บัญชีและโปรเจ็กต์ Google Cloud Platform ไม่มีค่าใช้จ่าย
- ความรู้พื้นฐานเกี่ยวกับ HTML, CSS, JavaScript และเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome (หรือเทียบเท่า)
มาเริ่มกันเลย
2 สร้างหน้าลงชื่อเข้าใช้
เพิ่มตัวอย่างโค้ดนี้ลงในไฟล์ชื่อ index.html ได้เลย คุณสามารถดำเนินการดังกล่าวบนเครื่องโดยใช้โปรแกรมแก้ไขข้อความที่คุณชื่นชอบหรือบนแพลตฟอร์มอย่าง Glitch
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://accounts.google.com/gsi/client" async></script>
<script>
function decodeJWT(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);
}
function handleCredentialResponse(response) {
console.log("Encoded JWT ID token: " + response.credential);
const responsePayload = decodeJWT(response.credential);
console.log("Decoded JWT ID token fields:");
console.log(" Full Name: " + responsePayload.name);
console.log(" Given Name: " + responsePayload.given_name);
console.log(" Family Name: " + responsePayload.family_name);
console.log(" Unique ID: " + responsePayload.sub);
console.log(" Profile image URL: " + responsePayload.picture);
console.log(" Email: " + responsePayload.email);
}
</script>
</head>
<body>
<!-- g_id_onload contains Google Identity Services settings -->
<div
id="g_id_onload"
data-auto_prompt="false"
data-callback="handleCredentialResponse"
data-client_id="PUT_YOUR_WEB_CLIENT_ID_HERE"
></div>
<!-- g_id_signin places the button on a page and supports customization -->
<div class="g_id_signin"></div>
</body>
</html>
โค้ดนี้เป็นทั้ง HTML และ JavaScript รวมทั้งทำงานหลายๆ อย่าง:
- กำหนดค่าไลบรารีบริการข้อมูลประจำตัวของ Google นี้ด้วย
g_id_onload - แสดงปุ่มลงชื่อเข้าใช้ด้วย Google โดยใช้
g_id_signin - เพิ่มเครื่องจัดการฟังก์ชัน Callback ของ JavaScript ชื่อ
handleCredentialResponseเพื่อรับข้อมูลรับรองการลงชื่อเข้าใช้ของผู้ใช้จาก Google และ - ฟังก์ชัน
decodeJWTเพื่อแปลงข้อมูลเข้าสู่ระบบ JSON Web Token (JWT) เป็น JSON ธรรมดาเท่านั้น
อาจมีบางอย่างดูผิดปกติเกี่ยวกับ data-client_id="PUT_YOUR_WEB_CLIENT_ID_HERE"
ตอนนี้ให้ไม่ต้องสนใจก่อน เราจะกลับมาพูดอีกครั้งในอีกสักครู่
3 แสดงหน้าเว็บของคุณ
เราจะพูดถึงสภาพแวดล้อม 2 แบบสำหรับการให้บริการ index.html ในเบราว์เซอร์
- การเรียกใช้เว็บเซิร์ฟเวอร์ภายในเครื่องของคุณ
- แพลตฟอร์มระยะไกลอย่าง Glitch
เลือกวิธีที่ถนัดที่สุด หลังการตั้งค่า เราจะใช้ URL เพื่อกำหนดค่าเว็บไคลเอ็นต์ OAuth
ในเครื่องของคุณ
ตรวจสอบว่าได้ติดตั้ง Python3 ในระบบแล้ว การตั้งค่าจะแตกต่างกันไปตามระบบปฏิบัติการและแพลตฟอร์ม โปรดเริ่มต้นด้วยการตั้งค่าและการใช้งาน Python หากจำเป็นต้องติดตั้ง Python ในเครื่อง
เริ่มต้นเว็บเซิร์ฟเวอร์ Python ในไดเรกทอรีที่มี index.html:
$ python3 -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
ขณะนี้เว็บเซิร์ฟเวอร์กำลังรอการเชื่อมต่อสำหรับพอร์ต 8000 และพร้อมที่จะแสดงหน้าลงชื่อเข้าใช้ของคุณ URL คือ
http://localhost:8000
การใช้แพลตฟอร์มระยะไกล
หากคุณเลือกที่จะแก้ไขและโฮสต์หน้าลงชื่อเข้าใช้โดยใช้ Glitch (หรือเทียบเท่า) คุณจะสามารถเปิด index.html ในแผงแสดงตัวอย่างหรือแท็บเบราว์เซอร์ใหม่ได้
โดยปกติแล้ว URL ที่คุณจะใช้คือชื่อโปรเจ็กต์ที่คุณป้อนเมื่อตั้งค่าโปรเจ็กต์ glich.com ตัวอย่างเช่น หากโปรเจ็กต์ Glitch ของคุณมีชื่อว่า gis-example URL จะเป็น https://gis-example.glitch.me แน่นอนว่าคุณจะต้องเลือกชื่อโปรเจ็กต์อื่นและไม่สามารถใช้ชื่อนี้ซ้ำได้ URL คือ
https://<var>your-project-name</var>.glitch.me
โหลดหน้าเว็บ
รอสักครู่...
ก่อนอื่นเราต้องสร้างเว็บไคลเอ็นต์ OAuth 2.0 และกำหนดค่า
คัดลอกหรือจด URL ไว้เพื่อใช้ในขั้นตอนถัดไป
4 ตั้งค่าเว็บไคลเอ็นต์ OAuth
เราจะกำหนดค่า OAuth เพื่อให้ผู้คนลงชื่อเข้าใช้ได้จริงๆ
- คลิกลิงก์นี้เพื่อสร้างไคลเอ็นต์เว็บ OAuth 2.0 หากจำเป็น วิซาร์ดจะช่วยคุณสร้างและตั้งค่าโปรเจ็กต์ Google Cloud ใหม่
- เลือกเว็บแอปพลิเคชันจากเมนูแบบเลื่อนลงประเภทแอปพลิเคชัน
- กดปุ่ม เพิ่ม URI ใต้ ต้นทาง JavaScript ที่ได้รับอนุญาต
- ป้อน URL ที่โฮสต์
index.htmlจากขั้นตอนที่ 3 แสดงหน้าเว็บของคุณโฮสต์ในเครื่องของคุณ
โฮสต์บนแพลตฟอร์มระยะไกล
- กดสร้าง
- คัดลอกรหัสไคลเอ็นต์ใหม่
ขั้นตอนสุดท้าย
เราต้องกลับไปอัปเดต index.html เพื่อใช้รหัสไคลเอ็นต์ใหม่ ในเครื่องมือแก้ไข ให้แทนที่ PUT_YOUR_WEB_CLIENT_ID_HERE ด้วยรหัสไคลเอ็นต์ใหม่ รหัสไคลเอ็นต์มีลักษณะดังนี้ 1234567890-abc123def456.apps.googleusercontent.com
ลงชื่อเข้าใช้กันเลย
5 ลงชื่อเข้าใช้
ก่อนอื่น ให้เปิด Developer Console ของเบราว์เซอร์ ข้อผิดพลาดใดๆ และข้อมูลเข้าสู่ระบบโทเค็น JWT ID ที่ Google ส่งคืนมาจะบันทึกไว้ที่นี่
กดปุ่ม ลงชื่อเข้าใช้ด้วย Google
สิ่งที่จะเกิดขึ้นต่อไปอาจแตกต่างกันไปเล็กน้อย
- หากขณะนี้คุณลงชื่อเข้าใช้บัญชี Google มากกว่า 1 บัญชี ระบบจะแจ้งให้คุณเลือกบัญชีที่จะใช้ลงชื่อเข้าใช้เว็บแอปนี้
- หากลงชื่อเข้าใช้เว็บแอปนี้เป็นครั้งแรก ระบบจะแสดงข้อความแจ้งความยินยอม
หลังจากเลือกที่จะเลือกบัญชีและให้ความยินยอมแล้ว Google จะตอบกลับด้วย JWT ฟังก์ชัน Callback handleCredentialResponse ที่ทำงานอยู่ในเบราว์เซอร์ได้รับ JWT
ใน Codelab นี้ เราจะถอดรหัสและพิมพ์เนื้อหา JWT ในเว็บแอปเวอร์ชันที่ใช้งานจริง คุณจะต้องยืนยันและใช้ JWT ที่ถอดรหัสแล้วเพื่อทำสิ่งที่มีความหมายมากขึ้น เช่น การสร้างบัญชีใหม่บนแพลตฟอร์มแบ็กเอนด์ของคุณ หรือการสร้างเซสชันใหม่สำหรับผู้ใช้
6 ตรวจสอบโทเค็น JWT ID
JWT ที่เข้ารหัสจะได้รับการบันทึกไว้ในคอนโซลของนักพัฒนาซอฟต์แวร์ หลังจากถอดรหัส JWT แล้ว ระบบจะบันทึกฟิลด์โทเค็นรหัสที่ใช้กันทั่วไปบางช่องไปยังคอนโซลด้วย
คุณใช้เครื่องมือออนไลน์ เช่น jwt.io เพื่อถอดรหัส JWT ได้
นอกจากนี้ คุณยังใช้ jq ในเทอร์มินัลเพื่อถอดรหัสและดู JWT ได้ด้วย (คุณอาจต้องใช้ตัวจัดการแพ็กเกจเพื่อติดตั้ง jq) ก่อนอื่นให้วางสตริง JWT ที่เข้ารหัสลงในเครื่องหมายคำพูดคู่
$ JWT="eyJhbGciOiJSUzI1Ni ... Hecz6Wm4Q"
แล้วใช้คำสั่งนี้เพื่อถอดรหัส
$ echo $JWT | jq -R 'split(".") | .[0],.[1] | @base64d | fromjson'
{
"alg": "RS256",
"kid": "c7e04465649ffa606557650c7e65f0a87ae00fe8",
"typ": "JWT"
}
{
"iss": "https://accounts.google.com",
"azp": "123456789012-s0meRand0mStR1nG.apps.googleusercontent.com",
"aud": "123456789012-s0meRand0mStR1nG.apps.googleusercontent.com",
"sub": "2718281828459045",
"email": "example@example.com",
"email_verified": true,
"nbf": 1744645148,
"name": "Brian Daugherty",
"picture": "https://lh3.googleusercontent.com/a/08a898b88ca4d6407be652d8",
"given_name": "Brian",
"family_name": "Daugherty",
"iat": 1744645448,
"exp": 1744649048,
"jti": "52cd32984b30e178aa88bc2e75e63e055a461fcf"
}
คีย์และค่าบางอย่าง เช่น อีเมล ชื่อ และรูปภาพ ควรเข้าใจได้ง่าย ค่าอื่นๆ จะใช้เพื่อยืนยัน JWT ก่อนที่คุณจะใช้งาน รับข้อมูลผู้ใช้จากโทเค็นรหัสมีรายละเอียดเพิ่มเติมเกี่ยวกับความหมายของทุกช่อง
7 ปรับแต่งปุ่ม
การวางปุ่มลงชื่อเข้าใช้เริ่มต้นในหน้าเว็บสามารถทำได้ดังนี้
<div class="g_id_signin"></div>
และคุณจะเห็นปุ่มนี้
แต่คุณอาจต้องการเปลี่ยนสี ขนาด หรือข้อความให้เข้ากับธีมของเว็บไซต์
เราจะเปลี่ยนสีปุ่มเป็นสีน้ำเงินและใช้ข้อความว่าลงชื่อสมัครใช้ด้วย Google แทน
เปิด index.html ค้นหาองค์ประกอบ g_id_signin แล้วเพิ่มแอตทริบิวต์ data-theme="filled_blue" และ data-text="signup_with"
<div
class="g_id_signin"
data-theme="filled_blue"
data-text="signup_with"
></div>
หลังจากบันทึกและโหลดหน้าเว็บซ้ำแล้ว คุณจะเห็นปุ่มสีน้ำเงินพร้อมข้อความใหม่
คุณจะปรับแต่งปุ่มเพิ่มเติมได้ในส่วนแอตทริบิวต์ข้อมูลภาพสำหรับรายการตัวเลือกทั้งหมด
8 แหล่งข้อมูลเพิ่มเติม
ยินดีด้วย
คุณได้เพิ่มปุ่มลงชื่อเข้าใช้ด้วย Google ลงในหน้าเว็บ กำหนดค่าเว็บไคลเอ็นต์ OAuth 2.0 ถอดรหัสโทเค็น JWT ID และเรียนรู้วิธีปรับแต่งรูปลักษณ์ของปุ่ม
ลิงก์เหล่านี้อาจช่วยคุณดำเนินการในขั้นตอนถัดไป
- บริการ Google Identity HTML API
- บริการ Google Identity JavaScript API
- วิธีตั้งค่าลงชื่อเข้าใช้ด้วย Google สำหรับเว็บ
- ยืนยันโทเค็นรหัส Google
- ดูข้อมูลเพิ่มเติมเกี่ยวกับโปรเจ็กต์ Google Cloud ได้ที่นี่
- วิธีการตรวจสอบสิทธิ์ของ Google Identity