เรื่องที่ 27 การตั้งค่า Social Login

การตั้งค่า Social Login

การเข้าใช้บริการอะไรสักอย่างทางอินเตอร์เน็ต หากต้องมีการลงทะเบียนเพื่อสมัครเป็นสมาชิก ผู้ใช้งานก็จะต้องเสียเวลาพอสมควรในการกรอกข้อมูลส่วนบุคคล และปัญหาสำคัญอีกอย่างหนึ่งที่ทำให้สมาชิกมักจะเลิกใช้ระบบนั้นไปเลยก็คือการลืมรหัสผ่าน

“ปลานิล” เว็บและร้านออนไลน์ ได้เล็งเห็นถึงความสำคัญของปัญหาดังกล่าว จึงได้จัดเตรียมระบบที่จะอำนวยความสะดวกแก่ลูกค้าผู้ใช้งานเว็บและร้านออนไลน์ของคุณ ทำให้ผู้ใช้งานสามารถ login เข้าระบบเว็บและร้านออนไลน์ของคุณได้ทันทีโดยใช้บัญชี Social Network ได้แก่ Facebook , Google , Twitter , Instagram ที่ผู้ใช้งานมีอยู่ได้ โดยผู้ใช้งานไม่ต้องทำการลงทะเบียนสมัครสมาชิกบนเว็บและร้านออนไลน์ของคุณอีก ซึ่งระบบนี้เรียกว่า “Social Login”

เมื่อทำการตั้งค่า Social Login แล้ว ในหน้า “ลงทะเบียน” หรือหน้า “เข้าสู่ระบบ” จะปรากฏไอคอน Social Network เพื่อให้ลูกค้าสามารถคลิ๊กไอคอนดังกล่าวเพื่อเข้าระบบร้านออนไลน์ผ่านบัญชี Social Network ได้ทันทีโดยไม่ต้องลงทะเบียนใหม่อีก ทั้งนี้ หน้าตาของ Social Login อาจจะมีการปรับเปลี่ยนข้อความและตำแหน่งการใช้งานตามความเหมาะสมและนโยบายของแต่ละผู้ให้บริการ

สาระสำคัญของการตั้งค่า Social Login คือไปที่ Social Network แต่ละประเภทก่อน เพื่อนำ Application ID และ Application Secret มาใส่ในระบบหลังบ้านของเว็บและร้านออนไลน์ของคุณ มีขั้นตอนดังต่อไปนี้

1. การตั้งค่า Facebook Login
2. การตั้งค่า Google Login
3. การตั้งค่า Twitter Login
4. การตั้งค่า Instagram Login

 
 

1. การตั้งค่า Facebook Login ซึ่งท่านเจ้าของเว็บและร้านออนไลน์ต้องดำเนินการด้วยตนเองเพื่อความปลอดภัยของข้อมูล โดยแยกเป็น 2 ขั้นตอน คือ

1.1 ขั้นตอนการขอรับ APP ID และ APP Secret จาก Facebook ทำได้ดังนี้

1) เข้าสู่ระบบ Facebook แล้วไปที่ลิงค์ https://developers.facebook.com/apps

2) คลิ๊กที่แถบเมนู “My Apps” และดำเนินการลงทะเบียน “Register as a Developer” ให้เรียบร้อย
>>จากนั้นคลิ๊กที่แถบเมนู “My Apps” และเลือก “Add a New App” หรือคลิ๊ก “Add a New App” ปุ่มสีเขียวก็ได้ (ดังรูปด้านล่าง)

3) ระบบจะนำเข้าสู่หน้า “Create a New App ID” ให้ระบุข้อมูลสำคัญได้แก่ Display Name, Namespace, เลือกหมวดหมู่ Category และคลิ๊ก “Create App” (ดังรูปด้านล่าง)

4) ไปที่เมนู “Settings” และคลิ๊ก “Add Platform” >> ในหัวข้อ “Website” ให้ระบุ Site URL, Mobile Site URL และระบุรายละเอียดสำคัญให้ครบตามที่ระบบต้องการ >> แล้วคลิ๊ก “Save Changes”(ดังรูปด้านล่าง)

