ในโมดูลนี้ คุณจะต้องสร้างกลุ่มผู้ใช้ Amazon Cognito เพื่อจัดการบัญชีของผู้ใช้ของคุณ คุณจะต้องปรับใช้หน้าต่างๆ ที่ช่วยให้ลูกค้าลงทะเบียนเป็นผู้ใช้รายใหม่ ตรวจสอบที่อยู่อีเมล และลงชื่อเข้าใช้เว็บไซต์
เมื่อผู้ใช้เข้าชมเว็บไซต์ของคุณ ผู้ใช้จะต้องลงทะเบียนบัญชีผู้ใช้ใหม่ก่อน สำหรับวัตถุประสงค์ของเวิร์กช็อปนี้ เราจะขอให้ผู้ใช้ระบุที่อยู่อีเมลและรหัสผ่านเพื่อลงทะเบียน อย่างไรก็ตาม คุณสามารถกำหนดค่า Amazon Cognito เพื่อกำหนดคุณลักษณะเพิ่มเติมในแอปพลิเคชันของคุณเอง
หลังจากที่ผู้ใช้ได้ส่งข้อมูลการลงทะเบียนของตนแล้ว Amazon Cognito จะส่งอีเมลยืนยันพร้อมรหัสการตรวจสอบไปยังที่อยู่ที่ให้ไว้ หากต้องการยืนยันบัญชี ผู้ใช้จะต้องกลับไปที่เว็บไซต์ของคุณและป้อนที่อยู่อีเมลพร้อมรหัสการตรวจสอบที่ได้รับ นอกจากนี้ คุณยังสามารถยืนยันบัญชีผู้ใช้โดยใช้ Amazon Cognito Console ได้ หากต้องการใช้ที่อยู่อีเมลปลอมสำหรับการทดสอบ
หลังจากที่ผู้ใช้มีบัญชีที่ได้รับการยืนยันแล้ว (ไม่ว่าจะใช้กระบวนการตรวจสอบอีเมลหรือการยืนยันด้วยตนเองผ่านคอนโซล) ผู้ใช้จะสามารถเข้าสู่ระบบได้ เมื่อผู้ใช้เข้าสู่ระบบ ผู้ใช้จะต้องป้อนชื่อผู้ใช้ (หรืออีเมล) และรหัสผ่าน จากนั้นฟังก์ชัน JavaScript จะสื่อสารกับ Amazon Cognito ตรวจสอบความถูกต้องโดยใช้โปรโตดอล Secure Remote Password (SRP) และรับชุด JSON Web Token (JWT) กลับมา JWT จะประกอบด้วยเคลมเกี่ยวกับข้อมูลประจำตัวของผู้ใช้และจะใช้ในโมดูลถัดไปเพื่อตรวจสอบความถูกต้องกับ RESTful API ที่คุณสร้างกับ Amazon API Gateway
ระยะเวลาที่ใช้ในการศึกษาโมดูล: 30 นาที
บริการที่ใช้: Amazon Cognito
เทมเพลต CloudFormation: หากคุณต้องการข้ามไปยังโมดูลถัดไป คุณสามารถเปิดใช้เทมเพลต AWS CloudFormation รายการใดรายการหนึ่งในภูมิภาคเดียวกันกับที่คุณใช้ในโมดูลที่ 1
| ภูมิภาค | เทมเพลต CloudFormation |
|---|---|
| สหรัฐอเมริกาฝั่งตะวันออก (เวอร์จิเนียเหนือ) | เปิดใช้งานสแตก > |
| สหรัฐอเมริกาฝั่งตะวันออก (โอไฮโอ) | เปิดใช้งานสแตก > |
| สหรัฐอเมริกาฝั่งตะวันตก (ออริกอน) | เปิดใช้งานสแตก > |
| สหภาพยุโรป (แฟรงเฟิร์ต) | เปิดใช้งานสแตก > |
| สหภาพยุโรป (ไอร์แลนด์) | เปิดใช้งานสแตก > |
| สหภาพยุโรป (ลอนดอน) | เปิดใช้งานสแตก > |
| เอเชียแปซิฟิก (โตเกียว) | เปิดใช้งานสแตก > |
| เอเชียแปซิฟิก (โซล) | เปิดใช้งานสแตก > |
| เอเชียแปซิฟิก (ซิดนีย์) | เปิดใช้งานสแตก > |
| เอเชียแปซิฟิก (มุมไบ) | เปิดใช้งานสแตก > |
คำแนะนำในการเปิดใช้งาน CloudFormation
เลือกลิงก์ เปิดใช้งานสแตก ด้านบนสำหรับภูมิภาคที่คุณต้องการ
เลือก ถัดไป ในหน้าเลือกเทมเพลต
ระบุชื่อบัคเก็ตเว็บไซต์ของคุณจากโมดูลที่ 1 สำหรับ ชื่อบัคเก็ตเว็บไซต์ (เช่น
wildrydes-yourname) และเลือก ถัดไปหมายเหตุ: คุณต้องระบุชื่อบัคเก็ตเดียวกันกับที่คุณใช้ในโมดูลก่อนหน้านี้ หากคุณระบุชื่อบัคเก็ตที่ไม่มีในระบบหรือคุณไม่มีสิทธิ์ในการเขียน สแตก CloudFormation จะล้มเหลวในระหว่างการสร้าง
ในหน้าตัวเลือก ให้ใช้ค่าเริ่มต้นทั้งหมดตามเดิม และเลือก ถัดไป
ในหน้าตรวจสอบ ให้เลือกกล่องกาเครื่องหมายเพื่อรับทราบว่า CloudFormation จะสร้างทรัพยากร IAM และเลือก สร้าง
เทมเพลตนี้จะใช้ทรัพยากรแบบกำหนดเองเพื่อสร้างกลุ่มผู้ใช้และไคลเอนต์ของ Amazon Cognito รวมถึงสร้างไฟล์กำหนดค่าพร้อมรายละเอียดที่จำเป็นในการเชื่อมต่อกับกลุ่มผู้ใช้นี้ และอัปโหลดลงในบัคเก็ตเว็บไซต์ของคุณ เทมเพลตจะสร้างบทบาทที่ให้สิทธิ์การเข้าถึงเพื่อสร้างทรัพยากรเหล่านี้ และอัปโหลดไฟล์กำหนดค่าลงในบัคเก็ตของคุณ
รอให้สแตก
wildrydes-webapp-2มีสถานะเป็นCREATE_COMPLETEทำตามขั้นตอนที่แสดงใน ขั้นตอนที่ 4 ทดสอบการดำเนินการของคุณ เพื่อยืนยันว่าคุณพร้อมที่จะไปยังโมดูลถัดไป
ทำตามคำแนะนำทีละขั้นตอนด้านล่างนี้เพื่อสร้างกลุ่มผู้ใช้ของคุณ คลิกหมายเลขขั้นตอนแต่ละหมายเลขเพื่อขยายส่วนนั้น
-
ขั้นตอนที่ 1 สร้างกลุ่มผู้ใช้ของ Amazon Cognito
Amazon Cognito จะเสนอกลไกสองแบบในการตรวจสอบความถูกต้องของผู้ใช้ คุณสามารถใช้กลุ่มผู้ใช้ของ Cognito เพื่อเพิ่มฟังก์ชันการสมัครใช้งานและลงชื่อเข้าใช้ลงในแอปพลิเคชันของคุณ หรือใช้กลุ่มข้อมูลประจำตัวของ Cognito เพื่อตรวจสอบความถูกต้องของผู้ใช้ผ่านผู้ให้บริการข้อมูลประจำตัวทางสื่อสังคมออนไลน์ เช่น Facebook, Twitter หรือ Amazon ที่มีโซลูชันข้อมูลประจำตัว SAML หรือจากการใช้ระบบจัดการข้อมูลประจำตัวของคุณเอง สำหรับโมดูลนี้ คุณจะต้องใช้กลุ่มผู้ใช้เป็นแบ็คเอนด์สำหรับหน้าลงทะเบียนและลงชื่อเข้าใช้ที่ให้ไว้
- จากคอนโซล AWS ให้คลิกที่ บริการ แล้วเลือก Cognito ภายใต้บริการบนมือถือ
- เลือกจัดการกลุ่มผู้ใช้ของคุณ
- เลือก สร้างกลุ่มผู้ใช้
- ระบุชื่อสำหรับกลุ่มผู้ใช้ของคุณ เช่น WildRydes จากนั้นเลือก ตรวจสอบค่าเริ่มต้น
- ในหน้าการตรวจสอบ ให้คลิกที่ สร้างกลุ่ม
- บันทึก รหัสกลุ่ม ในหน้ารายละเอียดกลุ่มของกลุ่มผู้ใช้ที่คุณเพิ่มสร้างใหม่
-
ขั้นตอนที่ 2 เพิ่มแอปลงในกลุ่มผู้ใช้ของคุณ
จาก Amazon Cognito Console ให้เลือกกลุ่มผู้ใช้ของคุณ จากนั้นเลือกส่วนไคลเอนต์ของแอป เพิ่มไคลเอนต์ของแอปใหม่ และตรวจสอบให้แน่ใจว่าได้ยกเลิกการเลือกตัวเลือกสร้างข้อมูลลับของไคลเอนต์ ปัจจุบันยังไม่มีการรองรับข้อมูลลับของไคลเอนต์ด้วย JavaScript SDK หากคุณสร้างแอปที่มีการสร้างข้อมูลลับไว้ ให้ลบออกและสร้างรายการโดยใช้การกำหนดค่าที่ถูกต้อง
- จากหน้ารายละเอียดกลุ่มสำหรับกลุ่มผู้ใช้ของคุณ ให้เลือก ไคลเอนต์ของแอป จากส่วน การตั้งค่าทั่วไป ทางด้านซ้ายในแถบนำทาง
- เลือก เพิ่มไคลเอนต์ของแอป
- ตั้งชื่อไคลเอนต์ของแอป เช่น
WildRydesWebApp - ยกเลิกการเลือก ตัวเลือกสร้างข้อมูลลับของไคลเอนต์ ปัจจุบันยังไม่มีการรองรับข้อมูลลับของไคลเอนต์เพื่อใช้งานกับแอปพลิเคชันจากเบราว์เซอร์
- เลือก สร้างไคลเอนต์ของแอป
- บันทึก รหัสไคลเอนต์ของแอป สำหรับแอปพลิเคชันที่สร้างขึ้นใหม่
-
ขั้นตอนที่ 3 อัปเดตการกำหนดค่าเว็บไซต์
ไฟล์ /js/config.js จะประกอบด้วยการตั้งค่าสำหรับ ID กลุ่มผู้ใช้, ID ไคลเอนต์ของแอป และรีเจี้ยน อัปเดตไฟล์นี้ด้วยการตั้งค่าจากกลุ่มผู้ใช้และแอปที่คุณสร้างในขั้นตอนก่อนหน้านี้ และอัปโหลดไฟล์กลับไปที่บัคเก็ตของคุณ
ก. จากในเครื่องของคุณ ให้เปิด `wild-ryde-site/js/config.js’ ในโปรแกรมแก้ไขข้อความที่คุณต้องการ
ข. อัปเดตส่วน Cognito ด้วยค่าที่ถูกต้องสำหรับกลุ่มผู้ใช้และแอปที่คุณเพิ่งสร้าง
คุณสามารถหาค่าสำหรับ userPoolId ได้ในหน้ารายละเอียดกลุ่มจาก Amazon Cognito Console หลังจากที่คุณเลือกกลุ่มผู้ใช้ที่คุณสร้างไว้แล้ว
คุณสามารถหาค่าสำหรับ userPoolClientId โดยเลือกไคลเอนต์ของแอปจากแถบนำทางด้านซ้าย ใช้ค่าจากช่องรหัสไคลเอนต์ของแอปสำหรับแอปที่คุณสร้างในส่วนก่อนหน้านี้ค่าสำหรับ region (รีเจี้ยน) ควรเป็นรหัสภูมิภาคของ AWS ที่คุณได้สร้างกลุ่มผู้ใช้ไว้ เช่น us-east-1 สำหรับรีเจี้ยนเวอร์จิเนียเหนือ หรือ us-west-2 สำหรับรีเจี้ยนออริกอน หากคุณไม่แน่ใจว่าควรใช้โค้ดใด คุณสามารถดูที่ค่า ARN ของกลุ่มในหน้ารายละเอียดกลุ่ม รหัสรีเจี้ยนจะเป็นส่วนหนึ่งใน ARN ซึ่งอยู่หลังจาก arn:aws:cognito-idp:
ไฟล์ config.js ที่อัปเดตควรมีลักษณะเช่นนี้ โปรดทราบว่า ค่าจริงสำหรับไฟล์ของคุณจะแตกต่างออกไป:
window._config = { cognito: { userPoolId: 'us-west-2_uXboG5pAb', // e.g. us-east-2_uXboG5pAb userPoolClientId: '25ddkmj4v6hfsfvruhpfi7n4hv', // e.g. 25ddkmj4v6hfsfvruhpfi7n4hv region: 'us-west-2' // e.g. us-east-2 }, api: { invokeUrl: '' // e.g. https://rc7nyt4tql.execute-api.us-west-2.amazonaws.com/prod', } };ง. บันทึกไฟล์ที่ดัดแปลงและส่งต่อไปยังคลังเก็บข้อมูล Git เพื่อปรับใช้งานโดยอัตโนมัติกับ Amplify Console
$ git push
-
ขั้นตอนที่ 4 ทดสอบการดำเนินการของคุณ
- ไปที่
/register.htmlในโดเมนเว็บไซต์ของคุณ หรือเลือกปุ่ม Giddy Up! ที่หน้าหลักของเว็บไซต์ของคุณ - กรอกแบบฟอร์มการลงทะเบียนให้เสร็จสิ้น แล้วเลือก เริ่มใช้ Ryde คุณสามารถใช้อีเมลของคุณเองหรือป้อนอีเมลปลอมก็ได้ อย่าลืมเลือกรหัสผ่านที่มีตัวอักษรพิมพ์ใหม่อย่างน้อยหนึ่งตัว ตัวเลขและอักขระพิเศษ อย่าลืมรหัสผ่านที่คุณป้อนเพื่อใช้ในภายหลัง คุณจะได้เห็นข้อความแจ้งเตือนที่ยืนยันว่าสร้างผู้ใช้ของคุณแล้ว
- ยืนยันผู้ใช้รายใหม่ โดยเลือกใช้วิธีหนึ่งในสองวิธีดังนี้
- หากคุณใช้ที่อยู่อีเมลที่คุณควบคุม คุณสามารถดำเนินขั้นตอนการตรวจสอบบัญชีได้โดยไปที่
/verify.htmlในโดเมนเว็บไซต์ของคุณ หรือป้อนรหัสการตรวจสอบที่คุณได้รับทางอีเมล โปรดทราบว่า อีเมลตรวจสอบอาจอยู่ในโฟลเดอร์สแปมของคุณ สำหรับการปรับใช้จริง เราขอแนะนำให้ กำหนดค่ากลุ่มผู้ใช้ของคุณเพื่อใช้ Amazon Simple Email Service ในการส่งอีเมลจากโดเมนที่คุณเป็นเจ้าของ - หากคุณใช้ที่อยู่อีเมลดัมมี คุณต้องยืนยันว่าผู้ใช้ด้วยตนเองผ่าน Cognito Console
- จากคอนโซล AWS ให้คลิกที่บริการ จากนั้นเลือก Cognito ภายใต้ความปลอดภัย ข้อมูลประจำตัว และการปฏิบัติตามข้อกำหนด
- เลือกจัดการกลุ่มผู้ใช้ของคุณ
- เลือกกลุ่มผู้ใช้
WildRydesและคลิก ผู้ใช้และกลุ่ม ในแถบนำทางด้านซ้าย - คุณจะได้เห็นผู้ใช้ที่สอดคล้องกับที่อยู่อีเมลที่คุณส่งผ่านหน้าลงทะเบียน เลือกชื่อผู้ใช้เพื่อดูหน้ารายละเอียดผู้ใช้
- เลือก ยืนยันผู้ใช้ เพื่อจบกระบวนการสร้างบัญชี
- หลังจากที่ยืนยันผู้ใช้รายใหม่โดยใช้หน้า
/verify.htmlหรือ Cognito Console แล้ว ให้ไปที่/signin.htmlและเข้าสู่ระบบโดยใช้ที่อยู่อีเมลและรหัสผ่านที่คุณป้อนในระหว่างขั้นตอนการลงทะเบียน - หากสำเร็จ ระบบจะนำคุณเปลี่ยนเส้นทางไปยัง
/ride.htmlคุณจะได้เห็นข้อความแจ้งเตือนว่า ไม่ได้กำหนดค่า API
- ไปที่
