# Login Page

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

![](https://71561992-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M-OjnKhMWq_4gll0i0s%2Fuploads%2FMZyC78Bynwn42kG3Ez9t%2Flogin%20page%202.JPG?alt=media\&token=9d9b00aa-43b3-439a-815e-cdb81fcdc8a0)

![](https://71561992-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M-OjnKhMWq_4gll0i0s%2Fuploads%2FLZMgvIqbTGX24JVF2AQi%2FEdit%20login%20page.jpg?alt=media\&token=cfcf77a3-2243-4e4a-9497-547e63893fa7)

### **Login Page Create**

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

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

<figure><img src="https://71561992-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M-OjnKhMWq_4gll0i0s%2Fuploads%2FX7Dz7HOZBYuHJ846jZLJ%2Fimage.png?alt=media&#x26;token=652c6f6a-9399-40d0-8ed7-356d391a5096" alt=""><figcaption></figcaption></figure>

#### **Preview Setting**

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

![](https://71561992-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M-OjnKhMWq_4gll0i0s%2Fuploads%2FKrjZw9XaxhymeoKF4mr2%2FLogin%20Page%20Create%20Preview.PNG?alt=media\&token=474ad13f-a5a7-483e-9c89-32f596f96436)

![PC Mode](https://71561992-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M-OjnKhMWq_4gll0i0s%2Fuploads%2FnFqMb2Xu9s2rPAxFEVvC%2FLogin%20Page%20Create%20Preview1.PNG?alt=media\&token=3bf3ea68-04fe-432c-8831-7d8f6616e2ba) ![Mobile Mode](https://71561992-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M-OjnKhMWq_4gll0i0s%2Fuploads%2FUA7mZHFCw2FRjkF6H3KB%2FLogin%20Page%20Create%20Preview2.PNG?alt=media\&token=b62942c7-9229-431f-afbb-1024d27f7f38)

#### Page Setting

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

* Page Name: สำหรับตั้งชื่อหน้า Login ที่จะสร้างขึ้น
* Layout : กำหนดวิธีการแสดงภาพพื้นหลัง เฉพาะหน้าจอแบบ PC
* Login Method : กำหนดเปิดปิดวิธีลงชื่อเข้าใช้งาน และหรือปุ่มสำหรับจัดการข้อมูลของผู้ใช้ มีให้เลือกดังนี้
  * User/Pass : กำหนดให้ผู้ใช้งานสามารถลงชื่อเข้าใช้งานด้วยการกรอกชื่อผู้ใช้งานและรหัสผ่านที่ได้รับมา หรือใช้ซ้ำชื่อผู้ใช้งานที่ยังไม่หมดอายุ รายละเอียดสามารถดูเพิ่มเติมได้จากเมนู [User Account](https://manual.seara.biz/site-management/user-management/user-account)&#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](https://manual.seara.biz/systems/third-party-apis)
  * Social Login : กำหนดให้ผู้ใช้งานสามารถลงทะเบียนใช้งานด้วย Account Social Media ได้ โดยผู้ใช้งานจะต้องอนุญาติให้ทางระบบ SEARA เข้าถึงข้อมูล จาก Platform ที่เลือก รายละเอียดเป็นไปตามเงื่อนไขการให้บริการของ Platform ที่เลือก โดยผู้ดูแลจะต้องตั้งการการเชื่อมต่อกับ Azure AD ใน [Third-party APIs](https://manual.seara.biz/systems/third-party-apis)\
    โดยระบบเปิดรับการลงทะเบียนด้วย Platform ต่อไปนี้&#x20;
    * Facebook&#x20;
    * Line
    * Twitter&#x20;

<figure><img src="https://71561992-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M-OjnKhMWq_4gll0i0s%2Fuploads%2FZnUN7fpeZw3nt3Hj000F%2F10.PNG?alt=media&#x26;token=e3e9dca1-3740-42a9-9ed3-e34219587c40" 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="https://71561992-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M-OjnKhMWq_4gll0i0s%2Fuploads%2Fz7MtJfpPuw7rCMISzvLo%2Fimage.png?alt=media&#x26;token=727dd33b-82c1-4c38-b9fc-df154c37d7fc" 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="https://71561992-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M-OjnKhMWq_4gll0i0s%2Fuploads%2F7wVIo9yEPblYZ1S9zMHo%2Fimage.png?alt=media&#x26;token=fb6cf200-2c65-4512-9af3-5b977c215815" alt=""><figcaption></figcaption></figure>

&#x20;                                          &#x20;

### Login Page Edit

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

<figure><img src="https://71561992-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M-OjnKhMWq_4gll0i0s%2Fuploads%2FrJ4SCgTYITk7lkGAGKC1%2Fimage.png?alt=media&#x26;token=43520337-d382-4e45-8af0-6e58fe9395fd" alt=""><figcaption></figcaption></figure>

### Login Page Preview

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

![](https://71561992-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M-OjnKhMWq_4gll0i0s%2Fuploads%2F0H0m0IFbK0yiTzbvnZ2f%2FLogin%20Page%20Preview.PNG?alt=media\&token=3f8b0634-74ab-489b-8e95-d54118eedd62)