ข้ามไปยังเนื้อหาหลัก

ทดสอบประสบการณ์ผู้ใช้ด้วยการแสดงตัวอย่างสด

คุณสามารถใช้ฟีเจอร์ แสดงตัวอย่างสด (Live preview) เพื่อทดสอบการตั้งค่าประสบการณ์การลงชื่อเข้าใช้ของคุณได้อย่างสะดวก

แสดงตัวอย่างสด​

ไปที่ Console > ประสบการณ์การลงชื่อเข้าใช้ และคลิกปุ่ม "แสดงตัวอย่างสด (Live preview)" ที่มุมขวาบน จะเปิดแท็บเบราว์เซอร์ใหม่พร้อมเดโมที่ใช้งานได้เต็มรูปแบบของความสามารถ Logto เดโมนี้นำเสนอแนวทางการออกแบบประสบการณ์สำหรับขั้นตอนการลงชื่อเข้าใช้และสมัครสมาชิก ซึ่งสามารถปรับแต่งได้สูงและผสานรวมเข้ากับแอปของคุณได้อย่างไร้รอยต่อ

บันทึก:

ในตัวอย่างนี้ คุณควรสร้างบัญชีก่อนเพื่อทดสอบประสบการณ์ดังกล่าว คุณสามารถจัดการบัญชีนี้ได้ภายหลังที่ Console > การจัดการผู้ใช้

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

แผงนักพัฒนา (Dev panel)​

หลังจากลงชื่อเข้าใช้สำเร็จผ่าน Live Preview ของ Logto คุณจะเข้าสู่แดชบอร์ดที่มีการดำเนินการหลักสองอย่าง:

  • ปุ่มออกจากระบบของ Live preview: ยุติเซสชันปัจจุบัน
  • ปุ่มเปิดแผงนักพัฒนา: เปิดเครื่องมือดีบักสำหรับวิเคราะห์ขั้นตอนการยืนยันตัวตนของคุณ

แผงนักพัฒนา (Development Panel) ให้ข้อมูลเชิงลึกแบบเรียลไทม์สำหรับการแก้ไขปัญหาการผสาน OIDC การตรวจสอบโทเค็นและการอ้างสิทธิ์ (claims) และการทดสอบสถานการณ์เอกลักษณ์ขั้นสูง

การตั้งค่า Logto (Logto Config)​

Live Preview อาศัยแอปเดโมที่ซ่อนอยู่ซึ่งมีประสบการณ์การลงชื่อเข้าใช้แบบรวมศูนย์เป็นค่าเริ่มต้น ในส่วน Logto Config คุณสามารถกำหนดค่าพารามิเตอร์การยืนยันตัวตนที่รวมอยู่ในคำขอการยืนยันตัวตน เพื่อสั่งให้ Logto OIDC endpoint จัดการกระบวนการยืนยันตัวตน เช่น การกำหนด App ID ของคุณ การระบุ Organization ID การร้องขอขอบเขต (scopes) เฉพาะ ฯลฯ การตั้งค่านี้คล้ายกับการเริ่มต้น LogtoClient ด้วย LogtoProvider ซึ่งสร้างบริบท Logto ให้กับแอปของคุณ

บันทึก:

อย่าลืมบันทึกการเปลี่ยนแปลงการตั้งค่าของคุณ การเปลี่ยนแปลงจะมีผลในครั้งถัดไปที่คุณลงชื่อเข้าใช้ด้วย Live Preview

  • App ID: ระบุ App ID เฉพาะของคุณ มีความสำคัญสำหรับการทดสอบ ประสบการณ์การลงชื่อเข้าใช้เฉพาะแอป และนโยบายการปกป้องทรัพยากร
  • Sign-in extra parameters: ส่ง พารามิเตอร์การยืนยันตัวตน เพิ่มเติมเพื่อทดสอบกระบวนการลงชื่อเข้าใช้แบบกำหนดเอง ตัวอย่างเช่น:
  • Prompt: เพิ่ม ค่า OIDC prompt (คั่นด้วยช่องว่าง) เพื่อระบุว่า Authorization Server จะขอให้ผู้ใช้ปลายทางยืนยันตัวตนใหม่หรือขอความยินยอมหรือไม่ ค่าที่กำหนดได้แก่:
    • login: บังคับให้ผู้ใช้ยืนยันตัวตนใหม่
    • consent: ต้องการความยินยอมจากผู้ใช้ก่อนแบ่งปันข้อมูลกับไคลเอนต์
    • none: ระบุว่าไม่ควรแสดง UI ใด ๆ ใช้เพื่อตรวจสอบการยืนยันตัวตนหรือความยินยอมที่มีอยู่แล้ว
  • Scope: ระบุขอบเขต (scopes; คั่นด้วยช่องว่าง) สำหรับการร้องขอการอ้างสิทธิ์ (claims) ตัวอย่างเช่น:
    • หากต้องการขอรายละเอียดองค์กรของผู้ใช้ ให้ใช้สองขอบเขต: urn:logto:scope:organizations urn:logto:scope:organization_roles
    • หากต้องการขอสิทธิ์ API ให้ระบุ ชื่อขอบเขต ในช่อง Scope และกรอก API identifier ที่เกี่ยวข้องในช่อง Resource ด้านล่าง
  • Resource: กรอกตัวระบุทรัพยากร API (คั่นด้วยช่องว่าง) ที่แอปของคุณต้องการเข้าถึง ช่องนี้ช่วยให้แอปของคุณร้องขอโทเค็นการเข้าถึงทรัพยากรเฉพาะตามที่ต้องการ

การขอโทเค็นรีเฟรช (Refresh token grant)​

ส่วนนี้อธิบายวิธี รีเฟรชโทเค็น สำหรับประเภทการเข้าถึงที่แตกต่างกัน

  • Resource: กรอก API Identifier เฉพาะ (คั่นด้วยช่องว่าง) หากคุณต้องการรีเฟรชโทเค็นการเข้าถึงทรัพยากร API
  • Organization ID: กรอก Organization ID (คั่นด้วยช่องว่าง) หากคุณต้องการรีเฟรชโทเค็นองค์กร

ดู การอนุญาต (Authorization) สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับการใช้ refresh token grant

บันทึก:

ใส่ consent ในพารามิเตอร์ prompt สำหรับ offline_access จะมีการออก refresh token ก็ต่อเมื่อ prompt มี consent เท่านั้น

ข้อมูลผู้ใช้ (User info)​

ตรวจสอบข้อมูลผู้ใช้ที่ได้จากกระบวนการยืนยันตัวตนของคุณ:

  • Get ID token claims: ดึงการอ้างสิทธิ์ (claims) ทั้งหมดที่อยู่ใน ID token เช่น at_hash, aud, auth_time, exp, iat, issu และโปรไฟล์ผู้ใช้เพิ่มเติม ใช้สำหรับตรวจสอบความถูกต้องของโทเค็นและดึงข้อมูลผู้ใช้ที่จำเป็น
  • Fetch user info: ดึงเฉพาะข้อมูลโปรไฟล์ผู้ใช้โดยการเรียก userinfo endpoint
บันทึก:

ใช้ Developer Tools ของ Chrome (F12 → Console) เพื่อตรวจสอบ network requests และรีวิวโทเค็นและการอ้างสิทธิ์ (claims)