ใช้งาน Facebook Login กันดีกว่า !!

Facebook SDK by Keptcode.com

สารบัญ

สร้าง: App บน Facebook

https://developers.facebook.com/apps/[appId]/settings/basic

นำ "ID ของแอพ" ไปใช้งานร่วมกับ Facebook SDK ฟังก์ชั่น FB.init() ในลำดับต่อไป ...

สร้าง: ไฟล์ HTML สำหรับ "เข้าสู่ระบบ" (สำหรับทดสอบ)

Path: [skeleton]\facebook-sdk\login.html

Language: HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Language" content="th">
    <title>Facebook Login</title>
    <script src="./script.min.js"></script>
  </head>
  <body>
    <p id="status"></p>
    <button id="login" type="button" onclick="fnFacebook.login()">
      Facebook Login
    </button>
    <script type="text/javascript">
      fnFacebook.init()
    </script>
    <!-- <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script> -->
  </body>
</html>

สร้าง: ไฟล์ Javascript สำหรับ "เข้าสู่ระบบ" (สำหรับทดสอบ)

Path: [skeleton]\facebook-sdk\script.min.js

Language: Javascript

var fnFacebook = {
  init: function() {
    (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'))
    window.fbAsyncInit = function() {
      FB.init({ 
        appId: 'xxxxxxxxxxxxxxxx',
        cookie: true, 
        autoLogAppEvents: true, 
        xfbml: true, 
        version: 'v20.0'
      })
      FB.AppEvents.logPageView()
      document.getElementById('status').innerText = 'Login'
    }
  },
  login: function() {
    document.getElementById('status').innerText = 'Loadding...'
    FB.login(function(response) {
      const resAuth = response.authResponse
      const payload = new URLSearchParams()
      if (resAuth) {
        document.getElementById('login').style.display = 'none'
        document.getElementById('status').innerText = 'Login Success'
        payload.set('status', 'success')
        payload.set('access_token', resAuth.accessToken === null ? '' : resAuth.accessToken)
      } else {
        document.getElementById('status').innerText = 'Login failed !!'
        payload.set('status', 'login failed')
      }
    }, { scope: 'public_profile,email' })
  }
}

รัน: ทดสอบ Facebook SDK สำหรับ Login

คลิก: ปุ่ม "Facebook Login" และ กดปุ่ม "ดำเนินการต่อ..." สำเร็จ

สร้าง: ไฟล์ HTML ดึงข้อมูล "ส่วนตัว" ไปใช้งาน

Path: [skeleton]\facebook-sdk\profile.html

Language: HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Language" content="th">
    <title>Get Profile - Facebook SDK</title>
    <script src="./script.min.js"></script>
  </head>
  <body>
    <p id="status"></p>
    <script type="text/javascript">
      fnFacebook.init()
      fnFacebook.profile()
    </script>
    <style type="text/css">
      #status { display: flex; align-items: center; padding-top: 10px; }
      img { margin: 0 10px; }
    </style>
    <!-- <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script> -->
  </body>
</html>

อัพเดท: ไฟล์ Javascript ดึงข้อมูล "ส่วนตัว"

Path: [skeleton]\facebook-sdk\script.min.js

Language: Javascript

var fnFacebook = {
  init: function() { /* ..... */ },
  login: function() { /* ..... */ },
  profile: function() {
    setTimeout(function() {
      document.getElementById('status').innerHTML = 'Loadding...'
      const searchParams = new URLSearchParams(window.location.search)
      const payload = new URLSearchParams()
      const xhttp = new XMLHttpRequest()
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          const resProfile = JSON.parse(this.responseText)
          let html = '<img src="' + resProfile.picture.data.url + '" />'
          html += '<span>' + resProfile.name + '</span>'
          document.getElementById('status').innerHTML = html
          // setTimeout(function() {
          //   window.location.replace(document.referrer)
          // }, 5000)
        }
      }
      payload.set('access_token', searchParams.get('access_token'))
      payload.set('fields', 'id,name,email,first_name,last_name,picture')
      xhttp.open('GET', 'https://graph.facebook.com/v20.0/me?' + payload.toString(), true)
      xhttp.send()
    }, 1000)
  }
}

ผลลัพธ์: ดึงข้อมูล "ส่วนตัว" และ "รูปภาพ" โปรไฟล์

Introduction

เก็บโค้ด - เริ่มต้นที่นี่ สร้างสรรค์ได้ทุกที่ ให้ที่นี่ดูแลคุณ