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

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

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

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

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

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

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

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

Favicon​

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

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

โหมดมืด​

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

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

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

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

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

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

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

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

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

โดยการเปิด "ประสบการณ์การลงชื่อเข้าใช้ระดับองค์กร" เช่นเดียวกับแบรนด์ระดับแอป คุณสามารถตั้งค่าโลโก้แบรนด์, 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 ของคุณ กรุณาติดต่อเรา

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