ในโมดูลนี้ คุณจะต้องสร้างกลุ่มผู้ใช้ Amazon Cognito เพื่อจัดการบัญชีของผู้ใช้ของคุณ คุณจะต้องปรับใช้หน้าต่างๆ ที่ช่วยให้ลูกค้าลงทะเบียนเป็นผู้ใช้รายใหม่ ตรวจสอบที่อยู่อีเมล และลงชื่อเข้าใช้เว็บไซต์

Serverless_Web_App_LP_assets-03

เมื่อผู้ใช้เข้าชมเว็บไซต์ของคุณ ผู้ใช้จะต้องลงทะเบียนบัญชีผู้ใช้ใหม่ก่อน สำหรับวัตถุประสงค์ของเวิร์กช็อปนี้ เราจะขอให้ผู้ใช้ระบุที่อยู่อีเมลและรหัสผ่านเพื่อลงทะเบียน อย่างไรก็ตาม คุณสามารถกำหนดค่า 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
สหรัฐอเมริกาฝั่งตะวันออก (เวอร์จิเนียเหนือ) เปิดใช้งานสแตก >
สหรัฐอเมริกาฝั่งตะวันออก (โอไฮโอ) เปิดใช้งานสแตก >
สหรัฐอเมริกาฝั่งตะวันตก (ออริกอน) เปิดใช้งานสแตก >
สหภาพยุโรป (แฟรงเฟิร์ต) เปิดใช้งานสแตก >
สหภาพยุโรป (ไอร์แลนด์) เปิดใช้งานสแตก >
สหภาพยุโรป (ลอนดอน) เปิดใช้งานสแตก >
เอเชียแปซิฟิก (โตเกียว) เปิดใช้งานสแตก >
เอเชียแปซิฟิก (โซล) เปิดใช้งานสแตก >
เอเชียแปซิฟิก (ซิดนีย์) เปิดใช้งานสแตก >
เอเชียแปซิฟิก (มุมไบ) เปิดใช้งานสแตก >
Serverless_Web_App_LP_assets-17

คำแนะนำในการเปิดใช้งาน CloudFormation

  1. เลือกลิงก์ เปิดใช้งานสแตก ด้านบนสำหรับภูมิภาคที่คุณต้องการ

  2. เลือก ถัดไป ในหน้าเลือกเทมเพลต

  3. ระบุชื่อบัคเก็ตเว็บไซต์ของคุณจากโมดูลที่ 1 สำหรับ ชื่อบัคเก็ตเว็บไซต์ (เช่น wildrydes-yourname) และเลือก ถัดไป

    หมายเหตุ: คุณต้องระบุชื่อบัคเก็ตเดียวกันกับที่คุณใช้ในโมดูลก่อนหน้านี้ หากคุณระบุชื่อบัคเก็ตที่ไม่มีในระบบหรือคุณไม่มีสิทธิ์ในการเขียน สแตก CloudFormation จะล้มเหลวในระหว่างการสร้าง

  4. ในหน้าตัวเลือก ให้ใช้ค่าเริ่มต้นทั้งหมดตามเดิม และเลือก ถัดไป

  5. ในหน้าตรวจสอบ ให้เลือกกล่องกาเครื่องหมายเพื่อรับทราบว่า CloudFormation จะสร้างทรัพยากร IAM และเลือก สร้าง

    เทมเพลตนี้จะใช้ทรัพยากรแบบกำหนดเองเพื่อสร้างกลุ่มผู้ใช้และไคลเอนต์ของ Amazon Cognito รวมถึงสร้างไฟล์กำหนดค่าพร้อมรายละเอียดที่จำเป็นในการเชื่อมต่อกับกลุ่มผู้ใช้นี้ และอัปโหลดลงในบัคเก็ตเว็บไซต์ของคุณ เทมเพลตจะสร้างบทบาทที่ให้สิทธิ์การเข้าถึงเพื่อสร้างทรัพยากรเหล่านี้ และอัปโหลดไฟล์กำหนดค่าลงในบัคเก็ตของคุณ

  6. รอให้สแตก wildrydes-webapp-2 มีสถานะเป็น CREATE_COMPLETE

  7. ทำตามขั้นตอนที่แสดงใน ขั้นตอนที่ 4 ทดสอบการดำเนินการของคุณ เพื่อยืนยันว่าคุณพร้อมที่จะไปยังโมดูลถัดไป


