การตั้งค่า Google API สำหรับ Login ด้วย gmail

1. ไปที่ URL : https://console.developers.google.com/ ทำการเข้าสู่ระบบ หากไม่มีบัญชีของ gmail ให้ทำการสมัครสมาชิกก่อน

 

2. หลังทำการเข้าสู่ระบบแล้ว จะแสดงหน้าตามรูปด้านล่าง ให้กดติ๊กช่องในกรอบ แล้วกด AGREE AND CONTINUE

 

3. เลือกเมนูด้านซ้ายมือ APIs & Services แล้วเลือกเมนูย่อยเป็น Enabled APIs & services

 

4. จะแสดงหน้า APIs & Services ให้การเลือกเมนู Enabled APIs & Services แล้วกด CREATE PROJECT 


5. กรอกชื่อโปรเจคที่คุณต้องการใช้กับเว็บไซต์คุณในช่อง Project name จากนั้นกดคลิกปุ่ม "CREAT" เพื่อดำเนินการต่อ

 

6. หลังทำการสร้างโปรเจคใหม่เสร็จสิ้น จะขึ้นแสดงรายละเอียดต่าง ๆ ของโปรเจคที่สร้างใหม่ และชื่อโปรเจคที่บนซ้าย

 

7. เลือกเมนู Credentials แล้วกดคลิกที่ + CREATE CREDENTIALS เลื่อนลงไปที่หัวข้อ 0Auth Client ID

 

 

8. ในหน้า Create 0Auth client ID จะมีการแจ้งว่า ก่อนที่เราจะสร้าง 0Auth cilend ID ได้ ต้องทำการตั้งค่า Configure Consent Screen ก่อน ให้เรากดที่ปุ่ม CONFIGURE CONSENT SCREEN


9. หน้า OAuth consent screen ให้เลือกประเภทการใช้งาน User Type เป็น External แล้วกด CREATE

 

10. หน้า Edit app registration จะแบ่งการกรอกข้อมูลเป็น 3 ส่วน ดังนี้
  10.1 App information : กรอกข้อมูลลงในช่อง App name กับ User support email ส่วน App logo จะใส่หรือไม่ใส่ก็ได้

  10.2 App domain : แบ่งเป็น 2 ส่วน ส่วนกรอกข้อมูลของเว็บไซต์ กับ Authorized domains
        1) ส่วนกรอกข้อมูล : สำหรับใส่ลิงก์ดังนี้ 
            - e2.onenow.co/th
            : ลิงก์หน้านโยบายความเป็นส่วนตัว เช่น e2.onenow.co/th/term/term_privacy
​​​​​​​            ​​​​​​​​​​​​​​: ลิงก์หน้าเงื่อนไขการให้บริการ เช่น e2.onenow.co/th/term/term_condition

        2) Authorized domains : คลิกที่ปุ่ม + ADD DOMAIN เพื่อเพิ่มช่องกรอกโดเมนเนม

  10.3 Developer contact information : ทำการกรอกอีเมลติดต่อ

  หลังทำการกรอกข้อมูลทั้ง 3 ส่วนแล้ว ให้กดคลิกที่ SAVE AND CONTINUE เพื่อดำเนินการต่อ

 

11. หน้า SCOPES : หากต้องการเพิ่มขอบเขตการทดสอบ ให้คลิกที่ปุ่ม ADD OR REMOVE SCOPES เพื่อเลือกเพิ่มหรือลบขอบเขต

12. หน้า Test users : สำหรับเพิ่มผู้ทดสอบ โดยกดที่เพิ่มได้ไม่เกิน 100 อีเมล

 

13. หลังทำการตั้งค่า Configure Consent Screen เสร็จแล้ว ให้เรากลับไปที่เมนู Credentials แล้วกดคลิกที่ + CREATE CREDENTIALS เลือก OAuth client ID จะมีรายการ 

14. แล้วเลื่อนมาตรงหัวข้อ Authorized JavaScript origins กด + ADD URI แล้วกรอก URI เว็บไซต์ลงไป แต่ต้องมี http:// หรือ https:// นำหน้าด้วย เช่น  https://e2.onenow.co เสร็จแล้วกดปุ่ม CREATE

 

15. หลังกด CREATE จะแสดงหน้าต่าง Client ID กับ Client Secret ขึ้นมา ให้ทำการคัดลอกทั้ง 2 เก็บไว้ โดยกดคลิกที่ไอคอนในกรอบสีส้มด้านขวามือ

 

16. ไปที่ backoffice ของเว็บไซต์ เลือกเมนู "ปรับแต่ง" แล้วกดแถบ "การเชื่อมต่อ" นำ Cliend ID ที่ได้มา ไปกรอกในช่อง Google Sign In Client ID แล้วกดบันทึกเปลี่ยนแปลง

​​​​​​​