คู่มือนี้จะแสดงให้คุณเห็นถึงวิธีการยืนยันตัวตนกับ Logto ในการทดสอบแอปพลิเคชันหน้าเดียว (SPA) ของคุณ
การยืนยันตัวตนเป็นส่วนสำคัญของแอปพลิเคชันเว็บใด ๆ และเป็นสิ่งจำเป็นเพื่อให้แน่ใจว่าการยืนยันของคุณทำงานตามที่คาดไว้ในแอปพลิเคชันหน้าเดียว (SPAs) ในคู่มือนี้ เราจะนำคุณผ่านกระบวนการยืนยันตัวตนกับ Logto ในการทดสอบ Cypress ของคุณ ทำให้คุณสามารถทดสอบการไหลของการยืนยันตัวตนของ SPA ของคุณได้อย่างมีประสิทธิภาพ
ก่อนที่จะดำดิ่งเข้าไป ตรวจสอบให้แน่ใจว่าคุณมีสิ่งต่อไปนี้พร้อม:
บัญชี Logto หากคุณยังไม่มี คุณสามารถ สมัครใช้งาน Logto cloud ได้ฟรี
แอปพลิเคชันหน้าเดียว (SPA) ที่ผสานรวมกับ Logto สำหรับการยืนยันตัวตน หากคุณยังไม่มีโปรดติดตาม create-and-integrate-the-first-app คู่มือ สร้างและลงทะเบียนแอปพลิเคชันใหม่ใน Logto
รวม Logto กับแอปพลิเคชัน SPA ของคุณโดยใช้ SDK ที่มีในกล่องของเรา เช่น React SDK
คุณอาจติดตาม การปรับแต่งประสบการณ์การเข้าสู่ระบบ เพื่อปรับแต่งประสบการณ์การเข้าสู่ระบบสำหรับแอปพลิเคชัน SPA ของคุณเอง จำลองการไหลของการเข้าสู่ระบบในการทดสอบ Cypress ของคุณตามความเหมาะสม
ทำการติดตั้ง Cypress และการกำหนดค่าที่สมบูรณ์ คู่มือนี้ถือว่าคุณมีสภาพแวดล้อม Cypress ที่ตั้งค่าไว้อย่างดีและคุณสามารถเรียกใช้การทดสอบ Cypress ของคุณได้แล้ว
เปิดใช้บริการ Logto ของคุณและแอปพลิเคชันไคลเอ็นต์
เราจะใช้ตัวอย่างแอปพลิเคชัน React SPA ของเราเป็นตัวอย่างในคู่มือนี้ คุณสามารถค้นหารหัสต้นทางได้ ที่นี่ เป็นแอปพลิเคชัน React ที่เรียบง่าย ที่รวม Logto ด้วย Logto React SDK สำหรับการยืนยันตัวตน
http://localhost:3001/sign-inhttp://localhost:3000username/passwordมาเขียนคำสั่ง Cypress ที่กำหนดเองเพื่อยืนยันตัวตนกับ Logto ในการทดสอบ Cypress ของคุณ โดยใช้คำสั่งที่กำหนดเอง คุณสามารถยืนยันตัวตนกับ Logto ในการทดสอบ Cypress ใด ๆ ของคุณได้อย่างง่ายดาย
เยี่ยมชมหน้าการเข้าสู่ระบบแอปพลิเคชันไคลเอ็นต์ของคุณในทดสอบ Cypress และเริ่มการไหลของการเข้าสู่ระบบโดยคลิกที่ปุ่มเข้าสู่ระบบ
นำทางไปยังหน้าการเข้าสู่ระบบ Logto และกรอกชื่อผู้ใช้และรหัสผ่านเพื่อเข้าสู่ระบบ
โดยปกติแล้ว การทดสอบ Cypress เพียงครั้งเดียวอาจจะเรียกใช้คำสั่งในต้นกำเนิดเดียวเท่านั้น ซึ่งเป็นข้อจำกัดที่กำหนดโดยคุณสมบัติความปลอดภัยบนเว็บมาตรฐานของเบราว์เซอร์ คำสั่ง cy.origin() ช่วยให้การทดสอบของคุณสามารถหลีกเลี่ยงข้อจำกัดนี้
หลังจากการเข้าสู่ระบบสำเร็จ คุณสามารถเปลี่ยนเส้นทางกลับไปยังแอปพลิเคชันไคลเอ็นต์ของคุณ
รวมการไหลของการเข้าสู่ระบบทั้งหมดเป็นคำสั่ง Cypress ที่กำหนดเอง cy.signIn ในตัวอย่างนี้
ในการทดสอบ Cypress ใด ๆ ของคุณ คุณสามารถใช้คำสั่ง Cypress ที่กำหนดเองเพื่อยืนยันตัวตนกับ Logto
ยินดีด้วย! คุณได้ทำการยืนยันตัวตนกับ Logto ในการทดสอบ Cypress ของคุณสำเร็จแล้ว ตอนนี้คุณสามารถเน้นการทดสอบแอปพลิเคชัน SPA ของคุณโดยไม่ต้องกังวลเกี่ยวกับการไหลของการยืนยันตัวตนแล้ว