เพิ่มการยืนยันตัวตนให้กับแอป WordPress ของคุณ (Add authentication to your WordPress application)

ข้อมูล:

เพื่อประสบการณ์ผู้ใช้ที่ดียิ่งขึ้น เราขอแนะนำให้ใช้ ปลั๊กอิน WordPress อย่างเป็นทางการของเรา แทนการทำตามบทแนะนำนี้

บทแนะนำนี้จะแสดงวิธีผสาน Logto เข้ากับเว็บไซต์ WordPress ของคุณ

ข้อกำหนดเบื้องต้น

• บัญชี Logto Cloud หรือ Logto ที่โฮสต์เอง
• สร้างแอปพลิเคชันแบบดั้งเดิมใน Logto แล้ว
• โปรเจกต์ WordPress: ทำตาม คู่มือการติดตั้ง WordPress อย่างเป็นทางการ เพื่อติดตั้งเว็บไซต์ WordPress ของคุณก่อนดำเนินการต่อ

การผสานระบบ

ติดตั้งปลั๊กอิน

เราจะใช้ปลั๊กอิน OpenID Connect Generic เพื่อผสาน Logto ผ่านโปรโตคอล OIDC เข้ากับเว็บไซต์ WordPress ของคุณ

1. เข้าสู่ระบบเว็บไซต์ WordPress ของคุณ
2. ไปที่ "ปลั๊กอิน" และคลิก "เพิ่มใหม่"
3. ค้นหา "OpenID Connect Generic" และติดตั้งปลั๊กอินโดย daggerhart
4. เปิดใช้งานปลั๊กอิน

กำหนดค่า redirect URI

ก่อนอื่น ให้กำหนดค่า redirect URI คุณสามารถค้นหาได้ในหน้าตั้งค่าปลั๊กอิน เลื่อนลงไปที่ส่วน "Notes" และคัดลอกค่า "Redirect URI"

สลับไปที่หน้ารายละเอียดแอปพลิเคชันใน Logto Console เพิ่ม Redirect URI และคลิก "บันทึกการเปลี่ยนแปลง"

ตั้งค่าปลั๊กอิน

ดูรายละเอียดการตั้งค่าที่จำเป็นในตารางต่อไปนี้:

ช่องของปลั๊กอิน	คำอธิบาย
Client ID	app ID ของแอป Logto ของคุณ
Client Secret	app secret ของแอป Logto ของคุณ
OpenID Scope	กรอก email profile openid offline_access
Login Endpoint URL	URL ของ authorization endpoint ของแอป Logto ของคุณ คือ https://[tenant-id].logto.app/oidc/auth คุณสามารถคลิก "show endpoint details" ในหน้าแอป Logto เพื่อดู URL นี้ได้
Userinfo Endpoint URL	URL ของ userinfo endpoint ของแอป Logto ของคุณ คือ https://[tenant-id].logto.app/oidc/me
Token Validation Endpoint URL	URL ของ token validation endpoint ของแอป Logto ของคุณ คือ https://[tenant-id].logto.app/oidc/token
End Session Endpoint URL	URL ของ end session endpoint ของแอป Logto ของคุณ คือ https://[tenant-id].logto.app/oidc/session/end
Identity Key	คีย์เฉพาะใน ID token ที่เก็บข้อมูลตัวตนของผู้ใช้ อาจเป็น email หรือ sub ขึ้นอยู่กับการตั้งค่าของคุณ
Nickname Key	คีย์ใน ID token ที่เก็บชื่อเล่นของผู้ใช้ คุณสามารถตั้งเป็น sub และเปลี่ยนภายหลังได้

จุดตรวจสอบ: ทดสอบแอปของคุณ

ตอนนี้คุณสามารถทดสอบแอปของคุณได้แล้ว:

1. ออกจากระบบเว็บไซต์ WordPress ของคุณ
2. ไปที่หน้าล็อกอิน WordPress และคลิกปุ่ม "Sign in with Logto"
3. คุณจะถูกเปลี่ยนเส้นทางไปยังหน้าลงชื่อเข้าใช้ของ Logto
4. ลงชื่อเข้าใช้ด้วยบัญชี Logto ของคุณ
5. คุณจะถูกเปลี่ยนเส้นทางกลับไปยังเว็บไซต์ WordPress และเข้าสู่ระบบโดยอัตโนมัติ

การแมปบทบาท (Roles mapping)

WordPress มีระบบจัดการบทบาทผู้ใช้ในตัว ซึ่งกำหนดว่าผู้ใช้แต่ละคนสามารถดำเนินการ (capabilities) อะไรได้บ้างในเว็บไซต์ โดยบทบาทผู้ใช้เริ่มต้น ได้แก่ Administrator, Editor, Author, Contributor และ Subscriber ซึ่งแต่ละบทบาทมีชุดความสามารถของตนเอง

Logto ใช้การควบคุมการเข้าถึงตามบทบาท (RBAC) เป็นโมเดลการอนุญาต โดยใช้ "ขอบเขต (scopes)" เป็นหน่วยสิทธิ์ที่เล็กที่สุด ขอบเขตเหล่านี้จะกำหนดการกระทำเฉพาะที่ผู้ใช้ที่ได้รับการยืนยันตัวตนสามารถทำได้ในแอปพลิเคชัน อย่างไรก็ตาม WordPress ใช้หลักการที่แตกต่างกันในการจัดการสิทธิ์ผู้ใช้ โดยอาศัย "บทบาท" ที่กำหนดไว้ล่วงหน้า ซึ่งรวมความสามารถต่าง ๆ เข้าด้วยกัน

