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

ปรับให้ตรงกับแบรนด์ของคุณ

ประสบการณ์การลงชื่อเข้าใช้แบบ Omni​

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

สีประจำแบรนด์​

กำหนดสีหลักที่ใช้ตลอดประสบการณ์การลงชื่อเข้าใช้ รวมถึงปุ่มหลัก ลิงก์ และองค์ประกอบอื่น ๆ แทนที่สีม่วงเริ่มต้นของ Logto ด้วยสีของแบรนด์คุณ สำหรับโหมดมืด (dark mode) สามารถระบุสีประจำแบรนด์แยกต่างหากได้

โลโก้จะแสดงในหน้าแรกของการลงชื่อเข้าใช้ หน้าแรกของการสมัครสมาชิก หน้าโหลด และอินเทอร์เฟซอื่น ๆ ที่เราขยายไว้

  • มีข้อจำกัดสำหรับรูปภาพ: ต้องมีขนาดไม่เกิน 500KB และอยู่ในรูปแบบ SVG, PNG, JPG, JPEG หรือ ICO
  • หากคุณเว้นช่องโลโก้ไว้ โลโก้จะไม่แสดงในอินเทอร์เฟซ
  • สามารถอัปโหลดโลโก้เวอร์ชันโหมดมืดได้เช่นกัน

Favicon​

Favicon คือไอคอนขนาดเล็กที่แสดงถึงเว็บไซต์ และจะแสดงในแท็บเบราว์เซอร์ บุ๊กมาร์ก และพื้นที่อื่น ๆ ของอินเทอร์เฟซเบราว์เซอร์

  • รูปภาพต้องมีขนาดไม่เกิน 500KB และอยู่ในรูปแบบ SVG, PNG, JPG, JPEG หรือ ICO แนะนำให้อัปโหลดภาพสี่เหลี่ยมจัตุรัสเพื่อให้แสดงผลได้ดี
  • สามารถอัปโหลด favicon เวอร์ชันโหมดมืดได้เช่นกัน
  • นอกจากนี้ ชื่อแท็บเบราว์เซอร์สำหรับแต่ละ flow (ลงชื่อเข้าใช้/สมัครสมาชิก/ลืมรหัสผ่าน ฯลฯ) จะถูกใช้แทนชื่อที่กำหนดเอง

โหมดมืด​

เปิดใช้งานโหมดมืดเพื่อปรับรูปลักษณ์ของหน้าลงชื่อเข้าใช้โดยอัตโนมัติตามการตั้งค่าระบบของผู้ใช้

ซ่อนแบรนด์ Logto​

โดยค่าเริ่มต้น หน้าประสบการณ์การลงชื่อเข้าใช้จะแสดงข้อความ "Powered by Logto" ที่ด้านล่าง เปิดใช้งานตัวเลือก "ซ่อนแบรนด์ Logto" เพื่อเอาเครื่องหมาย Logto ออกและสร้างประสบการณ์การลงชื่อเข้าใช้ที่ดูสะอาดตาและเป็นมืออาชีพซึ่งแสดงเฉพาะเอกลักษณ์ของแบรนด์คุณเท่านั้น

การตั้งค่าแบรนด์เฉพาะแอป​

หากธุรกิจของคุณมีหลายแอปและต้องการประสบการณ์การลงชื่อเข้าใช้ในแต่ละแอป สามารถตั้งค่าได้ในหน้ารายละเอียดแอป ไปที่ Console > Applications

โดยการเปิดใช้งาน "ประสบการณ์การลงชื่อเข้าใช้ระดับแอป" คุณสามารถตั้งค่าโลโก้ Favicon สี และแม้แต่ CSS กำหนดเอง สำหรับแต่ละแอป เมื่อมีการเริ่มต้นลงชื่อเข้าใช้จากแอปที่เปิดใช้งานการตั้งค่าแบรนด์ระดับแอป ประสบการณ์การลงชื่อเข้าใช้จะถูกปรับแต่งตามการตั้งค่าแบรนด์ของแอปนั้น ๆ หากไม่เปิดใช้งาน จะใช้การตั้งค่าประสบการณ์การลงชื่อเข้าใช้แบบ omni เป็นค่าเริ่มต้น

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

การตั้งค่าแบรนด์เฉพาะองค์กร​

หากต้องการแสดงโลโก้องค์กรของลูกค้าแบบไดนามิกในประสบการณ์การลงชื่อเข้าใช้ สามารถอัปโหลดโลโก้องค์กรได้ในหน้าตั้งค่าองค์กร ไปที่ Console > Organizations

โดยการเปิดใช้งาน "ประสบการณ์การลงชื่อเข้าใช้ระดับองค์กร" เช่นเดียวกับแบรนด์ระดับแอป คุณสามารถตั้งค่าโลโก้ Favicon สี และ CSS กำหนดเอง สำหรับแต่ละองค์กรได้เช่นกัน

จากนั้น เมื่อมีการเรียกใช้งานลงชื่อเข้าใช้ คุณสามารถส่งค่า organization ID ในพารามิเตอร์ organization_id เพื่อบอก Logto ว่าจะแสดงโลโก้องค์กรใด ตัวอย่างเช่น หากต้องการแสดงโลโก้องค์กรสำหรับ organization ID 123456:

  • หากคุณใช้ Logto SDK สามารถส่งพารามิเตอร์ organization_id ในอ็อบเจกต์ extraParams ของเมธอด signIn
  • หากคุณใช้ OIDC client สามารถส่งพารามิเตอร์ organization_id เมื่อเรียกขอ authorization endpoint

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

บันทึก:

หากเปิดใช้งานทั้งแบรนด์ระดับแอปและแบรนด์ระดับองค์กร แบรนด์ระดับองค์กรจะมีลำดับความสำคัญสูงกว่า ลำดับความสำคัญทั้งหมดคือ: แบรนด์ระดับองค์กร -> แบรนด์ระดับแอป -> ประสบการณ์การลงชื่อเข้าใช้แบบ omni

นี่คือตัวอย่างการส่งพารามิเตอร์ organization_id ในเมธอด signIn โดยใช้ Logto browser SDK:

index.ts

logtoClient.signIn({
  // ...พารามิเตอร์อื่น ๆ
  redirectUri: 'https://your-redirect-uri',
  extraParams: {
    organization_id: '123456',
  },
});
บันทึก:

เรากำลังทยอยเปิดใช้งานฟีเจอร์ extraParams ใน Logto SDK ทุกตัว หากยังไม่พบใน SDK ของคุณ กรุณาติดต่อเรา

วิธีปรับแต่งประสบการณ์การลงชื่อเข้าใช้สำหรับแต่ละแอปหรือองค์กร?