> For the complete documentation index, see [llms.txt](https://manual.seara.biz/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://manual.seara.biz/site-management/hotspot-management/login-page.md).

# Login Page

หน้า Login Page แสดงข้อมูลหน้าเข้าสู่ระบบที่มีการบันทึกไว้ในระบบ โดยผู้ดูแลสามารถสร้าง แก้ไข แสดงตัวอย่าง หรือลบข้อมูลได้

![](/files/mIjI4sRUNF2N9w6d3u14)

![](/files/xVHvfajWhOFoTYWzmTyT)

### **Login Page Create**

ผู้ดูแลระบบ สามารถสร้าง Login Page ได้โดยเลือก "Create Your Authentication Page" 

ผู้ดูแลระบบสามารถเปลี่ยนโลโก้ สีพื้น ข้อความในหน้า Login และเปิดปิดวิธีลงชื่อเข้าใช้งานได้ตามต้องการ โดยแบ่งเป็นส่วนๆได้ดังนี้

<figure><img src="/files/NVBamKpBrXw2xvqBEkKD" alt=""><figcaption></figcaption></figure>

#### **Preview Setting**

ตั้งค่าการแสดงหน้าจอตัวอย่างด้านซ้าย สามารถเลือกได้ว่าจะแสดงหน้าจอตัวอย่างแบบ PC (หน้าจอขนาดใหญ่) หรือ Mobile (หน้าจอขนาดเล็ก)

![](/files/wPmyn69Sq40NmhuAHMXh)

![PC Mode](/files/JK5ZAAeAkivJ55mqVf2f) ![Mobile Mode](/files/HWszfMeHJ3hu4sSBgGU6)

#### Page Setting

ตั้งชื่อ Page กำหนด Layout และกำหนดวิธีลงชื่อเข้าใช้งานแบบต่างๆ ที่จะแสดง

* Page Name: สำหรับตั้งชื่อหน้า Login ที่จะสร้างขึ้น
* Layout : กำหนดวิธีการแสดงภาพพื้นหลัง เฉพาะหน้าจอแบบ PC
* Login Method : กำหนดเปิดปิดวิธีลงชื่อเข้าใช้งาน และหรือปุ่มสำหรับจัดการข้อมูลของผู้ใช้ มีให้เลือกดังนี้
  * User/Pass : กำหนดให้ผู้ใช้งานสามารถลงชื่อเข้าใช้งานด้วยการกรอกชื่อผู้ใช้งานและรหัสผ่านที่ได้รับมา หรือใช้ซ้ำชื่อผู้ใช้งานที่ยังไม่หมดอายุ รายละเอียดสามารถดูเพิ่มเติมได้จากเมนู [User Account](/site-management/user-management/user-account.md)&#x20;
  * Forget Password : กำหนดให้ผู้ใช้งานสามารถเปลี่ยนรหัสผ่านได้ด้วยตนเอง ในกรณีลืมรหัสผ่าน ระบบจะส่งรหัสผ่านใหม่ทางอีเมลหรือเบอร์โทรศัพท์ที่ลงทะเบียนไว้
  * Register with Email : กำหนดให้ผู้ใช้งานสามารถลงทะเบียนด้วยอีเมล โดยกรอกข้อมูล Email และตั้งรหัสผ่านด้วยตัวเอง เมื่อลงทะเบียนแล้วจะได้รับชื่อผู้ใช้งานเป็น Email ของตัวเอง&#x20;
  * Register with Phone number : กำหนดให้ผู้ใช้งานสามารถลงทะเบียนด้วยเบอร์โทรศัพท์มือถือ เมื่อลงทะเบียนแล้วระบบจะส่งรหัสผ่านที่สุ่มให้ทาง SMS&#x20;
  * Login with Azure AD : กำหนดให้ผู้ใช้งานสามารถลงทะเบียนใช้งานด้วย Account จาก Azure AD โดย\
    ผู้ดูแลจะต้องตั้งการการเชื่อมต่อกับ Azure AD ใน [Third-party APIs](/systems/third-party-apis.md)
  * Social Login : กำหนดให้ผู้ใช้งานสามารถลงทะเบียนใช้งานด้วย Account Social Media ได้ โดยผู้ใช้งานจะต้องอนุญาติให้ทางระบบ SEARA เข้าถึงข้อมูล จาก Platform ที่เลือก รายละเอียดเป็นไปตามเงื่อนไขการให้บริการของ Platform ที่เลือก โดยผู้ดูแลจะต้องตั้งการการเชื่อมต่อกับ Azure AD ใน [Third-party APIs](/systems/third-party-apis.md)\
    โดยระบบเปิดรับการลงทะเบียนด้วย Platform ต่อไปนี้&#x20;
    * Facebook&#x20;
    * Line
    * Twitter&#x20;

<figure><img src="/files/B0FyMBCBKYfoWfyV9mpq" alt=""><figcaption></figcaption></figure>

#### Customization&#x20;

สำหรับปรับแต่งรูปแบบหน้าจอลงชื่อเข้าใช้งาน เช่น สีพื้นหลัง, รูปภาพ, ตัวอักษรที่แสดง

* Basic : ตั้งค่าพื้นหลังและ Logo
  * Background Style : ตั้งค่าพื้นหลัง สามารถเลือกเป็นสีทึบหรือรูปได้
  * Login Card : ตั้งค่าสีพื้นหลังกล่องลงทะเบียน
  * Logo Image : ตั้งค่าการแสดงภาพ Logo
  * Input Field Focus Color : ตั่งค่าสีกล่องข้อความเมื่อถูกเลือก
* Text Style : กำหนดสีของอักษร
* Button Style : กำหนดสีของปุ่ม
* Social Button Style : กำหนดรูปแบบปุ่ม Social Login
* Email Register Style : กำหนดรูปแบบวิธีลงทะเบียนด้วยอีเมล์
* SMS Password Format And Policy : กำหนดรูปแบบรหัสผ่านที่สุ่มสร้างเมื่อลงทะเบียนใช้งาน

<figure><img src="/files/vM3x1yAHVBFERycSciXg" alt=""><figcaption></figcaption></figure>

#### Language&#x20;

สำหรับตั้งค่าภาษาที่แสดงบนหน้าจอ สามารถแก้ไขข้อความได้ตามภาษาที่แสดงในหน้า Login Page ได้สูงสุด  8 ภาษา (ไทย ,อังกฤษ, ญี่ปุ่น,เกาหลี,จีน ,รัซเซีย,เยอร์มัน,ฝรั่งเศษ) โดยเราสามารถเลือกเปิดปิด ภาษาที่ต้องการได้จากการเลือก Check Box ด้านหน้ากล่องภาษา&#x20;

* Default Language : กำหนดภาษาเริ่มต้น
  * use device setting : ระบบจะขอภาษาของอุปกรณ์ ถ้าหากเป็นภาษาที่ไม่รู้จักจะแสดงเป็นภาษาอังกฤษ

โดยสามารถตั้งค่าข้อความภาษาได้ 4 จุด ดังนี้

1. Header : ข้อความด้านบน
2. Footer : ข้อความด้านล่าง
3. Username : ข้อความในกล่อง Username
4. Password : ข้อความในกล่อง Password

ในแต่ละข้อความสามารถตั้งค่าได้ตามนี้

* Adjust Title Position : กำหนดการวางตำแหน่งของข้อความ
* -Language- Content : แก้ไขข้อความ Title ตามแต่ละภาษา สามารถเปลี่ยนภาษาของ Preview ได้โดยกดรูปดวงตาด้านขวา และสามารถแก้ไขข้อความแต่ละภาษาได้ตามต้องการ

<figure><img src="/files/WE5GNWxS34tCZxQ7jVY4" alt=""><figcaption></figcaption></figure>

&#x20;                                          &#x20;

### Login Page Edit

แก้ไขหน้าลงเข้าสู่ระบบ รายละเอียดดูหน้า [Login Page Create](#create-login-page)&#x20;

<figure><img src="/files/tlqpuKRjiZsuDZdEcy6P" alt=""><figcaption></figcaption></figure>

### Login Page Preview

แสดงตัวอย่างหน้าเข้าสู่ระบบ ผู้ดูแลสามารถเลือกแสดงตัวอย่างบนหน้าจอ PC หรือ Mobile ก็ได้

![](/files/uGAXBJK9Lt6DaWzVKXYp)