Back

มาทำให้ App ให้เข้าใช้งานง่าย ๆ ด้วย OIDC Module กัน

เกริ่นนำ

ในการพัฒนา web app หรือ mobile app ต่าง ๆ ก็จะมีส่วนที่สำคัญสำหรับ application นั้น ๆ ก็คือ เรื่องของการเข้าใช้งานระบบ หรือที่เรียกว่า Login/Sign-in ซึ่งปกติเราก็จะมี Username/Password เพื่อเข้าไปใน app นั้น แต่ปัญหาที่พบกันบ่อย ๆ ก็คือ จำชื่อ Username/Password ไม่ได้! เพราะแต่ละ application ก็อาจจะมี Username/Password ที่อาจจะเหมือนหรือแตกต่างกันไป ดังนั้นจึงมีตัว Authentication กลาง หรือที่เราเรียกว่า Identity Provider (idP) เพื่อให้เราไม่ต้องจำอะไรเยอะ ในส่วนของ application ก็จะมีการรับค่าจาก idP มาใช้งานต่อ ในหัวข้อนี้เราจะมี module ที่จะมาช่วยในการทำเรื่องเหล่า ที่เรียกว่า Single-SignOn (SSO) ด้วย OpenID Connect (OIDC) กัน

หลักการการทำงาน

ก่อนอื่นเรามาทำความเข้าใจการทำงานของใช้งาน SSO กันก่อน แบบสั้น การทำงานจะประกอบไปด้วย 3 ส่วน คือ

  • Client ก็คือ Web Browser หรืออาจจะเป็น Mobile App
  • Server ก็คือ Mendix Application สำหรับจะจัดการเกี่ยวกับ Session ของผู้ใช้งาน
  • Authentication Server ก็คือ OpenID Provider/Identity Provider เรียกสั้น ๆ ว่า OP/idP สำหรับเก็บ Session ของผู้ใช้งานเพื่อให้ application อื่นที่ต้องการใช้งานก็สามารถเข้าใช้งานได้ทันที!!!

เมื่อเรารู้องค์ประกอบสำหรับการทำงานของ SSO แล้ว เรามาทำความเข้าเพิ่มเติมกันอีกนิด เรื่องของการคุยกันของทั้งสามส่วน 1

สิ่งที่จำเป็น

เมื่อเข้าใจหลักการทำงานของ SSO แล้ว เรามาเตรียมความพร้อมสำหรับการใช้งาน SSO กัน ซึ่งจะมีสิ่งที่เราต้องใช้นั่นก็คือ

  1. idP ซึ่งก็มีผู้ให้บริการอยู่หลากหลายทั้งที่เป็นแบบ Public, Private หรือ On-Premise ยกตัวอย่างเช่น Google, Facebook, Instagram, Tiktok หรือ Azure EntraID ก็มีให้บริการเช่นกัน ซึ่งในบทความนี้เราจะใช้บริการของ Azure EntraID
  2. OIDC Module

การติดตั้งและตั้งค่าต่าง ๆ

มาถึงขั้นตอนการนำส่วนต่าง ๆ มาใช้งานใน Application แล้ว ซึ่งเราจำสร้าง Mendix Application ด้วย Studio Pro 10.18.1 และ Download module ต่าง ๆ ที่จำเป็นสำหรับการใช้งาน ซึ่ง Module ที่ใช้งานจะประกอบไปด้วย

ติดตั้งอะไรบ้าง

  • Download OIDC SSO module มา และ Dependency module ที่ต้องใช้ตามด้านล่างเลยครับ

หลังจากทำการ Download module ต่าง ๆ เรียบร้อยแล้วจะพบว่ามี Error ต่าง ๆ ที่แสดงในแท็บ ก็สามารถดำเนินการแก้ไขตามคำแนะนำได้เลย (คลิ๊กขวา..)

กำหนดค่าต่าง ๆ

  • เริ่มต้นจาก Security ก็ทำการกำหนดของ app กับ module ต่าง ๆ อย่าลืมเปิด Anonymous users ด้วยนะครับ
  • ส่วนของ Navigation ต่าง ๆ ที่ใช้สำหรับการกำหนดค่าต่าง ๆ ก็คือ หน้าสำหรับ Anonymous ส่วนนี้เราจะต้องสร้างหน้า Login และกำหนด Role-based home pages
  • เมนูสำหรับ Accounts, Reflection และ OIDC Configuration
    • Account เราจะใช้หน้าที่ชื่อว่า Account_Overview (Page) สำหรับเข้าไปจัดการผู้ใช้งาน
    • Reflection เราจะใช้หน้าที่ชื่อว่า MxObjects_Overview (Page) สำหรับเข้าไปเรียกใช้งาน Entity/Attribute/Association กับ Microflow ในการกำหนดค่าต่าง ๆ
    • OIDC เราจะใช้หน้าที่ชื่อว่า OIDC_Client_Overview (Page) สำหรับเข้าไปกำหนดเพื่อเข้าใจงาน SSO
    • Logout เราจะใช้ Nanoflow ที่ชื่อว่า ACT_Logout เพื่อให้การ Logout จะ logout ทั้ง Application และ idP

