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

วิธีทำระบบ Login ด้วย Google Plus Javascript API

codebee
วิธีทำ-google-plus-login

วิธีทำ-google-plus-login

<h2>วิธีทำระบบ Login ด้วย Google Plus Javascript API<&sol;h2>&NewLine;<p><strong>วิธีทำระบบ Login ด้วย Google Plus Javascript API<&sol;strong><br &sol;>&NewLine;ปัจจุบันการพัฒนาเว็บไซต์ที่มีระบบสมาชิก เรามักจะเห็นปุ่มเข้าสู่ระบบเพิ่มเข้ามาอีกหนึ่งปุ่ม คือการเข้าสู่ระบบด้วย Facebook Account การเข้าสู่ระบบโดยอาศัย API ของ Facebook นอกจากเพิ่มความสะดวกให้กับผู้ใช้งานเว็บไซต์ที่สามารถเข้าสู่ระบบโดยการคลิกแค่ปุ่มเดียว ยังสะดวกกับผู้พัฒนาเว็บไซต์ด้วย เพราะตัว API จะให้ข้อมูลต่าง ๆ ที่ค่อนข้างพร้อมใช้งาน<&excl;--more--><&sol;p>&NewLine;<blockquote><p><a href&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;examples&sol;google&lowbar;plus&lowbar;login&sol;" target&equals;"&lowbar;blank" rel&equals;"noopener noreferrer">ตัวอย่างการเข้าสู่ระบบบนเว็บไซต์ด้วย Google&plus; javascript API<&sol;a><&sol;p><&sol;blockquote>&NewLine;<p>อีกหนึ่งโซเชียลที่เหมาะกับการนำมาใช้งานในการเข้าสู่ระบบหรือสมัครสมาชิกเว็บไซต์ก็คือ Google&plus; API ซึ่งมีหลักการใช้งานคล้ายกันคือการขอ Permission สำหรับการเข้าถึงข้อมูลต่าง ๆ จากนั้นก็รับข้อมูลพื้นฐานผ่าน Callback ฟังก์ชั่น ลองมาดูกันครับว่าเราจะสามารถได้ข้อมูลจาก Google&plus; Account ได้ด้วยวิธีไหน<&sol;p>&NewLine;<h4>สร้างไฟล์ html หลักและ Google Project<&sol;h4>&NewLine;<ul>&NewLine;<li>1&period; สร้างไฟล์ index&period;html<br &sol;>&NewLine;ให้ include ไฟล์หลักของ api ไว้ในระหว่าง head tag และสร้าง meta tag สำหรับใส่รหัสไคลเอ็นต์ ดังนี้<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true "><meta name&equals;"google-signin-client&lowbar;id" content&equals;"รหัสไคลเอ็นต์จะได้หลังจากสร้าง Google Project">&NewLine;&lt&semi;script src&equals;"https&colon;&sol;&sol;apis&period;google&period;com&sol;js&sol;platform&period;js" async defer&gt&semi;&lt&semi;&sol;script&gt&semi;<&sol;pre>&NewLine;<&sol;li>&NewLine;<li>2&period; ไปที่ <a href&equals;"https&colon;&sol;&sol;console&period;developers&period;google&period;com" target&equals;"&lowbar;blank" rel&equals;"noopener noreferrer">Google Developer Console<&sol;a><br &sol;>&NewLine;สร้างโปรเจค Google และไปที่เมนู <strong>ข้อมูลรับรอง -&gt&semi; สร้างข้อมูลรับรอง -&gt&semi; รหัสไคลเอ็นต์ OAuth<&sol;strong><&sol;p>&NewLine;<p><img width&equals;"400" src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2017&sol;03&sol;วิธีทำ-google-plus-login-2&period;png" alt&equals;"วิธีทำ-google-plus-login"><&sol;li>&NewLine;<li>3&period; ในช่อง ข้อจำกัด JavaScript เริ่มต้นที่ได้รับอนุญาต ให้พิมพ์ชื่อโดเมนเว็บไซต์ของเราที่จะใช้งานการเข้าระบบด้วย Google&plus;&NewLine;<p><img width&equals;"400" src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2017&sol;03&sol;วิธีทำ-google-plus-login-3&period;png" alt&equals;"วิธีทำ-google-plus-login"><&sol;li>&NewLine;<li>4&period; ให้สังเกตุในหน้านี้จะพบคำว่า <strong>รหัสไคลเอ็นต์<&sol;strong> ให้ก๊อปปี้รหัสไปวางแทนข้อมูลที่ว่างใน meta tag ที่เราได้สร้างไว้ในข้อแรก&NewLine;<p><img width&equals;"400" src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2017&sol;03&sol;วิธีทำ-google-plus-login-1&period;png" alt&equals;"วิธีทำ-google-plus-login"><&sol;li>&NewLine;<&sol;ul>&NewLine;<h4>สร้างปุ่ม Login&sol;Logout และรับข้อมูล Google&plus; Account<&sol;h4>&NewLine;<ul>&NewLine;<li>1&period; เปิดไฟล์ index&period;html ใส่คำสั่งเพื่อเพิ่มปุ่มเข้าสู่ระบบในระหว่าง body tag ดังนี้&NewLine;<pre class&equals;"lang&colon;default decode&colon;true ">&lt&semi;div class&equals;"g-signin2" data-onsuccess&equals;"onSignIn"&gt&semi;&lt&semi;&sol;div&gt&semi;<&sol;pre>&NewLine;<&sol;li>&NewLine;<li>2&period; ใต้ body tag สร้างฟังก์ชั่น javascript สำหรับรับข้อมูล Google&plus; account เมื่อคลิกที่ปุ่ม Sigin ดังนี้&NewLine;<pre class&equals;"lang&colon;default decode&colon;true ">&lt&semi;script&gt&semi;&NewLine;function onSignIn&lpar;googleUser&rpar; &lbrace;&NewLine; var profile &equals; googleUser&period;getBasicProfile&lpar;&rpar;&semi;&NewLine; console&period;log&lpar;'ID&colon; ' &plus; profile&period;getId&lpar;&rpar;&rpar;&semi;&NewLine; console&period;log&lpar;'Name&colon; ' &plus; profile&period;getName&lpar;&rpar;&rpar;&semi;&NewLine; console&period;log&lpar;'Image URL&colon; ' &plus; profile&period;getImageUrl&lpar;&rpar;&rpar;&semi;&NewLine; console&period;log&lpar;'Email&colon; ' &plus; profile&period;getEmail&lpar;&rpar;&rpar;&semi; &NewLine;&rcub;&NewLine;&lt&semi;&sol;script&gt&semi;<&sol;pre>&NewLine;<p>สำหรับการ Sign Out หรือออกจากระบบก็จะเขียน javascript ได้ประมาณนี้ครับ<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true ">&lt&semi;a href&equals;"&num;" onclick&equals;"signOut&lpar;&rpar;&semi;"&gt&semi;Sign out&lt&semi;&sol;a&gt&semi;&NewLine;&lt&semi;script&gt&semi;&NewLine; function signOut&lpar;&rpar; &lbrace;&NewLine; var auth2 &equals; gapi&period;auth2&period;getAuthInstance&lpar;&rpar;&semi;&NewLine; auth2&period;signOut&lpar;&rpar;&period;then&lpar;function &lpar;&rpar; &lbrace;&NewLine; console&period;log&lpar;'User signed out&period;'&rpar;&semi;&NewLine; &rcub;&rpar;&semi;&NewLine; &rcub;&NewLine;&lt&semi;&sol;script&gt&semi;<&sol;pre>&NewLine;<&sol;li>&NewLine;<&sol;ul>&NewLine;<h4>ทดสอบเข้าสู่ระบบด้วย Google&plus; API<&sol;h4>&NewLine;<p>อัพโหลดไฟล์ index&period;html ที่เราได้สร้างไว้ขึ้นไปบนโฮสติ้ง โดเมนที่เรากำหนดไว้ใน Google Project หากไม่มีอะไรผิดพลาด เราจะพบกับปุ่มสำหรับเข้าสู่ระบบของ Google&plus; ดังรูป<&sol;p>&NewLine;<p><img width&equals;"400" src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2017&sol;03&sol;วิธีทำ-google-plus-login-4&period;png" alt&equals;"วิธีทำ-google-plus-login"><&sol;p>&NewLine;<p>ให้ทดสอบโดยการกดปุ่ม <strong>ลงชื่อเข้าใช้<&sol;strong> จะปรากฏป๊อปอัพแสดงรายการ Permission ให้กดปุ่ม <strong>อนุญาติ<&sol;strong><&sol;p>&NewLine;<p><img width&equals;"400" src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2017&sol;03&sol;วิธีทำ-google-plus-login-5-1&period;png" alt&equals;"วิธีทำ-google-plus-login"><&sol;p>&NewLine;<p>หากไม่มีอะไรผิดพลาดและเราสามารถเข้าสู่ระบบได้ ข้อความในปุ่มจะเปลี่ยนเป็น <strong>Signed in<&sol;strong> ดังรูปด้านล่าง<&sol;p>&NewLine;<p><img width&equals;"400" src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2017&sol;03&sol;วิธีทำ-google-plus-login-6&period;png" alt&equals;"วิธีทำ-google-plus-login"><&sol;p>&NewLine;<p>เพียงเท่านี้เว็บไซต์ของเราก็จะสามารถได้ข้อมูลต่างจาก Google&plus; Account และนำข้อมูลไปใช้งานสำหรับการเข้าสู่ระบบบนเว็บไซต์ สำหรับการเข้าสู่ระบบด้วยเฟสบุ้คสามารถดูได้ที่กระทู้นี้ครับ <a href&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;ทำระบบ-facebook-login-เก็บข้อมูลชื่อ&sol;" target&equals;"&lowbar;blank" rel&equals;"noopener noreferrer">https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;ทำระบบ-facebook-login-เก็บข้อมูลชื่อ&sol;<&sol;a><&sol;p>&NewLine;

Exit mobile version