การตั้งค่าบัญชีผู้ใช้ด้วย UI ศูนย์บัญชีผู้ใช้ที่สร้างไว้ล่วงหน้า

UI ศูนย์บัญชีผู้ใช้ที่สร้างไว้ล่วงหน้าคืออะไร

Logto มี UI ศูนย์บัญชีผู้ใช้ที่สร้างไว้ล่วงหน้า ซึ่งให้หน้าต่าง ๆ ที่พร้อมใช้งานสำหรับผู้ใช้ปลายทางในการจัดการการตั้งค่าบัญชีของตนเอง UI นี้โฮสต์โดย Logto และจัดการงานการจัดการบัญชีทั่วไป เช่น:

• ดูและแก้ไขโปรไฟล์ผู้ใช้ (ชื่อ, อวาตาร์, และฟิลด์โปรไฟล์ที่กำหนดเอง)
• อัปเดตที่อยู่อีเมลและหมายเลขโทรศัพท์
• อัปเดตชื่อผู้ใช้
• ตั้งค่าหรืออัปเดตรหัสผ่าน
• จัดการการเชื่อมต่อโซเชียล (เชื่อมโยงและยกเลิกบัญชีโซเชียล)
• จัดการการตั้งค่า MFA (แอปยืนยันตัวตน TOTP, passkey, โค้ดสำรอง)
• เปิด / ปิดการยืนยันตัวตน 2 ขั้นตอน
• จัดการเซสชันที่ใช้งานอยู่และแอปที่ได้รับอนุญาต

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

ข้อดีของการใช้ UI ที่สร้างไว้ล่วงหน้า

• ไม่ต้องพัฒนาเอง: หน้าพร้อมใช้งานทันที
• ประสบการณ์ที่สอดคล้องกัน: รูปลักษณ์และความรู้สึกเหมือนกับประสบการณ์ลงชื่อเข้าใช้ของ Logto
• ความปลอดภัยในตัว: กระบวนการยืนยันและมาตรการความปลอดภัยทั้งหมดถูกจัดการให้อัตโนมัติ
• อัปเดตเสมอ: ฟีเจอร์ใหม่และการปรับปรุงความปลอดภัยจะพร้อมใช้งานโดยอัตโนมัติ

หน้าที่มีให้ใช้งาน

UI ศูนย์บัญชีผู้ใช้ที่สร้างไว้ล่วงหน้ามีหน้าต่อไปนี้ ซึ่งเข้าถึงได้ภายใต้ path /account ของ tenant endpoint ของ Logto ของคุณ:

Path	คำอธิบาย
/account/profile	หน้าข้อมูลโปรไฟล์ผู้ใช้ (ชื่อ, อวาตาร์, และฟิลด์โปรไฟล์ที่กำหนดเอง)
/account/security	ศูนย์กลางการตั้งค่าความปลอดภัย (2-step verification, บัญชีโซเชียล, เซสชัน)
/account/email	อัปเดตหรือลบอีเมลหลัก
/account/phone	อัปเดตหรือลบหมายเลขโทรศัพท์หลัก
/account/username	อัปเดตชื่อผู้ใช้
/account/password	ตั้งค่าหรืออัปเดตรหัสผ่าน
/account/passkey/add	เพิ่ม passkey ใหม่ (WebAuthn)
/account/passkey/manage	ดูและจัดการ passkey ที่มีอยู่
/account/authenticator-app	ตั้งค่าแอปยืนยันตัวตน TOTP
/account/authenticator-app/replace	แทนที่แอปยืนยันตัวตน TOTP เดิม
/account/backup-codes/generate	สร้างโค้ดสำรองใหม่
/account/backup-codes/manage	ดูและจัดการโค้ดสำรอง

ตัวอย่างเช่น หาก tenant endpoint ของคุณคือ https://example.logto.app หน้าสำหรับอัปเดตอีเมลจะอยู่ที่ https://example.logto.app/account/email

วิธีใช้งาน UI ที่สร้างไว้ล่วงหน้า

ขั้นตอนที่ 1: เปิดใช้งาน Account API

UI ศูนย์บัญชีผู้ใช้ที่สร้างไว้ล่วงหน้าพึ่งพา Account API ให้ไปที่ Console > Sign-in & account > Account center และเปิดใช้งาน Account API

กำหนดสิทธิ์ของฟิลด์ตามที่คุณต้องการ:

• ตั้งค่าเป็น Edit เพื่อให้ผู้ใช้แก้ไขได้
• ตั้งค่าเป็น ReadOnly หากต้องการให้ผู้ใช้ดูได้อย่างเดียว
• ตั้งค่าเป็น Off เพื่อซ่อนฟิลด์นั้นโดยสมบูรณ์

กำหนดค่าฟิลด์โปรไฟล์

ศูนย์บัญชีผู้ใช้จะแสดงหน้า โปรไฟล์ ให้ผู้ใช้ปลายทางดูและจัดการข้อมูลโปรไฟล์ของตนเอง หากต้องการควบคุมว่าฟิลด์โปรไฟล์ใดจะปรากฏในหน้านี้:

1. ตรวจสอบให้แน่ใจว่าสิทธิ์ของฟิลด์ Name, Avatar, Profile หรือ Custom data ถูกตั้งเป็น Edit หรือ ReadOnly ในส่วน Account security / User profile
2. ในการ์ด Integrate prebuilt UI ให้เพิ่มฟิลด์โปรไฟล์ที่ต้องการแสดงจากตัวเลือกฟิลด์โปรไฟล์ ฟิลด์เหล่านี้ดึงมาจากแค็ตตาล็อกเดียวกับที่ใช้ใน การเก็บข้อมูลโปรไฟล์ผู้ใช้ — ฟิลด์ใดที่กำหนดไว้ที่นั่นก็สามารถแสดงในศูนย์บัญชีผู้ใช้ได้เช่นกัน
3. ลากและวางเพื่อจัดเรียงลำดับฟิลด์ตามต้องการ

เฉพาะฟิลด์ที่อยู่ในรายการฟิลด์โปรไฟล์ และ สิทธิ์ของฟิลด์นั้นไม่เป็น Off เท่านั้นที่จะปรากฏในหน้าโปรไฟล์

ขั้นตอนที่ 2: ลิงก์ไปยังหน้าที่สร้างไว้ล่วงหน้าจากแอปของคุณ

หากต้องการใช้ UI ศูนย์บัญชีผู้ใช้ที่สร้างไว้ล่วงหน้า คุณต้องเปลี่ยนเส้นทางผู้ใช้จากแอปของคุณไปยังหน้าของ Logto ที่เหมาะสม มี 2 วิธี:

วิธีที่ A: ลิงก์โดยตรงพร้อมพารามิเตอร์ redirect

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

https://[tenant-id].logto.app/account/email?redirect=https://your-app.com/settings

เมื่อผู้ใช้อัปเดตอีเมลเสร็จ จะถูกเปลี่ยนเส้นทางกลับไปที่ https://your-app.com/settings ผู้ใช้ที่กดปุ่มย้อนกลับก็จะกลับไปยัง URL เดิมเช่นกัน

วิธีที่ B: ฝังใน flow การตั้งค่าบัญชีของคุณ

คุณสามารถผสานหน้าที่สร้างไว้ล่วงหน้าเข้ากับ flow การตั้งค่าบัญชีที่มีอยู่ของคุณได้:

1. ในหน้าตั้งค่าบัญชีของแอป แสดงข้อมูลปัจจุบันของผู้ใช้
2. มีปุ่ม “แก้ไข” หรือ “อัปเดต” ที่ลิงก์ไปยังหน้าที่สร้างไว้ล่วงหน้าตามแต่ละรายการ
3. หลังจากผู้ใช้ดำเนินการเสร็จหรือออกจากหน้า จะถูกเปลี่ยนเส้นทางกลับมายังแอปของคุณ

ตัวอย่างโค้ด:

function AccountSettings() {
  const tenantEndpoint = 'https://example.logto.app';
  const redirectUrl = encodeURIComponent(window.location.href);

  return (
    <div>
      <h2>Account Settings</h2>

      <div>
        <span>Email: [email protected]</span>
        <a href={`${tenantEndpoint}/account/email?redirect=${redirectUrl}`}>Update Email</a>
      </div>

      <div>
        <span>Password: ••••••••</span>
        <a href={`${tenantEndpoint}/account/password?redirect=${redirectUrl}`}>Change Password</a>
      </div>

      <div>
        <span>MFA: Not configured</span>
        <a href={`${tenantEndpoint}/account/authenticator-app?redirect=${redirectUrl}`}>
          Set up Authenticator
        </a>
      </div>
    </div>
  );
}

ขั้นตอนที่ 3: จัดการการกลับเข้าสู่แอปของคุณ