สุดท้ายของการกำหนดค่าต่าง ๆ คือ กำหนดค่า Constants ของ EncryptionKey เพื่อ encrypt ค่าต่าง ๆ

การตั้งค่าใน App

เมื่อพร้อมสำหรับการตั้งค่าการเชื่อมต่อระหว่าง App กับ idP แล้วให้ทำการ Run App จะได้หน้า Login เพื่อใช้ในการทำ SSO

ก่อนที่เราจะเริ่มการตั้งค่าใน App เราจะต้องไป Register Application ของเราบน idP ซึ่งในบทความนี้เราจะใช้บริการของ Azure EntraID

  1. ไปที่ https://portal.azure.com/
  2. ไปที่เมนู App registrations เพื่อทำการเพิ่ม Application
    • กดปุ่มบวก New Registration
    • ตั้งชื่อ App และ Redirect URI ในส่วนจะเป็น URI ที่จะวิ่งกลับไปเพื่อไปทำงานต่อ ในส่วนนี้เราจะใส่เป็น http://localhost:8080/oauth/v2/callback เพื่อทดสอบระหว่างการพัฒนา เมื่อ deploy ไปยัง environment ต่าง ๆ ก็ต้องเป็น domain ของ environment นั้น ๆ (อยู่ในเมนู Manage > Authentication)
  • ไปที่เมนู Manage > Certification & secrets เพื่อทำการสร้าง Client secrets ไว้ใช้งาน ในส่วนนี้ก็ให้เรากดปุ่มบวก New client secret แล้วใส่ Description กำหนดวันหมดอายุ
  • สิ่งที่จะนำไปใช้ใน App ของเราก็คือ Client ID, Secret Key และ .well-known (กด icon รูปโลก Endpoints)

สำหรับการตั้งค่าต่าง ๆ ของ Application สามารถทำได้ดังนี้

  • ไปที่เมนู Reflection ให้ทำการ Synchronize module คือ Administration, OIDC, System และ UserCommons
  • ไปที่เมนู OIDC และทำการ New Configuration และกรอกข้อมูลต่าง ๆ
    • Client ID
    • Secret Key
    • Import well-known
    • Scope เลือกเป็น email, openid, profile
    • Save

เพียงแค่นี้ก็สามารถทดสอบการทำงานได้ แต่ตอน Logout จะพบปัญหาเกี่ยวกับ Security Reason ซึ่งสาเหตุเกิดจากปุ่ม Logout ไม่มีสิทธิในการใช้ Nanoflow Logout วิธีแก้ไขก็คือ ต้องให้ Administrator เป็น User ใน OIDC ด้วย

ทดสอบการทำงาน

สำหรับการทดสอบการใช้งานถ้าเรามี OIDC Configuration แค่ 1 Configure หน้า Login จะแสดงแค่ 3 วินาที หลังจากนั้นจะวิ่งไปที่ idP เพื่อให้เรา Login

เมื่อ Login ที่ idP เรียบร้อยแล้วก็สามารถเข้าใช้งาน Application ได้ด้วย UserRole ที่เป็น User

สิ่งที่สามารถปรับแต่งเพิ่มเติม

จากการทดสอบเบื่องต้นเราสามารถใช้งาน SSO ได้ แต่มีอย่างที่เราต้องปรับแต่งเพื่อให้ตรงกับความต้องการของเรา ในบทความนี้เราจะยกตัวอย่างการปรับแต่งแค่บางส่วน เช่น

  • จุดที่รับค่าต่าง ๆ มาจาก idP นั้น จะเป็น Microflow ชื่อ webCallback ซึ่งเราจะไม่ได้ทำการ custom ในส่วนนี้
  • ต้องการให้ Username ที่สร้างขึ้นใช้เป็น Email จะทำอย่างไร?
    • เราสามารถปรับ Configuration ในส่วนของ User Provisioning
  • ถ้าต้องการ Custom Logic หรือข้อมูลอะไรเกี่ยวกับ User เราสามารถสร้าง Microflow เพื่อใช้สำหรับการ Custom ในส่วนนี้ แต่ต้องตั้งชื่อ ขึ้นต้นด้วย UC_CustomProvisioning สามารถทำได้ดังนี้
    • Copy Microflow ชื่อว่า UserProvisioning_Sample ไปที่ module ใหม่
    • สร้าง Microflow ชื่อว่า UC_CustomProvisioning เพื่อทำการใส่ logic ต่าง ๆ สำหรับ User ซึ่งต้องรับ Parameter 2 ค่า คือ และส่งค่ากลับมาด้วย UserInfoParam object

สรุป

  • ในการทำระบบ SSO นั้นไม่ได้ยากสามารถใช้ module ที่มีอยู่ใน Marketplace มาใช้งานได้เลย
  • การ Configuration ต่าง ๆ สามารถดูได้จาก Documentation ของ Mendix -> https://docs.mendix.com/appstore/modules/oidc/
  1. https://openid.net/developers/how-connect-works/ ↩︎