การตั้งค่าบัญชีด้วย 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 ขั้นตอน, บัญชีโซเชียล, เซสชัน)
/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

วิธีที่ 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: 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 parameter ต่อไปนี้ใน URL ของศูนย์บัญชีผู้ใช้เพื่อปรับแต่งประสบการณ์:

พารามิเตอร์	คำอธิบาย
redirect	URL แบบสัมบูรณ์ที่จะส่งผู้ใช้กลับหลังจากดำเนินการเสร็จ รับเฉพาะ URL http(s) เท่านั้น
show_success	เมื่อกำหนดเป็น true ปลายทาง (เช่น URL redirect ของคุณ) จะได้รับ query parameter show_success เพื่อให้คุณแสดงข้อความยืนยันได้
identifier	เติมค่า identifier ล่วงหน้าในหน้าที่กำหนดเป้าหมาย (/account/email, /account/phone, /account/username) เหมาะสำหรับ deep-link จากแอปของคุณเมื่อทราบ identifier ของผู้ใช้แล้ว
ui_locales	รายการ tag ภาษา 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 เพื่อ sign-in และจะถูกใช้เพียงครั้งเดียวโดยหน้าที่กำหนดเป้าหมาย

ลิงก์ลบบัญชี

ศูนย์บัญชีผู้ใช้ไม่รองรับการลบบัญชีโดยตรง คุณสามารถกำหนด 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

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)