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

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

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

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

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

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

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

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

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

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

Pathคำอธิบาย
/account/emailอัปเดตอีเมลหลัก
/account/phoneอัปเดตหมายเลขโทรศัพท์หลัก
/account/usernameอัปเดตชื่อผู้ใช้
/account/passwordตั้งค่าหรืออัปเดตรหัสผ่าน
/account/passkey/addเพิ่ม passkey ใหม่ (WebAuthn)
/account/passkey/manageดูและจัดการ passkey ที่มีอยู่
/account/authenticator-appตั้งค่าแอปยืนยันตัวตนแบบ 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 เพื่อซ่อนฟิลด์นั้นโดยสมบูรณ์

ในการใช้ 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>การตั้งค่าบัญชี</h2>

      <div>
        <span>อีเมล: user@example.com</span>
        <a href={`${tenantEndpoint}/account/email?redirect=${redirectUrl}`}>อัปเดตอีเมล</a>
      </div>

      <div>
        <span>รหัสผ่าน: ••••••••</span>
        <a href={`${tenantEndpoint}/account/password?redirect=${redirectUrl}`}>เปลี่ยนรหัสผ่าน</a>
      </div>

      <div>
        <span>MFA: ยังไม่ได้ตั้งค่า</span>
        <a href={`${tenantEndpoint}/account/authenticator-app?redirect=${redirectUrl}`}>
          ตั้งค่า 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>อัปเดตอีเมลเรียบร้อยแล้ว!</div>}
      {showSuccess === 'password' && <div>อัปเดตรหัสผ่านเรียบร้อยแล้ว!</div>}
      {/* ... ส่วนอื่น ๆ ของหน้าการตั้งค่า */}
    </div>
  );
}

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

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

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

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

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

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

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