ทำตามคำแนะนำทีละขั้นตอนด้านล่างนี้เพื่อสร้างกลุ่มผู้ใช้ของคุณ คลิกหมายเลขขั้นตอนแต่ละหมายเลขเพื่อขยายส่วนนั้น

  • ขั้นตอนที่ 1 สร้างกลุ่มผู้ใช้ของ Amazon Cognito

    Amazon Cognito จะเสนอกลไกสองแบบในการตรวจสอบความถูกต้องของผู้ใช้ คุณสามารถใช้กลุ่มผู้ใช้ของ Cognito เพื่อเพิ่มฟังก์ชันการสมัครใช้งานและลงชื่อเข้าใช้ลงในแอปพลิเคชันของคุณ หรือใช้กลุ่มข้อมูลประจำตัวของ Cognito เพื่อตรวจสอบความถูกต้องของผู้ใช้ผ่านผู้ให้บริการข้อมูลประจำตัวทางสื่อสังคมออนไลน์ เช่น Facebook, Twitter หรือ Amazon ที่มีโซลูชันข้อมูลประจำตัว SAML หรือจากการใช้ระบบจัดการข้อมูลประจำตัวของคุณเอง สำหรับโมดูลนี้ คุณจะต้องใช้กลุ่มผู้ใช้เป็นแบ็คเอนด์สำหรับหน้าลงทะเบียนและลงชื่อเข้าใช้ที่ให้ไว้


    1. จากคอนโซล AWS ให้คลิกที่ บริการ แล้วเลือก Cognito ภายใต้บริการบนมือถือ
    2. เลือกจัดการกลุ่มผู้ใช้ของคุณ
    3. เลือก สร้างกลุ่มผู้ใช้
    4. ระบุชื่อสำหรับกลุ่มผู้ใช้ของคุณ เช่น WildRydes จากนั้นเลือก ตรวจสอบค่าเริ่มต้น
    5. ในหน้าการตรวจสอบ ให้คลิกที่ สร้างกลุ่ม
    6. บันทึก รหัสกลุ่ม ในหน้ารายละเอียดกลุ่มของกลุ่มผู้ใช้ที่คุณเพิ่มสร้างใหม่
  • ขั้นตอนที่ 2 เพิ่มแอปลงในกลุ่มผู้ใช้ของคุณ

    จาก Amazon Cognito Console ให้เลือกกลุ่มผู้ใช้ของคุณ จากนั้นเลือกส่วนไคลเอนต์ของแอป เพิ่มไคลเอนต์ของแอปใหม่ และตรวจสอบให้แน่ใจว่าได้ยกเลิกการเลือกตัวเลือกสร้างข้อมูลลับของไคลเอนต์ ปัจจุบันยังไม่มีการรองรับข้อมูลลับของไคลเอนต์ด้วย JavaScript SDK หากคุณสร้างแอปที่มีการสร้างข้อมูลลับไว้ ให้ลบออกและสร้างรายการโดยใช้การกำหนดค่าที่ถูกต้อง


    1. จากหน้ารายละเอียดกลุ่มสำหรับกลุ่มผู้ใช้ของคุณ ให้เลือก ไคลเอนต์ของแอป จากส่วน การตั้งค่าทั่วไป ทางด้านซ้ายในแถบนำทาง
    2. เลือก เพิ่มไคลเอนต์ของแอป
    3. ตั้งชื่อไคลเอนต์ของแอป เช่น WildRydesWebApp
    4. ยกเลิกการเลือก ตัวเลือกสร้างข้อมูลลับของไคลเอนต์ ปัจจุบันยังไม่มีการรองรับข้อมูลลับของไคลเอนต์เพื่อใช้งานกับแอปพลิเคชันจากเบราว์เซอร์
    5. เลือก สร้างไคลเอนต์ของแอป
    6. บันทึก รหัสไคลเอนต์ของแอป สำหรับแอปพลิเคชันที่สร้างขึ้นใหม่
  • ขั้นตอนที่ 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 ทดสอบการดำเนินการของคุณ


    1. ไปที่ /register.html ในโดเมนเว็บไซต์ของคุณ หรือเลือกปุ่ม Giddy Up! ที่หน้าหลักของเว็บไซต์ของคุณ
    2. กรอกแบบฟอร์มการลงทะเบียนให้เสร็จสิ้น แล้วเลือก เริ่มใช้ Ryde คุณสามารถใช้อีเมลของคุณเองหรือป้อนอีเมลปลอมก็ได้ อย่าลืมเลือกรหัสผ่านที่มีตัวอักษรพิมพ์ใหม่อย่างน้อยหนึ่งตัว ตัวเลขและอักขระพิเศษ อย่าลืมรหัสผ่านที่คุณป้อนเพื่อใช้ในภายหลัง คุณจะได้เห็นข้อความแจ้งเตือนที่ยืนยันว่าสร้างผู้ใช้ของคุณแล้ว
    3. ยืนยันผู้ใช้รายใหม่ โดยเลือกใช้วิธีหนึ่งในสองวิธีดังนี้
    4. หากคุณใช้ที่อยู่อีเมลที่คุณควบคุม คุณสามารถดำเนินขั้นตอนการตรวจสอบบัญชีได้โดยไปที่ /verify.html ในโดเมนเว็บไซต์ของคุณ หรือป้อนรหัสการตรวจสอบที่คุณได้รับทางอีเมล โปรดทราบว่า อีเมลตรวจสอบอาจอยู่ในโฟลเดอร์สแปมของคุณ สำหรับการปรับใช้จริง เราขอแนะนำให้ กำหนดค่ากลุ่มผู้ใช้ของคุณเพื่อใช้ Amazon Simple Email Service ในการส่งอีเมลจากโดเมนที่คุณเป็นเจ้าของ
    5. หากคุณใช้ที่อยู่อีเมลดัมมี คุณต้องยืนยันว่าผู้ใช้ด้วยตนเองผ่าน Cognito Console
    6. จากคอนโซล AWS ให้คลิกที่บริการ จากนั้นเลือก Cognito ภายใต้ความปลอดภัย ข้อมูลประจำตัว และการปฏิบัติตามข้อกำหนด
    7. เลือกจัดการกลุ่มผู้ใช้ของคุณ
    8. เลือกกลุ่มผู้ใช้ WildRydes และคลิก ผู้ใช้และกลุ่ม ในแถบนำทางด้านซ้าย
    9. คุณจะได้เห็นผู้ใช้ที่สอดคล้องกับที่อยู่อีเมลที่คุณส่งผ่านหน้าลงทะเบียน เลือกชื่อผู้ใช้เพื่อดูหน้ารายละเอียดผู้ใช้
    10. เลือก ยืนยันผู้ใช้ เพื่อจบกระบวนการสร้างบัญชี
    11. หลังจากที่ยืนยันผู้ใช้รายใหม่โดยใช้หน้า /verify.html หรือ Cognito Console แล้ว ให้ไปที่ /signin.html และเข้าสู่ระบบโดยใช้ที่อยู่อีเมลและรหัสผ่านที่คุณป้อนในระหว่างขั้นตอนการลงทะเบียน
    12. หากสำเร็จ ระบบจะนำคุณเปลี่ยนเส้นทางไปยัง /ride.html คุณจะได้เห็นข้อความแจ้งเตือนว่า ไม่ได้กำหนดค่า API
    successful-login