Post Views: 201
ใช้ plugin ชื่อว่า WPO365 วิธีการตั้งค่าเพื่อใช้งาน single sign on ของ Microsoft365 ในการล็อคอินเข้าระบบของ WordPress
Authentication
- ต้องเซ็ต HTTPS ที่เว็บให้เสร็จเรียบร้อย
- สำคัญ!!! จำเป็นต้องมีสิทธิ์ Global Administrator บน Azure
- Login เข้าเว็บ https://portal.azure.com มองหา Azure Active Directory
- ซ้ายมือเลื่อนหาคำว่า App registrations
- คลิก + New registration แล้วกรอกชื่อที่ต้องการในช่อง Name ในส่วนของ Supported account types เลือก Accounts in this organizational directory only (Prince of Songkla University only – Single tenant)

- เลื่อนลงมาจนเจอคำว่า Redirect URI (Optional) เลือก Web ในช่อง select platform และกรอกชื่อเว็บ https://licensing.psu.ac.th/wp-admin/ ลงไปในช่องถัดมา แล้วคลิก Register

- หน้าถัดไป คลิก Token configuration บนเมนูซ้ายมือ จากนั้นคลิก + Add optional claim เลือก Token Type เป็น ID และเลือกหัวข้อด้านล่าง ดังนี้ email, family_name, given_name และ upn แล้วคลิกปุ่ม Add จะมีให้ Add optional claim เพิ่ม ให้ติ๊กถูกแล้วกด Turn on the Microsoft Graph email, profile permission (required for claims to appear in token). แล้ว Add จะได้

- คลิก API permissions ที่เมนูซ้ายมือ แล้วคลิก + Add permission คลิก Microsoft Graph แล้วคลิก Delegated และเลือกหัวข้อดังต่อไปนี้ (พิมพ์ในช่อง Search ได้เลย) email, offline_access, openid และ profile แล้วคลิก Add permissions



จากนั้นคลิก Grant admin consent for Prince of Songkla University แล้วคลิก Yes

- คลิก Certificates & Secrets ที่เมนูซ้ายมือ คลิก + New client secret ตั้งชื่อในช่อง Description และเลือกวันหมดอายุ คลิก Add จากนั้นให้ copy ค่าของช่อง Value เก็บไว้

- กลับมาที่ https://licensing.psu.ac.th หลังจากติดตั้งปลักอินชื่อ WPO365 | LOGIN และเปิดใช้งาน (activate) เรียบร้อยแล้ว
- คลิก WPO365 ที่ด้านซ้ายมือล่างสุด เปิดใช้งาน SINGLE SIGN-ON (SSO) แล้วคลิก configure
- กรอกข้อมูลดังนี้
- Select Identity Provider (IdP) เลือก Azure AD (default)
- Select SSO-protocol เลือก OpenID Connect (default)
- Select OpenID Connect flow เลือก Auth.-code flow (recommended)
- Application (Client) Secret นำค่าที่ copy เก็บไว้ในข้อ 9 มาใส่ช่องนี้
- Directory (tenant) ID นำค่าที่ได้จากหน้า Overview ของ lsc ชื่อฟิลด์ Directory (tenant) ID
- Application (Client) ID นำค่าที่ได้จากหน้า Overview ของ lsc ชื่อฟิลด์ Application (client) ID
- Redirect URI View in Azure Portal ใส่ว่า https://licensing.psu.ac.th/
- Domain hint View Custom domain names ใส่ว่า psu.ac.th, email.psu.ac.th
- Add prompt=select_account parameter ติ๊กถูก
- กด Save configuration ด้านล่าง แล้วจะมีหน้า Important ขึ้นมากด Confirm
- คลิกแท็บ User Registeration ด้านล่างกรอกดังนี้
- Custom domains View Custom domain names กรอก psu.ac.th และคลิก + เพิ่มอีกช่องพิมพ์ email.psu.ac.th
- เลื่อนลงมาล่างสุดกด Save configuration
- คลิกแท็บ Plugin self-test เลื่อนลงมาด้านล่าง กด Start self-test จะถูก redirect ไปหน้า log in ของ mail ให้ Log in ตามปกติ แล้วจะเด้งกลับมาหน้าของ https://licensing.psu.ac.th หากล็อคอินไม่ผ่านให้กลับไปหน้า https://portal.azure.com คลิก App registrations แล้วเลือก lsc แล้วคลิก Authentication คลิก Add URI เพิ่ม https://licensing.psu.ac.th เข้าไปอีก 1 url กด save กลับไปล็อคอินอีกครั้งน่าจะได้แล้ว
