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

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

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

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

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

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

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

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

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

Path	คำอธิบาย
/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 เพื่อซ่อนฟิลด์นั้นโดยสมบูรณ์

ขั้นตอนที่ 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

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

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

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: user@example.com</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 ที่คุณระบุ พร้อมพารามิเตอร์ show_success (ถ้ามี) คุณสามารถใช้สิ่งนี้เพื่อแสดงข้อความสำเร็จ:

function SettingsPage() {
  const searchParams = new URLSearchParams(window.location.search);
  const showSuccess = searchParams.get('show_success');

  return (
    <div>
      {showSuccess === 'email' && <div>Email updated successfully!</div>}
      {showSuccess === 'password' && <div>Password updated successfully!</div>}
      {/* ... rest of your settings page */}
    </div>
  );
}

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

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

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

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

https://[tenant-id].logto.app/account/email?identifier=user@example.com&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

เมื่อผู้ใช้เชื่อมโยงบัญชีโซเชียลจากศูนย์บัญชีผู้ใช้ Logto จะใช้ redirect URI ที่ต่างจาก flow ลงชื่อเข้าใช้ปกติ โดย callback URL ของศูนย์บัญชีผู้ใช้มีรูปแบบดังนี้:

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

โดย {connectorId} คือ ID ของตัวเชื่อมต่อโซเชียล (ดูได้ที่ Console > Connectors > Social connectors)

ข้อควรระวัง:

คุณต้องเพิ่ม URL นี้ในรายการ Authorized redirect URIs (หรือเทียบเท่า) ใน developer console ของผู้ให้บริการโซเชียล (Google, GitHub, Facebook ฯลฯ) นอกเหนือจาก URL callback ลงชื่อเข้าใช้ปกติ https://[your-tenant-endpoint]/callback/{connectorId} มิฉะนั้น flow การเชื่อมโยงจะล้มเหลวด้วยข้อผิดพลาด redirect URI mismatch

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

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

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

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

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

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

CSS กำหนดเอง

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

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

ตัวอย่าง:

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

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

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

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

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