ปัจจุบันนี้ เวลาจะ Login เข้าใช้งานเว็บไซต์ดัง ๆ ที่มีผู้ใช้งานเป็นจำนวนมากหรือแม้กระทั่งแอปพลิเคชั่นในโทรศัพท์มือถือ เพื่อน ๆ ก็มักจะเห็นปุ่ม Login with Facebook อยู่ในหน้าเข้าสู่ระบบกันใช่มั๊ยล่ะ ซึ่งก็ไม่น่าแปลกใจอะไร เพราะยิ่งเทคโนโลยีก้าวหน้าไปเท่าไร ทำให้เกิดสิ่งอำนวยความสะดวกให้ผู้คนมากขึ้นเท่านั้น และนั่นก็ส่งผลให้คนเรารักความสะดวกสบายและต้องการการตอบสนองที่รวดเร็วทันใจ
สำหรับคนที่ชอบท่องไปในโลกอินเทอร์เน็ต การลืม username และ password ที่ใช้ในการเข้าสู่ระบบของแต่ละเว็บถือก็เป็นเรื่องปกติ (ยิ่งมีหลายรหัสผ่านก็ยิ่งชิxหาย ผมเองก็ยังลืมอยู่บ่อย ๆ ฮา) ประกอบกับ Facebook เป็นโซเชียลเว็บไซต์ขนาดใหญ่ที่มีผู้ใช้งานเป็นจำนวนมาก ดังนั้นการผนวกระบบ Login ของ Facebook เข้ามาใช้งานในเว็บไซต์จึงถือเป็นการอำนวยความสะดวกให้กับผู้ใช้งานเว็บไซต์นั้น ๆ ให้สามารถเข้าใช้งานได้ง่ายขึ้น ตอบสนองความขี้เกียจ เอ๊ย ความสะดวกสบายโดยลดเวลาในการกรอกข้อมูลตอนสมัครสมาชิก ทำให้ผู้ใช้งานไม่จำเป็นต้องมานั่งจำ username และ password
หลังจากเกริ่นกันมาซะยาว เรามาเริ่มทำระบบ Login ของเว็บไซต์ด้วย Facebook Login กันเลยดีกว่า ซึ่งแน่นอนว่าเราต้องมี account ของ Facebook ก่อน จากนั้นก็ไปตั้งค่าการใช้งาน Facebook API ในหน้า Developer
เข้าไปที่ URL https://developers.facebook.com/ จากนั้นให้คลิก Get Started ที่มุมขวาบนของเว็บ
สำหรับผู้ที่ยังไม่มี Developers account ระบบก็จะแสดงหน้าขั้นตอนการสมัคร Facebook for Developers account ขึ้นมาก่อน อย่ารอช้า รีบทำการสมัครตามขั้นตอนไปเลย ส่วนผู้ที่สมัคร Developers account ไว้แล้วก็ให้ Login เข้าสู่ระบบ
จะมีกล่องสำหรับสร้าง ID ของแอปพลิเคชันใหม่ปรากฏขึ้นมา ให้เราทำการกรอกชื่อเรียกสำหรับแอปพลิเคชันที่ต้องการสร้าง และกรอก E-mail ที่ใช้ในการติดต่อ หลังจากนั้นให้คลิกปุ่ม Create App ID
ในหน้านี้มีข้อมูลสำคัญอยู่ 1 ค่าที่จะต้องนำไปใช้ในส่วนต่อไปของบทความนี้ ได้แก่ App ID ให้กรอกข้อมูลเพิ่มลงไปในช่องดังต่อไปนี้
- App Domains: URL ของเว็บไซต์ (กรณีที่เทสบน localhost ให้เว้นช่องนี้ไว้)
- Privacy Policy URL: URL นโยบายความเป็นส่วนตัว (สามารถสร้างนโยบายความเป็นส่วนตัวได้ที่เว็บ https://app-privacy-policy-generator.firebaseapp.com/)
- Category: หมวดหมู่ของแอปพลิเคชัน
จากนั้นให้เลื่อนลงมาข้างล่างแล้วคลิกปุ่ม + Add Platform
จะมีหน้าต่างให้เลือกแพลตฟอร์มปรากฏขึ้นมา ให้เราเลือก Website
จากนั้นให้กรอก URL ของเว็บไซต์ในช่อง Site URL (กรณีที่เทสบน localhost ให้ใส่เป็น https://localhost/) แล้วคลิกปุ่ม Save Changes จากนั้นให้คลิกเมนู Dashboard ที่อยู่ในแถบเมนูด้านซ้าย
เมื่อเข้าสู่หน้า Dashboard แล้ว ให้เลื่อนลงมาล่าง ๆ จะเจอในส่วนของ Add a Product จากนั้นก็คลิกปุ่ม Set Up ของ Facebook Login
ให้คลิกเลือกแพลตฟอร์มเป็น Web
พิมพ์ URL ของเว็บไซต์ในช่อง Site URL จากก็คลิกปุ่ม Save และปุ่ม Continue ตามลำดับ
ขั้นตอนถัดไปให้สร้างไฟล์ Html แล้ว Copy Code มาใส่ไว้ใต้ <body> โดยแก้ไข {your-app-id} เป็นค่า App ID และแก้ไข {api-version} เป็นเลขเวอร์ชันปัจจุบันของ Facebook SDK (ซึ่ง ณ วันที่เขียนนี้ Facebook SDK เป็นเวอร์ชัน 3.1) จะได้โค้ดประมาณนี้
<!DOCTYPE html>
<html>
<head>
<title>Facebook Login</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="Facebook Login">
<meta name="author" content="AiNoTsubasa">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css"></style>
</head>
<body>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '{your-app-id}',
cookie : true,
xfbml : true,
version : 'v3.1'
});
FB.AppEvents.logPageView();
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
</body>
</html>
โค้ดในส่วนนี้จะเป็นการเพิ่ม Facebook SDK เข้ามาในหน้าเว็บไซต์ ถัดไปจะเป็นการใส่ปุ่มเพื่อ Login ให้เพิ่มโค้ดดังต่อไปนี้ไว้ข้างล่าง </script><button onclick="checkFbLoginState();">Login with Facebook</button>พอเพิ่มปุ่มลงไปแล้วก็ให้ทำการสร้างฟังก์ชัน checkFbLoginState() ขึ้นมา โดยใส่โค้ดดังต่อไปนี้ไว้ก่อน </script>
var fbLoginStatus = false;
function checkFbLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
function statusChangeCallback(response) {
if(fbLoginStatus == false) {
if (response.status == 'connected') {
fbLoginStatus = true;
getCurrentUserInfo(response);
} else {
FB.login(function(response) {
if (response.authResponse){
fbLoginStatus = true;
getCurrentUserInfo(response);
} else {
console.log('Auth failed.');
}
}, {scope: 'public_profile,email'});
}
} else if(fbLoginStatus == true) {
getCurrentUserInfo(response);
}
}
function getCurrentUserInfo() {
FB.api('/me?fields=name,email,first_name,last_name,id', function(userInfo) {
var result = '';
result+= "ID: "+userInfo.id+"\r";
result+= "First Name: "+userInfo.first_name+"\r";
result+= "Last Name: "+userInfo.last_name+"\r";
result+= "E-mail: "+userInfo.email+"\r";
document.getElementById("result").text = result;
});
}
ฟังก์ชัน checkFbLoginState() จะทำการเรียกใช้งานฟังก์ชัน FB.getLoginStatus() ซึ่งเป็นฟังก์ชันที่มาจาก Facebook SDK โดยจะทำการเช็คว่าผู้ใช้งานได้ Login แล้วหรือยัง ถ้ายังก็จะเรียกใช้งานฟังก์ชัน FB.login() แล้วจึงเรียกใช้งานฟังก์ชัน getCurrentUserInfo() ต่อไปเพื่อดึงข้อมูลของผู้ใช้งานออกมาแสดง ถัดไปก็ให้เราใส่โค้ดสำหรับแสดงผลการ Login ไว้ข้างล่างปุ่มกด<br> Result: <textarea id="result"></textarea>พอทำถึงขั้นตอนนี้ หน้าเว็บจำลองของเราก็พร้อมจะทำงานแล้ว ถัดไปให้ไป public แอปพลิเคชันที่เราได้สร้างเมื่อสักครู่ โดยกลับไปยังหน้า Developers Console แล้วคลิกที่เมนู App Review ที่อยู่ตรงแถบเมนูด้านซ้าย
คลิกในส่วน Make Tester App public? เพื่อเปิดการใช้งานแอปพลิเคชัน แล้วคลิก Confirm ..... เอาล่ะ เรามาทดสอบโค้ดที่เขียนกันเลยดีกว่า
เรียกใช้งานไฟล์เว็บที่เพิ่งสร้างเมื่อสักครู่ จะได้หน้าตาว่าง ๆ ประมาณนี้ จากนั้นก็คลิกปุ่ม Login with Facebook โล้ด
เรียบร้อย! ข้อมูลเราถูกแอปพลิเคชันเอาไปแล้วจ้า รออะไรอยู่ล่ะ ตบมือ 👏 ฮะฮะ
บทความนี้เป็นตัวอย่างการนำ Facebook Login มาใช้งานในเว็บไซต์ของเรา ซึ่งจะช่วยเพิ่มความสะดวกสบายให้กับผู้ใช้งานเว็บไซต์ นอกจากนี้เรายังสามารถเข้าถึงข้อมูลของผู้ใช้งาน Facebook และนำไปเก็บไว้ในฐานข้อมูลได้อีกด้วย
ไฟล์โค้ด: AiNoTsubasa's Github
บทความ
ความคิดเห็นนี้ถูกผู้เขียนลบ
ตอบลบความคิดเห็นนี้ถูกผู้เขียนลบ
ลบเเฮ็กเกอร์มาเเล้ว
ตอบลบโอ้
ตอบลบ