ผู้ใช้จะกลับไปยัง URL ที่ระบุใน redirect ทั้งหลังจากดำเนินการเสร็จและเมื่อออกจากหน้าด้วยปุ่มย้อนกลับ และ URL จะเหมือนกันทั้งสองกรณี อย่าถือว่าการกลับมานั้นเป็นหลักฐานว่าการเปลี่ยนแปลงสำเร็จแล้ว ให้ดึงข้อมูลผู้ใช้ล่าสุดแทน เช่น ด้วย Account API

หากต้องการยืนยันกับผู้ใช้ว่าดำเนินการสำเร็จ ให้เพิ่ม show_success=true ใน URL ของศูนย์บัญชีผู้ใช้ ศูนย์บัญชีผู้ใช้จะแสดงหน้าสำเร็จหลังดำเนินการ และจะกลับไปยัง URL ที่ระบุใน redirect เมื่อผู้ใช้คลิก Done:

https://[tenant-id].logto.app/account/password?redirect=https://your-app.com/settings&show_success=true

พารามิเตอร์ URL ที่รองรับ

คุณสามารถเพิ่ม query parameter ต่อไปนี้ใน URL ของศูนย์บัญชีผู้ใช้เพื่อปรับแต่งประสบการณ์:

พารามิเตอร์	คำอธิบาย
redirect	URL แบบสัมบูรณ์ที่จะส่งผู้ใช้กลับไปหลังจากดำเนินการเสร็จ หรือเมื่อออกจากหน้าด้วยปุ่มย้อนกลับ รับเฉพาะ URL ที่ขึ้นต้นด้วย http(s) เท่านั้น
show_success	เมื่อกำหนดเป็น true ศูนย์บัญชีผู้ใช้จะแสดงหน้าสำเร็จหลังดำเนินการ และจะกลับไปยัง URL ที่ระบุใน redirect เมื่อผู้ใช้คลิก Done หากไม่กำหนด ผู้ใช้จะกลับทันที
identifier	เติมค่าช่องระบุอัตลักษณ์ล่วงหน้าในหน้าที่กำหนดเป้าหมาย (/account/email, /account/phone, /account/username) เหมาะสำหรับ deep-link จากแอปของคุณเมื่อทราบอัตลักษณ์ของผู้ใช้อยู่แล้ว
ui_locales	รายการ tag ภาษา BCP-47 คั่นด้วยช่องว่าง (เช่น fr-CA fr en) เพื่อควบคุมภาษาของ UI ศูนย์บัญชีผู้ใช้ หากไม่ระบุจะใช้ภาษาของเบราว์เซอร์ผู้ใช้เป็นค่าเริ่มต้น

ตัวอย่าง — deep-link ไปยังหน้าอัปเดตอีเมลโดยเติมอีเมลปัจจุบันและ UI เป็นภาษาฝรั่งเศส:

https://[tenant-id].logto.app/account/[email protected]&ui_locales=fr&redirect=https://your-app.com/settings

บันทึก:

ค่าของ identifier จะถูกเก็บใน session storage ก่อน redirect ไปลงชื่อเข้าใช้ และจะถูกใช้เพียงครั้งเดียวโดยหน้าที่กำหนดเป้าหมาย

ลิงก์ลบบัญชีผู้ใช้

ศูนย์บัญชีผู้ใช้ไม่รองรับการลบบัญชีโดยตรง คุณสามารถกำหนด Account deletion URL ที่ชี้ไปยัง flow การลบบัญชีของคุณเอง (โดยปกติจะใช้ Management API) เมื่อกำหนดแล้ว จะมีรายการ Delete your account ปรากฏในหน้าความปลอดภัยของศูนย์บัญชีผู้ใช้และลิงก์ผู้ใช้ไปยัง URL ของคุณ

วิธีกำหนดค่า ให้ไปที่ Console > Sign-in & account > Account center และตั้งค่าฟิลด์ Account deletion URL หรืออัปเดตผ่าน Management API ได้เช่นกัน:

curl -X PATCH https://[tenant-id].logto.app/api/account-center \
  -H 'authorization: Bearer <access_token>' \
  -H 'content-type: application/json' \
  --data-raw '{"deleteAccountUrl":"https://your-app.com/delete-account"}'

ปล่อยฟิลด์ว่าง (หรือกำหนด deleteAccountUrl เป็น null) เพื่อซ่อนรายการลบบัญชี

Social connection callback URL

การเชื่อมโยงบัญชีโซเชียลจากศูนย์บัญชีผู้ใช้จะใช้ callback URL ของตัวเชื่อมต่อ:

https://[your-tenant-endpoint]/callback/{connectorId}

