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

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

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

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

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

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

โลโก้บริษัท

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

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

Favicon

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

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

โหมดมืด

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

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

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

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

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

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

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

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

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

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

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

index.ts

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

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

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