การสร้างระบบ Login ด้วย Facebook บนเว็บไซต์สามารถทำได้โดยใช้ Facebook Login API ซึ่งต้องผ่านขั้นตอนหลักดังนี้:
1. สร้างแอปบน Facebook Developer
1. ไปที่ Meta for Developers
2. ลงชื่อเข้าใช้ด้วยบัญชี Facebook
3. คลิก "Create App" และเลือกประเภทแอปเป็น Consumer
4. กรอกข้อมูลและเลือก Facebook Login เป็นผลิตภัณฑ์ที่ต้องการใช้
5. หลังจากสร้างแอปแล้ว คุณจะได้รับ App ID และ App Secret
2. ตั้งค่า OAuth และ Redirect URL
1. ไปที่ Settings > Basic และเพิ่ม Website URL ของคุณ
2. ไปที่ Facebook Login > Settings
เปิด Client OAuth Login และ Web OAuth Login
เพิ่ม Valid OAuth Redirect URIs เป็น URL สำหรับรับข้อมูลล็อกอิน เช่น:
https://yourwebsite.com/fb-callback.php
3. เพิ่มปุ่ม Facebook Login บนหน้าเว็บ
เพิ่มปุ่ม Login with Facebook ลงในไฟล์ HTML:
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<title>Facebook Login</title>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID', // ใส่ App ID ที่ได้รับ
cookie : true,
xfbml : true,
version : 'v18.0' // ใช้เวอร์ชันล่าสุด
});
};
function fbLogin() {
FB.login(function(response) {
if (response.authResponse) {
window.location.href = "fb-callback.php?access_token=" + response.authResponse.accessToken;
} else {
console.log("User cancelled login or did not fully authorize.");
}
}, {scope: 'email,public_profile'});
}
</script>
</head>
<body>
<button onclick="fbLogin()">Login with Facebook</button>
<script async defer crossorigin="anonymous"
src="https://connect.facebook.net/en_US/sdk.js"></script>
</body>
</html>
4. สร้างไฟล์ fb-callback.php เพื่อรับข้อมูลผู้ใช้
เมื่อผู้ใช้ล็อกอินแล้ว ระบบจะส่ง access token ไปยัง fb-callback.php ซึ่งจะใช้ดึงข้อมูลผู้ใช้จาก Facebook API:
<?php
session_start();
// ใส่ Facebook App ID และ Secret
$app_id = 'YOUR_APP_ID';
$app_secret = 'YOUR_APP_SECRET';
// รับ Access Token จาก URL
if (isset($_GET['access_token'])) {
$access_token = $_GET['access_token'];
// ดึงข้อมูลผู้ใช้จาก Facebook API
$url = "https://graph.facebook.com/me?fields=id,name,email&access_token=" . $access_token;
$response = file_get_contents($url);
$user = json_decode($response, true);
if (isset($user['id'])) {
$_SESSION['user_id'] = $user['id'];
$_SESSION['user_name'] = $user['name'];
$_SESSION['user_email'] = isset($user['email']) ? $user['email'] : 'No email provided';
echo "ยินดีต้อนรับ, " . $_SESSION['user_name'];
} else {
echo "เกิดข้อผิดพลาดในการล็อกอิน";
}
} else {
echo "ไม่พบ Access Token";
}
?>
5. ทดสอบระบบ
1. เปิดหน้าเว็บ index.html และลองคลิกปุ่ม Login with Facebook
2. หากเข้าสู่ระบบสำเร็จ คุณจะถูกเปลี่ยนหน้าไปที่ fb-callback.php พร้อมแสดงข้อมูลชื่อและอีเมล
6. ปรับแต่งและบันทึกข้อมูลลงฐานข้อมูล (Optional)
หากต้องการบันทึกข้อมูลลง MySQL สามารถเพิ่มโค้ดลงใน fb-callback.php ได้:
$mysqli = new mysqli("localhost", "root", "", "your_database");
if ($mysqli->connect_error) {
die("Connection failed: " . $mysqli->connect_error);
}
$user_id = $mysqli->real_escape_string($user['id']);
$name = $mysqli->real_escape_string($user['name']);
$email = isset($user['email']) ? $mysqli->real_escape_string($user['email']) : '';
$sql = "INSERT INTO users (facebook_id, name, email) VALUES ('$user_id', '$name', '$email')
ON DUPLICATE KEY UPDATE name='$name', email='$email'";
if ($mysqli->query($sql)) {
echo "บันทึกข้อมูลเรียบร้อย";
} else {
echo "Error: " . $mysqli->error;
}
$mysqli->close();
สรุป
1. สร้างแอปใน Facebook Developer
2. ตั้งค่า OAuth และ Redirect URL
3. เพิ่มปุ่ม Login with Facebook บนหน้าเว็บ
4. ดึงข้อมูลผู้ใช้ด้วย PHP ผ่าน Facebook Graph API
5. (Optional) บันทึกข้อมูลลงฐานข้อมูล MySQL
หากมีข้อสงสัยเพิ่มเติม แจ้งมาได้ครับ!
0 ความคิดเห็น:
แสดงความคิดเห็น