Site icon บริษัท โค๊ดบี จำกัด

ทำระบบ Facebook Login เก็บข้อมูลชื่อและอีเมล

codebee
เข้าสู่ระบบด้วย-facebook

เข้าสู่ระบบด้วย-facebook

<h3>ทำระบบ Facebook Login ด้วย jQuery เก็บข้อมูลชื่อและอีเมล<&sol;h3>&NewLine;<p><strong>ทำระบบ Facebook Login ด้วย jQuery เก็บข้อมูลชื่อและอีเมล<&sol;strong><br &sol;>&NewLine;facebook ได้ชื่อว่าเป็น social website ที่มีผู้ใช้งานมากที่สุดในโลก คิดเป็นหลายพันล้าน account นั่นคือเหตุผลอันดับต้น ๆ ว่าทำไมเว็บไซต์หรือเกมส์ โมบายแอพพลิเคชั่นในปัจจุบัน จึงจะมักจะมีระบบการสมัครสมาชิกหรือเข้าสู่ระบบโดยอาศัยข้อมูลจาก facebook account ซึ่งคนใหญ่มากเป็นสมาชิกอยู่แล้ว การคลิกที่ปุ่ม &&num;8220&semi;Facebook Login&&num;8221&semi; หรือ &&num;8220&semi;เข้าสู่ระบบด้วย <&excl;--more-->facebook&&num;8221&semi; จึงกลายเป็นความสะดวกสบายและเป็นทางเลือกในการลงทะเบียนผ่านเว็บไซต์ เพราะไม่ต้องเสียเวลาในการกรอกข้อมูลรายละเอียดการลงทะเบียนยาวเหยียด แต่สามารถคลิกที่ปุ่มเดียวก็สามารถเข้าใช้งานเว็บไซต์หรือแอพพลิเคชั่นได้ทันที<&sol;p>&NewLine;<p>วันนี้ลองมาดูกันครับว่า เราจะทำระบบการเข้าสู่ระบบหรือสมัครสมาชิกผ่าน javascript API ของ facebook ได้อย่างไร โดยที่สามารถได้ข้อมูลหลัก ๆ เช่น ชื่อ อีเมล และ ไอดี รวมไปถึงรูปภาพ avatar และนำไปใช้งานในส่วนอื่น ๆ ของเว็บไซต์หรือนำไปบันทึกลงฐานข้อมูล เก็บไว้ใช้งานในอนาคตได้ มีขั้นตอนง่าย ๆ ดังต่อไปนี้ครับ<&sol;p>&NewLine;<blockquote><p><a href&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;examples&sol;facebookLogin&sol;facebookLogin&period;zip" target&equals;"&lowbar;blank" rel&equals;"noopener noreferrer">ดาวน์โหลด facebookLogin&period;js<&sol;a><&sol;p><&sol;blockquote>&NewLine;<h4>โหลด javascript SDK ของ facebook มาใช้งาน<&sol;h4>&NewLine;<p>ให้ท่านไปที่หน้า javascript quickstart ของ Facebook <a href&equals;"https&colon;&sol;&sol;developers&period;facebook&period;com&sol;docs&sol;javascript&sol;quickstart" target&equals;"&lowbar;blank" rel&equals;"noopener noreferrer">https&colon;&sol;&sol;developers&period;facebook&period;com&sol;docs&sol;javascript&sol;quickstart<&sol;a> จากนั้น copy โค๊ด Facebook SDK มาวางไว้เหนือแท็กปิด body ในหน้าที่ท่านต้องการทำระบบ Facebook login ตัวอย่างโค๊ดจะมีหน้าตาลักษณะนี้ครับ<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true ">&lpar;function&lpar;d&comma; s&comma; id&rpar;&lbrace;&NewLine; var js&comma; &fjlig;s &equals; d&period;getElementsByTagName&lpar;s&rpar;&lbrack;0&rsqb;&semi;&NewLine; if &lpar;d&period;getElementById&lpar;id&rpar;&rpar; &lbrace;return&semi;&rcub;&NewLine; js &equals; d&period;createElement&lpar;s&rpar;&semi; js&period;id &equals; id&semi;&NewLine; js&period;src &equals; "&sol;&sol;connect&period;facebook&period;net&sol;en&lowbar;US&sol;sdk&period;js"&semi;&NewLine; &fjlig;s&period;parentNode&period;insertBefore&lpar;js&comma; &fjlig;s&rpar;&semi;&NewLine;&rcub;&lpar;document&comma; 'script'&comma; 'facebook-jssdk'&rpar;&rpar;&semi;<&sol;pre>&NewLine;<h4>ทำการตั้งค่าพื้นฐานการใช้งาน facebook SDK<&sol;h4>&NewLine;<p>หลังจากที่เราได้ติดตั้ง facebook SDK ไว้ในหน้าเว็บไซต์เหนือแท็กปิด body เรียบร้อยแล้ว ให้เราทำการเขียนโค๊ดสำหรับตั้งค่าพื้นฐานการใช้งาน โดยเบื้องต้นต้องไปสร้าง facebook application ที่หน้า developer ของ facebook ก่อน คือ <a href&equals;"https&colon;&sol;&sol;developers&period;facebook&period;com" target&equals;"&lowbar;blank" rel&equals;"noopener noreferrer">https&colon;&sol;&sol;developers&period;facebook&period;com<&sol;a> เมื่อท่านสร้างแอพเสร็จเรียบร้อยให้ไปที่หน้า การตั้งค่า -&gt&semi; ข้อมูลพื้นฐาน กรอกข้อมูลต่าง ๆ ลงไปรวมไปถึง url หน้าเว็บไซต์ที่เราต้องการจะใช้งาน facebook login เมื่อตั้งค่าเสร็จแล้ว ใก้ก๊อปปี้ app id และเขียนโค๊ดสำหรังตั้งค่าพื้นฐานดังนี้<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true ">&dollar;&lpar;document&rpar;&period;ready&lpar;function&lpar;e&rpar; &lbrace;&NewLine;&Tab; var APP&lowbar;ID &equals; "YOUR FACEBOOK APP&lowbar;ID"&semi; &sol;&sol; ไอดีได้จาก developers&period;facebook&period;com &NewLine;&Tab; window&period;fbAsyncInit &equals; function&lpar;&rpar; &lbrace;&NewLine;&Tab;&Tab;FB&period;init&lpar;&lbrace;&NewLine;&Tab;&Tab; appId &colon; APP&lowbar;ID&comma;&NewLine;&Tab;&Tab; xfbml &colon; true&comma;&NewLine;&Tab;&Tab; version &colon; 'v2&period;5'&NewLine;&Tab;&Tab;&rcub;&rpar;&semi;&NewLine;&Tab; &rcub;&semi;&NewLine;&rcub;&rpar;&semi;<&sol;pre>&NewLine;<h4>สร้างฟังก์ชั่นดึงข้อมูลที่ต้องการใช้งาน ไอดี ชื่อ อีเมล<&sol;h4>&NewLine;<p>หลังจากที่เราได้โหลด facebook sdk และเขียนโค๊ดตั้งค่าพื้นฐานเรียบร้อยแล้ว ในขั้นตอนต่อไปคือส่วนที่เราจะดึงข้อมูลที่จำเป็นสำหรับการเข้าสู่ระบบหรือการสมัครสมาชิกของเว็บไซต์เรา ซึ่งแต่ละเว็บไซต์ก็อาจจะต้องการข้อมูลที่แตกต่างกันไป แต่พื้นฐานที่เราจะได้จาก facebook sdk ก็คือ ชื่อ-นามสกุล อีเมล และไอดี โดยสามารถเขียนคำสั่งได้ดังนี้<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true ">function facebookLogin&lpar;&rpar;&lbrace;&NewLine;&Tab;FB&period;login&lpar;function&lpar;response&rpar; &lbrace;&NewLine;&Tab;&Tab;var fbuid &equals; response&period;authResponse&period;userID&semi; &sol;&sol; ไอดีเฟสบุ้ค&NewLine;&Tab;&Tab;if &lpar;response&period;authResponse&rpar; &lbrace;&NewLine;&Tab;&Tab; FB&period;api&lpar;'&sol;me'&comma; &lbrace; locale&colon; 'en&lowbar;US'&comma; fields&colon; 'name&comma; email' &rcub;&comma; function&lpar;response&rpar; &lbrace;&NewLine;&Tab;&Tab;&Tab;console&period;log&lpar;JSON&period;stringify&lpar;response&rpar;&rpar;&semi;&NewLine;&Tab;&Tab;&Tab; var name &equals; response&period;name&semi; &sol;&sol; ชื่อและนามสกุล&NewLine;&Tab;&Tab;&Tab; var email &equals; response&period;email&semi; &sol;&sol; อีเมล&NewLine;&Tab;&Tab;&Tab;&NewLine;&Tab;&Tab; &rcub;&rpar;&semi;&NewLine;&Tab;&Tab;&rcub;else&lbrace;&NewLine;&Tab;&Tab;&NewLine;&Tab;&Tab;&rcub;&NewLine;&Tab;&rcub;&comma; &lbrace;scope&colon;'email'&rcub;&rpar;&semi; &sol;&sol; รายการ permission ที่เว็บไซต์เราร้องขอข้อมูล&NewLine;&rcub;<&sol;pre>&NewLine;<p>สำหรับรูป facebook profile เราสามารถหาได้จากการทำ fbuid ไปเรียกใช้งาน facebook graph ตัวอย่าง<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true ">http&colon;&sol;&sol;graph&period;facebook&period;com&sol;fbuid&sol;picture&quest;type&equals;square&NewLine;<&sol;pre>&NewLine;<p>ตัวอย่างการเรียกใช้งานในหน้า html<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true ">&lt&semi;a href&equals;"&num;" onclick&equals;"facebookLogin&lpar;&rpar;&semi;"&gt&semi;&lt&semi;img src&equals;"facebook-login&period;png"&sol;&gt&semi;&lt&semi;&sol;a&gt&semi;<&sol;pre>&NewLine;<p>และถ้าเราต้องการบันทึกข้อมูลทั้งหมดลงฐานข้อมูล ก็เพียงใช้ ajax ส่งข้อมูลแบบ post ไปที่ php ตัวอย่างเช่น<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true ">&dollar;&period;ajax&lpar;&lbrace;&NewLine;&Tab;type&colon; 'POST'&comma;&NewLine;&Tab;url&colon; 'facebookLogin&period;php'&comma;&NewLine;&Tab;data&colon; &lbrace;&NewLine;&Tab;&Tab;'fluid'&colon;fbuid&comma;&NewLine; 'name'&colon; name&comma;&NewLine; 'email'&colon; email&NewLine; &rcub;&comma;&NewLine;&Tab;success&colon; function&lpar;json&rpar; &lbrace;&NewLine;&Tab;&Tab;&Tab; &NewLine;&Tab;&rcub;&NewLine;&rcub;&rpar;&semi;&NewLine;<&sol;pre>&NewLine;<p>เมื่อใช้ ajax ในการส่งข้อมูลแบบ post มาแล้ว ในไฟล์ facebookLogin&period;php เราก็เพียงเขียนโค๊ดสำหรับรับตัวแปรทั้งสามตัวแบบ post และ insert ลงฐานข้อมูล สำหรับนำไปใช้งานในการเข้าระบบครั้งต่อไป ตัวอย่างคำสั่ง<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true ">&dollar;fbuid &equals; &dollar;&lowbar;POST&lbrack;'fbuid'&rsqb;&semi;&NewLine;&dollar;name &equals; &dollar;&lowbar;POST&lbrack;'name'&rsqb;&semi;&NewLine;&dollar;email &equals; &dollar;&lowbar;POST&lbrack;'email'&rsqb;&semi;&NewLine;&NewLine;&dollar;query &equals; "INSERT INTO tb&lowbar;member SET fbuid &equals; '"&period;&dollar;fbuid&period;"'&comma;name &equals; '"&period;&dollar;name&period;"'&comma;email &equals; '"&period;&dollar;email&period;"'"&semi;&NewLine;&dollar;result &equals; mysql&lowbar;query&lpar;&dollar;query&rpar;&semi;&NewLine;&NewLine;&dollar;response &equals; array&lpar;'success' &equals;&gt&semi; TRUE&rpar;&semi;&NewLine;return &dollar;response&semi;<&sol;pre>&NewLine;<p>ดูตัวอย่างการส่งข้อมูลด้วย Ajax และการบันทึกข้อมูลใน PHP ได้จากกระทู้นี้<br &sol;>&NewLine;<a href&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;html5-canvas-เซฟรูปจากแคนวาสด้วย-jquery-ajax&sol;" target&equals;"&lowbar;blank" rel&equals;"noopener noreferrer">https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;html5-canvas-เซฟรูปจากแคนวาสด้วย-jquery-ajax&sol;<&sol;a><&sol;p>&NewLine;

Exit mobile version