5) ท่านสามารถเข้าไปตรวจสอบ APP ID และ App Secret ได้ โดยไปที่เมนู “Status & Review” และเลือก “Yes” เมื่อระบบถามว่า Do you want to make this app and all its live features available to the general public? โดยระบบจะแสดงข้อมูล APP ID และ App Secret ของท่าน(ดังรูปตัวอย่างด้านล่าง)

หลังจากนั้นก็จะสามารถคัดลอก APP ID และ APP Secret มาใส่ใน Application ID และ Application Secret ของระบบจัดการของเว็บและร้านออนไลน์ได้

1.2 ขั้นตอนการตั้งค่า APP ID และ APP Secret ของ Facebook บนเว็บและร้านออนไลน์ของคุณ ทำได้ดังนี้

1) login เข้าระบบจัดการร้านบนเว็บและร้านออนไลน์ของคุณ >> ในหน้าควบคุม ให้คลิ๊กที่เมนูเครื่องมือ “Social Login”

2) ในหน้า “Social Login” หัวข้อ “Networks” > เลือก “Facebook” >> จากนั้นให้คัดลอก APP ID และ APP Secret มาใส่ลงในช่อง
+ Application ID:
+ Application Secret:
(ดังรูปด้านล่าง)

การตั้งค่าให้แสดงโลโก้เว็บและร้านออนไลน์ของคุณในขั้นตอนการ login ด้วย Facebook

ในกรณีที่ลูกค้าหรือผู้ใช้งานเข้าระบบเว็บและร้านออนไลน์ของคุณด้วย Facebook Login นั้น คุณสามารถตั้งค่าให้ระบบแสดงโลโก้ เพื่อให้ลูกค้าและผู้ใช้งานเห็นโลโก้เว็บและร้านออนไลน์ของคุณด้วยก็ได้ มีขั้นตอนการตั้งค่าดังนี้

1) เข้าสู่ระบบ Facebook แล้วไปที่ลิงค์ https://developers.facebook.com/apps

2) คลิ๊กที่แถบเมนู “My Apps”>> และคลิ๊ก “App Details” >> จากนั้นให้ใส่รูปโลโก้เว็บและร้านออนไลน์ของคุณ แล้วคลิ๊ก “Save Changes” (ดังรูปด้านล่าง)


 
 

2. การตั้งค่า Google Login ซึ่งท่านเจ้าของเว็บและร้านออนไลน์ต้องดำเนินการด้วยตนเองเพื่อความปลอดภัยของข้อมูล โดยแยกเป็น 2 ขั้นตอน คือ

2.1 ขั้นตอนการขอรับ APP ID และ APP Secret จาก Google ทำได้ดังนี้

1) เข้าสู่ระบบ Google แล้วไปที่ลิงค์ https://console.developers.google.com

2) ที่เมนูแถบด้านข้าง ให้คลิ๊ก “Project” และเลือก “Create Project” จากนั้นให้ใส่ข้อมูลเพื่อสร้าง Project และคลิ๊ก “Create” (ดังรูปด้านล่าง)

3) เมื่อสร้าง Project เรียบร้อยแล้ว ให้คลิ๊ก “Project” แล้วเลือกหัวข้อ Project ที่คุณสร้างไว้ >> จากนั้นให้คลิ๊กที่หัวข้อ “APIs & auth” และคลิ๊กหัวข้อย่อย “Consent screen” >> แล้วกรอกข้อมูลสำคัญที่ระบบต้องการและคลิ๊ก “Save” (ดังรูปด้านล่าง)

4) จากนั้นคลิ๊กที่หัวข้อ “APIs & auth” และคลิ๊กหัวข้อย่อย “APIs” >> แล้วให้ดำเนินการดังนี้
+ ไปที่หัวข้อ “Social APIs” และคลิ๊ก “Google+ API” >> เพื่อเข้าไป enable เปิดค่าใช้งานเมนู
+ ไปที่หัวข้อ “Google Apps APIs” และคลิ๊ก “Contacts API” >> เพื่อเข้าไป enable เปิดค่าใช้งานเมนู
(ดังรูปด้านล่าง)

5) หลังจากนั้นคลิ๊กที่หัวข้อ “APIs & auth” และคลิ๊กหัวข้อย่อย “Credentials” และคลิ๊ก “Create new Client ID” (ดังรูปด้านล่าง)

