การทำ Social Login สำหรับ Login เว็บ Magento 2 และ WordPress ด้วยบัญชี Google

การทำ Social Login สำหรับ Login เว็บ Magento 2 และ WordPress  ด้วยบัญชี Google

การทำ Social Login สำหรับ Login เว็บ Magento 2 และ WordPress ด้วยบัญชี Google

“Social login” หรือ “การเข้าสู่ระบบผ่านโซเชียลมีเดีย” เป็นวิธีการที่ผู้ใช้สามารถลงชื่อเข้าใช้เว็บไซต์หรือแอปพลิเคชันโดยใช้ข้อมูลประจำตัวจากบริการโซเชียลมีเดียหรือบริการอื่น ๆ ที่พวกเขามีอยู่แล้ว เช่น Facebook, Google, Twitter, LinkedIn ฯลฯ โดยไม่ต้องสร้างบัญชีใหม่เฉพาะสำหรับเว็บไซต์หรือแอปพลิเคชันนั้น

Google Cloud Platform คืออะไร

Google Cloud Platform (GCP) คือเซ็ตของบริการบนคลาวด์ที่ให้บริการโดย Google ที่มาพร้อมกับเครื่องมือและการพัฒนาสำหรับการประมวลผลแบบขนาดใหญ่ การจัดเก็บข้อมูล และการวิเคราะห์ ส่วนมากของบริการเหล่านี้สามารถใช้งานได้ผ่าน API และอินเทอร์เฟซบนเว็บ

การสร้างโปรเจกต์ APIs & Services เพื่อใช้งานฟีเจอร์ Social Login

1. เข้าไปลิงค์ https://cloud.google.com/console/projec คลิกปุ่ม Create Project

Social login

2. ใส่ชื่อ Project แล้ว Create

3. สร้างเสร็จแล้วให้คลิก Select Project

4. เลือก APIs & Services -> Credentials

5. เลือก Create Credentials -> OAuth Client ID

6. คลิก CONFIGURE CONSENT SCREEN

7. เลือก External

8. ใส่ข้อมูลให้เรียบร้อย แล้ว Save

9. แท็บ Scope กด Save ได้เลย

10. เพิ่ม test users โดยกด add users แล้วใส่อีเมล

11. คลิก back to dashboard

12. จากนั้นคลิก Create Credentials -> OAuth Client ID อีกครั้ง

13. เลือก Application Type เป็น Web Application

14. กรอกข้อมูลให้เรียบร้อย

15. Authorized redirect URIs ให้ใส่ URL ดังนี้

  • 15.1 Magento 2 จะต้องติดตั้ง Extension Amasty Social Login สำหรับ ให้ดูที่หน้า Config Amasty Social Login บางเวอร์ชั่นให้ใช้ลิงค์จากแท็บ General Settings

  • – บางเวอร์ชั่นให้ใช้ลิงค์จากแท็บ Google

  • 15.2 สำหรับ WordPress ให้นำลิงค์จากการตั้งค่าปลั๊กอินมาใส่ คลิกที่นี่

การตั้งค่า Social Login เข้ากับเว็บไซต์

WordPress

1. สำหรับการตั้งค่าใน WordPress ให้ติดตั้งปลั๊กอิน Nextend Social Login

2. ให้เข้าไปที่ ตั้งค่า -> Nextend Social Login แล้วทำการ Settings Google

4. จากนั้นเอา Key ที่ได้ไปใส่ในปลั๊กอิน ให้ใส่ในแท็บ Settings
Client ID = Consumer Key (API Key)
Client Secret = Consumer Secret (API Secret)

WordPress

Magento 2