ไทย
  • cypress
  • logto
  • authentication

การยืนยันตัวตน Logto ใน Cypress

คู่มือนี้จะแสดงให้คุณเห็นถึงวิธีการยืนยันตัวตนกับ Logto ในการทดสอบแอปพลิเคชันหน้าเดียว (SPA) ของคุณ

Simeng
Simeng
Developer

บทนำ

การยืนยันตัวตนเป็นส่วนสำคัญของแอปพลิเคชันเว็บใด ๆ และเป็นสิ่งจำเป็นเพื่อให้แน่ใจว่าการยืนยันของคุณทำงานตามที่คาดไว้ในแอปพลิเคชันหน้าเดียว (SPAs) ในคู่มือนี้ เราจะนำคุณผ่านกระบวนการยืนยันตัวตนกับ Logto ในการทดสอบ Cypress ของคุณ ทำให้คุณสามารถทดสอบการไหลของการยืนยันตัวตนของ SPA ของคุณได้อย่างมีประสิทธิภาพ

ข้อกำหนดเบื้องต้น

ก่อนที่จะดำดิ่งเข้าไป ตรวจสอบให้แน่ใจว่าคุณมีสิ่งต่อไปนี้พร้อม:

  • บัญชี Logto หากคุณยังไม่มี คุณสามารถ สมัครใช้งาน Logto cloud ได้ฟรี

  • แอปพลิเคชันหน้าเดียว (SPA) ที่ผสานรวมกับ Logto สำหรับการยืนยันตัวตน หากคุณยังไม่มีโปรดติดตาม create-and-integrate-the-first-app คู่มือ สร้างและลงทะเบียนแอปพลิเคชันใหม่ใน Logto

    create_application

  • รวม Logto กับแอปพลิเคชัน SPA ของคุณโดยใช้ SDK ที่มีในกล่องของเรา เช่น React SDK

  • คุณอาจติดตาม การปรับแต่งประสบการณ์การเข้าสู่ระบบ เพื่อปรับแต่งประสบการณ์การเข้าสู่ระบบสำหรับแอปพลิเคชัน SPA ของคุณเอง จำลองการไหลของการเข้าสู่ระบบในการทดสอบ Cypress ของคุณตามความเหมาะสม

    sign-in-experience

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

  • เปิดใช้บริการ Logto ของคุณและแอปพลิเคชันไคลเอ็นต์


เราจะใช้ตัวอย่างแอปพลิเคชัน React SPA ของเราเป็นตัวอย่างในคู่มือนี้ คุณสามารถค้นหารหัสต้นทางได้ ที่นี่ เป็นแอปพลิเคชัน React ที่เรียบง่าย ที่รวม Logto ด้วย Logto React SDK สำหรับการยืนยันตัวตน

  • URL การเข้าสู่ระบบ Logto: http://localhost:3001/sign-in
  • โดเมนแอปพลิเคชัน React SPA: http://localhost:3000
  • การตั้งค่าประสบการณ์การเข้าสู่ระบบ Logto: username/password

เขียนคำสั่ง Cypress ที่กำหนดเองเพื่อยืนยันตัวตนกับ Logto

มาเขียนคำสั่ง Cypress ที่กำหนดเองเพื่อยืนยันตัวตนกับ Logto ในการทดสอบ Cypress ของคุณ โดยใช้คำสั่งที่กำหนดเอง คุณสามารถยืนยันตัวตนกับ Logto ในการทดสอบ Cypress ใด ๆ ของคุณได้อย่างง่ายดาย

ขั้นตอนที่ 1: เริ่มการไหลของการเข้าสู่ระบบ

เยี่ยมชมหน้าการเข้าสู่ระบบแอปพลิเคชันไคลเอ็นต์ของคุณในทดสอบ Cypress และเริ่มการไหลของการเข้าสู่ระบบโดยคลิกที่ปุ่มเข้าสู่ระบบ

home

ขั้นตอนที่ 2: กรอกแบบฟอร์มเข้าสู่ระบบและส่ง

นำทางไปยังหน้าการเข้าสู่ระบบ Logto และกรอกชื่อผู้ใช้และรหัสผ่านเพื่อเข้าสู่ระบบ

โดยปกติแล้ว การทดสอบ Cypress เพียงครั้งเดียวอาจจะเรียกใช้คำสั่งในต้นกำเนิดเดียวเท่านั้น ซึ่งเป็นข้อจำกัดที่กำหนดโดยคุณสมบัติความปลอดภัยบนเว็บมาตรฐานของเบราว์เซอร์ คำสั่ง cy.origin() ช่วยให้การทดสอบของคุณสามารถหลีกเลี่ยงข้อจำกัดนี้

  1. ตรวจสอบ URL ปัจจุบันว่าเป็นหน้าการเข้าสู่ระบบ Logto sign-in
  2. ระบุช่องกรอกชื่อผู้ใช้และรหัสผ่านและกรอกชื่อผู้ใช้และรหัสผ่าน submit
  3. คลิกที่ปุ่มเข้าสู่ระบบเพื่อเข้าสู่ระบบ

ขั้นตอนที่ 3: ยืนยันสำเร็จและเปลี่ยนเส้นทางกลับไปยังแอปพลิเคชันไคลเอ็นต์ของคุณ

หลังจากการเข้าสู่ระบบสำเร็จ คุณสามารถเปลี่ยนเส้นทางกลับไปยังแอปพลิเคชันไคลเอ็นต์ของคุณ

callback

ขั้นตอนที่ 4: รวมการไหลของการเข้าสู่ระบบทั้งหมดเป็นคำสั่ง Cypress ที่กำหนดเอง

รวมการไหลของการเข้าสู่ระบบทั้งหมดเป็นคำสั่ง Cypress ที่กำหนดเอง cy.signIn ในตัวอย่างนี้

ใช้คำสั่ง Cypress ที่กำหนดเองเพื่อยืนยันตัวตนแอปพลิเคชันของคุณ

ในการทดสอบ Cypress ใด ๆ ของคุณ คุณสามารถใช้คำสั่ง Cypress ที่กำหนดเองเพื่อยืนยันตัวตนกับ Logto

ยินดีด้วย! คุณได้ทำการยืนยันตัวตนกับ Logto ในการทดสอบ Cypress ของคุณสำเร็จแล้ว ตอนนี้คุณสามารถเน้นการทดสอบแอปพลิเคชัน SPA ของคุณโดยไม่ต้องกังวลเกี่ยวกับการไหลของการยืนยันตัวตนแล้ว

ลองใช้ Logto Cloud