6) จากนั้นจะปรากฎหน้าต่าง “Create Client ID” ขึ้นมา >> ให้เลือก “Web application” >> คลิ๊ก “Configure consent screen” >> จากนั้นให้ใส่ข้อมูลสำคัญที่ระบบต้องการแล้วคลิ๊ก “SAVE”

2.2 ขั้นตอนการตั้งค่า APP ID และ APP Secret บนเว็บและร้านออนไลน์ของคุณ ทำได้ดังนี้

1) login เข้าระบบจัดการร้านบนเว็บและร้านออนไลน์ของคุณ >> ในหน้าควบคุม ให้คลิ๊กที่เมนูเครื่องมือ “Social Login”

2) ในหน้า “Social Login” หัวข้อ “Networks” > เลือก “Google” >> จากนั้นคัดลอก Client ID และ Client secret มาใส่ลงในช่อง
Application ID:
Application Secret:
(ดังรูปด้านล่าง)


 
 

3. การตั้งค่า Twitter Login ซึ่งท่านเจ้าของเว็บและร้านออนไลน์ต้องดำเนินการด้วยตนเองเพื่อความปลอดภัยของข้อมูล โดยแยกเป็น 2 ขั้นตอน คือ

3.1 ขั้นตอนการขอรับ APP ID และ APP Secret จาก Twitter ทำได้ดังนี้

1) เข้าสู่ระบบ Twitter แล้วไปที่ลิงค์ https://dev.twitter.com/apps

2) คลิ๊ก “Create New App” (ดังรูปด้านล่าง)

3) ใส่ข้อมูลสำคัญที่ระบบต้องการ แล้วคลิ๊ก “Create your Twitter application” (ดังรูปด้านล่าง)

3.2 ขั้นตอนการตั้งค่า APP ID และ APP Secret บนเว็บและร้านออนไลน์ของคุณ ทำได้ดังนี้

1) login เข้าระบบจัดการร้านบนเว็บและร้านออนไลน์ของคุณ >> ในหน้าควบคุม ให้คลิ๊กที่เมนูเครื่องมือ “Social Login”
2) ในหน้า “Social Login” หัวข้อ “Networks” > เลือก “Twitter” >> จากนั้นคัดลอก Consumer Key (API Key) และ Consumer Secret (API Secret)
มาใส่ลงในช่อง
Application ID:
Application Secret:
(ดังรูปด้านล่าง)


 
 

4. การตั้งค่า Instagram Login ซึ่งท่านเจ้าของเว็บและร้านออนไลน์ต้องดำเนินการด้วยตนเองเพื่อความปลอดภัยของข้อมูล โดยแยกเป็น 2 ขั้นตอน คือ

4.1 ขั้นตอนการขอรับ APP ID และ APP Secret จาก Instagram ทำได้ดังนี้

1) เข้าสู่ระบบ Instagram แล้วไปที่ลิงค์ http://instagr.am/developer/clients/manage/

2) หน้า “Manage Clients” เลือก “Register a New Client” (ดังรูปด้านล่าง)

3) ใส่ข้อมูลสำคัญที่ระบบต้องการ (ดังรูปด้านล่าง)

2.2 ขั้นตอนการตั้งค่า APP ID และ APP Secret บนเว็บและร้านออนไลน์ของคุณ ทำได้ดังนี้

1) login เข้าระบบจัดการร้านบนเว็บและร้านออนไลน์ของคุณ >> ในหน้าควบคุม ให้คลิ๊กที่เมนูเครื่องมือ “Social Login”

2) ในหน้า “Social Login” หัวข้อ “Networks” > เลือก “Instagram” >> คัดลอก Client ID และ Client Secret มาใส่ลงในช่อง
Application ID:
Application Secret:
(ดังรูปด้านล่าง)

เพียงเท่านี้ เว็บและร้านออนไลน์ของคุณก็จะปรากฎไอคอน Social Login ที่คุณตั้งค่า เพื่ออำนวยความสะดวกให้ลูกค้าและผู้ใช้งานสามารถคลิ๊กที่ไอคอนดังกล่าวเข้าสู่ระบบร้านออนไลน์ผ่านบัญชี Social Network ได้ทันทีโดยไม่ต้องลงทะเบียนใหม่อีก