โดยที่ {connectorId} คือ ID ของตัวเชื่อมต่อโซเชียล ซึ่งเป็น Callback URI ที่แสดงในหน้ารายละเอียดตัวเชื่อมต่อใน Console > Connectors > Social connectors และคุณต้องลงทะเบียนกับผู้ให้บริการโซเชียลของคุณเมื่อ ตั้งค่าตัวเชื่อมต่อ

ข้อควรพิจารณาด้านความปลอดภัย

UI ศูนย์บัญชีผู้ใช้ที่สร้างไว้ล่วงหน้ามีมาตรการความปลอดภัยในตัวดังนี้:

• การยืนยันตัวตนแบบ step-up ของ OIDC: การเปลี่ยนแปลงที่สำคัญ (อีเมล, โทรศัพท์, ชื่อผู้ใช้, รหัสผ่าน, บัญชีโซเชียล, MFA, เซสชัน, และอุปกรณ์ที่เชื่อถือ) ต้องการการยืนยันตัวตนล่าสุดของผู้ใช้ (urn:logto:acr:1fa หรือสูงกว่า) ภายในช่วงเวลาการยืนยันตัวตนล่าสุดที่กำหนดใน tenant (10 นาทีโดยค่าเริ่มต้น ปรับได้ตั้งแต่ 1 ถึง 120 นาทีใน Console > Sign-in & account > Account center) หากผู้ใช้เพิ่งลงชื่อเข้าใช้หรือสมัครด้วยวิธีที่ผ่านเกณฑ์ จะไม่แสดง prompt เพิ่มเติม หากการลงชื่อเข้าใช้ไม่มี 1fa (เช่น social sign-in) หรือเกินช่วงเวลา ศูนย์บัญชีผู้ใช้จะเรียกใช้ การยืนยันตัวตนแบบ step-up ของ OIDC และดำเนินการที่ค้างไว้ต่อโดยอัตโนมัติ
• โค้ดยืนยัน: การอัปเดตอีเมลและโทรศัพท์ต้องใช้โค้ดยืนยันที่ส่งไปยังที่อยู่/หมายเลขใหม่
• การตรวจสอบเซสชัน: ทุกการดำเนินการจะตรวจสอบเซสชันของผู้ใช้เพื่อป้องกันการเข้าถึงโดยไม่ได้รับอนุญาต

ตัวเลือกการปรับแต่ง

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

• โลโก้และสี
• โหมดมืด / สว่าง
• การตั้งค่าภาษา

CSS กำหนดเอง

คุณสามารถปรับแต่งรูปลักษณ์ของ UI ศูนย์บัญชีผู้ใช้เพิ่มเติมได้โดยเพิ่ม CSS ของคุณเอง ไปที่ Console > Sign-in & account > Account center และเพิ่ม CSS ในตัวแก้ไข Custom CSS

UI ศูนย์บัญชีผู้ใช้ที่สร้างไว้ล่วงหน้ามีชื่อคลาส CSS ที่คงที่ขึ้นต้นด้วย logto_ac- ในองค์ประกอบ UI หลัก (container, header, section, card ฯลฯ) เพื่อให้ง่ายต่อการกำหนดเป้าหมาย คุณจึง override สไตล์เริ่มต้นได้โดยไม่ต้องกังวลว่าชื่อคลาสจะเปลี่ยนในแต่ละเวอร์ชัน

ตัวอย่าง:

/* ซ่อนลายน้ำ Logto */
.logto_ac-logto-signature {
  display: none;
}

/* ปรับแต่งการ์ดส่วนความปลอดภัย */
.logto_ac-security-card {
  border-radius: 12px;
}

หากคุณต้องการปรับแต่งมากกว่าที่ UI ที่สร้างไว้ล่วงหน้าและ CSS กำหนดเองรองรับ ให้พิจารณาใช้ Account API เพื่อสร้างหน้าจัดการบัญชีของคุณเอง

แหล่งข้อมูลที่เกี่ยวข้อง

• การตั้งค่าบัญชีผู้ใช้ด้วย Account API - สร้างหน้าจัดการบัญชีเองด้วยการควบคุม API เต็มรูปแบบ
• การตั้งค่าบัญชีผู้ใช้ด้วย Management API - การจัดการบัญชีในระดับผู้ดูแลระบบ
• การตั้งค่า MFA - ตั้งค่าการยืนยันตัวตนหลายปัจจัย
• อุปกรณ์ที่เชื่อถือสำหรับ MFA - กำหนดและจัดการความไว้วางใจเบราว์เซอร์แบบจำกัดเวลา