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

ทดสอบประสบการณ์ผู้ใช้ด้วย Live preview

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

Live preview​

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

บันทึก:

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

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

Dev panel​

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

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

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

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

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