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

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

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

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

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

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

โลโก้บริษัท

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

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

Favicon

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

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

โหมดมืด

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

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

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

โดยการเปิดใช้งาน "App-level sign-in experience" คุณสามารถตั้งค่าโลโก้แบรนด์, favicon, สี และแม้แต่ custom CSS เฉพาะแต่ละแอปได้ เมื่อมีการเริ่มต้นลงชื่อเข้าใช้จากแอปที่เปิดใช้งานการตั้งค่าแบรนด์ระดับแอป ประสบการณ์การลงชื่อเข้าใช้จะถูกปรับแต่งตามการตั้งค่าแบรนด์ของแอปนั้น ๆ หากไม่ได้เปิดใช้งาน จะใช้การตั้งค่าจาก omni sign-in experience เป็นค่าเริ่มต้น

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

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

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

โดยการเปิดใช้งาน "Organization-level sign-in experience" เช่นเดียวกับการตั้งค่าแบรนด์ระดับแอป คุณสามารถตั้งค่าโลโก้แบรนด์, favicon, สี และ custom CSS เฉพาะแต่ละองค์กรได้เช่นกัน

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

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

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

บันทึก:

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

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

index.ts

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

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

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