ด้วยความแตกต่างนี้ เราแนะนำให้สร้างบทบาทพิเศษใน Logto ที่สอดคล้องกับบทบาทใน WordPress บทบาทเหล่านี้อาจไม่มีขอบเขตใด ๆ ใช้เพื่ออ้างอิงสำหรับการแมปผู้ใช้ไปยังบทบาทของ WordPress เท่านั้น

ข้อกำหนดเบื้องต้น

• ตั้งค่าบทบาทใน Logto ให้ตรงกับบทบาทใน WordPress เช่น หากคุณมีบทบาท 'editor' ใน WordPress ให้สร้างบทบาท 'group:editors' ใน Logto

ดำเนินการแมปบทบาท

เพื่อดำเนินการแมปบทบาท เราจะเพิ่มโค้ดกำหนดเองในไฟล์ functions.php ของธีม WordPress โดยใช้ action hook wp_login ซึ่งจะถูกเรียกเมื่อผู้ใช้เข้าสู่ระบบ นี่คือคำแนะนำทีละขั้นตอน:

ขั้นตอนที่ 1: เข้าถึงไฟล์ functions.php ของธีม

เปิดไฟล์ functions.php ของธีมคุณ คุณสามารถเข้าถึงไฟล์นี้ผ่านแผงผู้ดูแล WordPress โดยไปที่ รูปแบบ > ตัวแก้ไขธีม และเลือก functions.php จากรายการไฟล์ด้านขวา หรือในซอร์สโค้ด ให้ไปที่ไดเรกทอรีธีม WordPress ของคุณและค้นหาไฟล์ functions.php ไฟล์นี้ใช้สำหรับเพิ่มฟังก์ชัน PHP กำหนดเองเพื่อขยายความสามารถของเว็บไซต์ WordPress ของคุณ

ขั้นตอนที่ 2: เขียนฟังก์ชันแมปบทบาท

ด้านล่างนี้คือตัวอย่างฟังก์ชันง่าย ๆ ที่คุณอาจเพิ่มใน functions.php ฟังก์ชันนี้จะถูกเรียกเมื่อผู้ใช้เข้าสู่ระบบ และจะกำหนดบทบาทตาม roles claim ของผู้ใช้ที่ดึงมาจาก Logto

function logto_handler($user_login, $user = null) {
	if (!$user) {
		$user = get_user_by('login', $user_login);
	}

	$oidc_claims = get_user_meta($user->ID, 'openid-connect-generic-last-user-claim', true);

	if (in_array('group:editors', $oidc_claims['roles'])) {
		$user->set_role('editor');
	} else {
		$user->set_role('subscriber');
	}
}

add_action('wp_login', 'logto_handler', 10, 2);

ขั้นตอนที่ 3: ทำความเข้าใจโค้ดและปรับแต่ง

• ฟังก์ชัน logto_handler: ฟังก์ชันนี้รับพารามิเตอร์สองตัว: $user_login (ชื่อผู้ใช้) และ $user (อ็อบเจกต์ผู้ใช้) มันดึงบทบาทจาก Logto ซึ่งถูกเก็บใน user meta ชื่อ openid-connect-generic-last-user-claim แล้วแมปบทบาทนี้ไปยังบทบาท WordPress ที่สอดคล้องกันและกำหนดให้กับผู้ใช้

• add_action: บรรทัดนี้เชื่อมฟังก์ชัน logto_handler เข้ากับ action wp_login ซึ่งจะถูกเรียกหลังจากผู้ใช้เข้าสู่ระบบ ตัวเลข 10 คือ priority (ค่าเริ่มต้น) และ 2 คือจำนวนอาร์กิวเมนต์ที่ฟังก์ชันรับได้

ตัวอย่างข้างต้นจะกำหนดบทบาท 'editor' ให้กับผู้ใช้ที่ยืนยันตัวตนผ่าน Logto และมีชื่อบทบาท group:editors อย่างไรก็ตาม ในสถานการณ์จริง คุณอาจต้องแมปบทบาทหลายแบบมากกว่านี้

คุณสามารถดูรายการบทบาท WordPress และความสามารถของแต่ละบทบาทได้ ที่นี่

ขั้นตอนที่ 4: ทดสอบการตั้งค่า

ตอนนี้ มาทดสอบฟังก์ชันแมปบทบาทโดยเข้าสู่ระบบด้วยผู้ใช้ที่มีบทบาท group:editors ใน Logto หลังจากเข้าสู่ระบบแล้ว ให้ตรวจสอบบทบาทของผู้ใช้ใน WordPress เพื่อให้แน่ใจว่าการแมปทำงานถูกต้อง

อ่านเพิ่มเติม

กระบวนการสำหรับผู้ใช้ปลายทาง: กระบวนการยืนยันตัวตน, กระบวนการบัญชี, และกระบวนการองค์กร ตั้งค่าตัวเชื่อมต่อ การอนุญาต (Authorization)