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

บริษัทพัฒนา Website และ Mobile Apps

  •  หน้าแรก
  • ห้องทดลอง
  • สมัครงาน
    •  ร่วมงานกับเรา
    •  นักศึกษาฝึกงาน
  • บริการของเรา
    •  บริการรับทำเว็บไซต์
    •  บริการทำแอพพลิเคชั่น
    •  เทคโนโลยี IoT Beacon
    •  บริการโดเมนและโฮสติ้ง
  • ใช้งานฟรี
    • ระบบติดตามความคืบหน้า
    • โปรแกรมประเมินราคา
    • โปรแกรมสร้างใบเสนอราคา
    • โปรแกรมจัดการเอกสารออนไลน์
    • ดาวน์โหลด Source Code
  • เกี่ยวกับเรา
  • ติดต่อเรา
วิธีทำ-google-plus-login

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

March 30, 2017April 22, 2017 codebee

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



วิธีทำระบบ Login ด้วย Google Plus Javascript API
ปัจจุบันการพัฒนาเว็บไซต์ที่มีระบบสมาชิก เรามักจะเห็นปุ่มเข้าสู่ระบบเพิ่มเข้ามาอีกหนึ่งปุ่ม คือการเข้าสู่ระบบด้วย Facebook Account การเข้าสู่ระบบโดยอาศัย API ของ Facebook นอกจากเพิ่มความสะดวกให้กับผู้ใช้งานเว็บไซต์ที่สามารถเข้าสู่ระบบโดยการคลิกแค่ปุ่มเดียว ยังสะดวกกับผู้พัฒนาเว็บไซต์ด้วย เพราะตัว API จะให้ข้อมูลต่าง ๆ ที่ค่อนข้างพร้อมใช้งาน


ตัวอย่างการเข้าสู่ระบบบนเว็บไซต์ด้วย Google+ javascript API



อีกหนึ่งโซเชียลที่เหมาะกับการนำมาใช้งานในการเข้าสู่ระบบหรือสมัครสมาชิกเว็บไซต์ก็คือ Google+ API ซึ่งมีหลักการใช้งานคล้ายกันคือการขอ Permission สำหรับการเข้าถึงข้อมูลต่าง ๆ จากนั้นก็รับข้อมูลพื้นฐานผ่าน Callback ฟังก์ชั่น ลองมาดูกันครับว่าเราจะสามารถได้ข้อมูลจาก Google+ Account ได้ด้วยวิธีไหน

สร้างไฟล์ html หลักและ Google Project

  • 1. สร้างไฟล์ index.html
    ให้ include ไฟล์หลักของ api ไว้ในระหว่าง head tag และสร้าง meta tag สำหรับใส่รหัสไคลเอ็นต์ ดังนี้
    1
    2
    <meta name="google-signin-client_id" content="รหัสไคลเอ็นต์จะได้หลังจากสร้าง Google Project">
    <script src="https://apis.google.com/js/platform.js" async defer></script>
  • 2. ไปที่ Google Developer Console
    สร้างโปรเจค Google และไปที่เมนู ข้อมูลรับรอง -> สร้างข้อมูลรับรอง -> รหัสไคลเอ็นต์ OAuth


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

  • 3. ในช่อง ข้อจำกัด JavaScript เริ่มต้นที่ได้รับอนุญาต ให้พิมพ์ชื่อโดเมนเว็บไซต์ของเราที่จะใช้งานการเข้าระบบด้วย Google+


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

  • 4. ให้สังเกตุในหน้านี้จะพบคำว่า รหัสไคลเอ็นต์ ให้ก๊อปปี้รหัสไปวางแทนข้อมูลที่ว่างใน meta tag ที่เราได้สร้างไว้ในข้อแรก


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


สร้างปุ่ม Login/Logout และรับข้อมูล Google+ Account

  • 1. เปิดไฟล์ index.html ใส่คำสั่งเพื่อเพิ่มปุ่มเข้าสู่ระบบในระหว่าง body tag ดังนี้

    1
    <div class="g-signin2" data-onsuccess="onSignIn"></div>

  • 2. ใต้ body tag สร้างฟังก์ชั่น javascript สำหรับรับข้อมูล Google+ account เมื่อคลิกที่ปุ่ม Sigin ดังนี้

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <script>
    function onSignIn(googleUser) {
      var profile = googleUser.getBasicProfile();
      console.log('ID: ' + profile.getId());
      console.log('Name: ' + profile.getName());
      console.log('Image URL: ' + profile.getImageUrl());
      console.log('Email: ' + profile.getEmail());
    }
    </script>

    สำหรับการ Sign Out หรือออกจากระบบก็จะเขียน javascript ได้ประมาณนี้ครับ

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <a href="#" onclick="signOut();">Sign out</a>
    <script>
      function signOut() {
        var auth2 = gapi.auth2.getAuthInstance();
        auth2.signOut().then(function () {
          console.log('User signed out.');
        });
      }
    </script>


ทดสอบเข้าสู่ระบบด้วย Google+ API

อัพโหลดไฟล์ index.html ที่เราได้สร้างไว้ขึ้นไปบนโฮสติ้ง โดเมนที่เรากำหนดไว้ใน Google Project หากไม่มีอะไรผิดพลาด เราจะพบกับปุ่มสำหรับเข้าสู่ระบบของ Google+ ดังรูป


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


ให้ทดสอบโดยการกดปุ่ม ลงชื่อเข้าใช้ จะปรากฏป๊อปอัพแสดงรายการ Permission ให้กดปุ่ม อนุญาติ


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


หากไม่มีอะไรผิดพลาดและเราสามารถเข้าสู่ระบบได้ ข้อความในปุ่มจะเปลี่ยนเป็น Signed in ดังรูปด้านล่าง


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


เพียงเท่านี้เว็บไซต์ของเราก็จะสามารถได้ข้อมูลต่างจาก Google+ Account และนำข้อมูลไปใช้งานสำหรับการเข้าสู่ระบบบนเว็บไซต์ สำหรับการเข้าสู่ระบบด้วยเฟสบุ้คสามารถดูได้ที่กระทู้นี้ครับ https://www.codebee.co.th/labs/ทำระบบ-facebook-login-เก็บข้อมูลชื่อ/

กระทู้ใกล้เคียง

วิธีใช้ Google Lighthouse ตรวจสอบคุณภาพเว็บไซต์... วิธีใช้ Google Lighthouse ตรวจสอบคุณภาพเว็บไซต์ การพัฒนาเว็บไซต์ในปัจจุบันนั้น นอกจากเรื่องความเร็ว และการพัฒนาให้รองรับการแสดงผลในหลากหลาย device ...
Datatables.js ใช้ Ajax โหลดข้อมูลทีละหน้าเกิน 10,0... Datatables.js ใช้ Ajax โหลดข้อมูลทีละหน้าเกิน 10,000 Row Datatables.js ใช้ Ajax โหลดข้อมูลทีละหน้า สำหรับการแสดงผลข้อมูลในรูปแบบตารางนั้น อีกหนึ่ง...
วิธีแก้ Error Foreign key constraint ใน MySQL... วิธีแก้ Error Foreign key constraint ใน MySQL วิธีแก้ Error Foreign key constraint is incorrectly formed วิธีแก้ Error Foreign key constraint is inc...
การพัฒนาเว็บไซต์ ภาษา PHP โดยใช้ Web Framework VS ... การพัฒนาเว็บไซต์ ภาษา PHP โดยใช้ Web Framework VS Core PHP การพัฒนาเว็บไซต์ ภาษา PHP โดยใช้ Web Framework VS Core PHP Core PHP คืออะไร Core PHP คือ...
Website Development authentication google api, google account login, google api login, google login, Google Plus Javascript API, Google Plus login, javascript google login, ทำ google login, ทำระบบ google authentication, วิธีทำระบบ Login, เข้าสู่ระบบด้วย google account. permalink.

Post navigation

วิธีทำ Chrome Extension และอัพโหลดขึ้น Chrome Web Store
รวมฟรีโปรแกรม FTP Client สำหรับอัพโหลดไฟล์ขึ้น Server

ค้นหา

Search for:

50 บทความ ยอดนิยม

  • ยอดนิยม
  • ล่าสุด
  • ออกแบบเสื้อออนไลน์
    โปรแกรมออกแบบเสื้อ ด้วย Web Application แบบออนไลน์ Jan 2, 2017
  • สร้างใบเสนอราคาออนไลน์
    ตัวอย่างใบเสนอราคา ( Quotation ) Jun 10, 2016
  • API-คืออะไร
    API คืออะไร ทำความรู้จักกับเอพีไอ Aug 7, 2016
  • ยืนยันเพจ
    วิธียืนยัน facebook page verified badge Mar 27, 2016
  • วิธีทำ-Website-MySQL-ให้โหลดโคตรเร็ว-2
    วิธีทำ Website / MySQL ให้โหลดโคตรเร็วและรองรับคนปริมาณมาก ๆ Nov 16, 2017
  • ฟอนต์ภาษาไทยสำหรับทำเว็บไซต์
    Download Font ภาษาไทยสำหรับทำเว็บ Jun 21, 2016
  • วิธีทำ-mirror-screen
    วิธีทำ mirror screen แสดงหน้าจอมือถือบนคอมพิวเตอร์ Oct 31, 2016
  • php-codeigniter-framework
    PHP Codeigniter เน้นใช้งาน : ตอน 1 ดาวน์โหลดและติดตั้ง codeinginter Mar 20, 2016
  • bootstrap-คืออะไร
    Bootstrap คืออะไร รู้จักเครื่องมือทำเว็บไซต์ยอดนิยม Sep 3, 2016
  • dropdown-เลือกจังหวัด
    Dropdown จังหวัด เลือกอัตโนมัติ jQuery+xml Plugin Aug 12, 2016
  • วิธีทำ-notification-แบบ-facebook
    ทำเว็บไซต์ ให้มี notification แบบ facebook Oct 9, 2016
  • เขียนแอพด้วย ionic framework : ตอน 3 สร้าง ionic project Dec 7, 2015
  • ราคา รับทำแอพ
    ราคาทำแอพ อธิบายเรทราคาทำโมบายแอพพลิเคชั่น Oct 30, 2016
  • วิธีทำเว็บ 2 ภาษา หรือมากกว่า พร้อมตัวอย่าง Jun 16, 2016
  • php-export-excel
    PHP วิธี Export Excel ไฟล์โดยการ Query จากฐานข้อมูล Feb 9, 2017
  • สอน-laravel-framework
    สอน Laravel 5 : ใช้งาน Controller ร่วมกับ Router Aug 21, 2016
  • สอน wordpress
    รวมฟรี Responsive WordPress Theme [ 4 ธีมเน้น ๆ ] Jun 26, 2016
  • รวมเพจ รวมไลค์ ที่มีอยู่ให้เป็นอันเดียวกัน Merge Page Jul 9, 2016
  • Incognito mode เข้าเว็บแบบไร้ร่องรอย Jul 28, 2016
  • onesignal-เว็บ-push-notification
    วิธีทำ Web Push Notification แบบ Facebook ด้วย OneSignal Jan 19, 2017
  • MailChimp คืออะไร และวิธีใช้งาน Jun 16, 2016
  • Application กับ Program แตกต่างกันอย่างไร Jul 13, 2016
  • php-codeigniter-framework
    สอน codeigniter วิธีใช้งาน session ใน Codeigniter Jul 6, 2016
  • เขียนโปรแกรมชำระเงินออนไลน์
    ทำเว็บ E-Commerce ชำระเงินออนไลน์ใช้ Paypal API Jul 24, 2016
  • วิธีถ่ายรูป 360 องศาและแชร์ลง Facebook Jun 11, 2016
  • วิธียืนยัน-google-business-1
    เพิ่มตําแหน่งใน Google Map เพิ่มธุรกิจของคุณในแผนที่โลก Jul 31, 2016
  • รวมฟรี Javascript Library ที่จะทำให้เว็บไซต์ดูน่าสนใจมากยิ่งขึ้น May 24, 2017
  • yii2-framework
    สอน Yii 2 : เริ่มต้นสร้าง View และ Controller Aug 21, 2016
  • ใช้งาน OneSignal ส่ง Push Notification Jun 15, 2016
  • ระบบสมัครสมาชิก-4
    สอน codeigniter ทำระบบสมัครสมาชิก Aug 16, 2016
  • เขียนแอพด้วย ionic framework : ตอน 1 ติดตั้ง Node.js Dec 6, 2015
  • php-codeigniter-framework
    PHP Codeigniter เน้นใช้งาน : ตอน 2 รับส่งค่าระหว่าง views และ controllers Mar 20, 2016
  • ทำโฆษณาออนไลน์
    การติดตั้ง google adword conversion tracking Nov 21, 2015
  • แปลง flash จัดการกับ flash ในเว็บเก่าให้เป็น html5 Jun 16, 2016
  • php-export-pdf-ภาษาไทย-3
    แปลง html เป็น pdf รองรับภาษาไทย ด้วย mPdf และ codeigniter Sep 30, 2017
  • วิธีทำ mockup, wireframe ด้วย balsamiq mockup 3 Dec 15, 2015
  • ทำ-seo-ด้วยตัวเอง-2
    Landing Page คืออะไร หัวใจหลักของ Online Marketing Sep 7, 2016
  • สอน-laravel-framework
    สอน Laravel 5 : การใช้งานไฟล์ assets ต่าง ๆ ใน View Aug 20, 2016
  • วิธี-export-excel-ไฟล์-ลงฐานข้อมูล
    วิธี import excel เข้าไปในฐานข้อมูล แบบรองรับภาษาไทย Mar 9, 2017
  • php-codeigniter-framework
    สอน Codeigniter การใช้งาน Model Jun 24, 2016
  • วิธีดูรายชื่อคนถูกใจเพจ facebook แบบรายวัน Jul 9, 2016
  • แนะนำ 5 เกมส์มือถือง่าย ๆ เล่นฆ่าเวลา [ Download ] Jul 5, 2016
  • php-codeigniter-framework
    CRUD คืออะไร รวม codeigniter library ที่จะทำให้ชีวิตง่ายขึ้น Mar 10, 2017
  • php-codeigniter-framework
    ทำเว็บไซต์ให้ปลอดภัย Codeigniter Security Aug 14, 2016
  • วิธีเปลี่ยนชื่ออินเตอร์เนต Router wifi ZyXEL ADSL Jun 17, 2016
  • php-codeigniter-framework
    สอน Codeigniter วิธีลบไฟล์ index.php ออกจาก URL Apr 6, 2016
  • CronJob คืออะไร วิธีตั้งเวลาให้ PHP ทำงาน Aug 14, 2016
  • ทำ Wireframe แนะนำโปรแกรมทำ Wireframe และ Mockup Nov 20, 2015
  • php-codeigniter-framework
    สอน codeigniter วิธีใช้ pagination ร่วมกับ bootstrap Oct 19, 2016
  • ทำไมต้องทำแอพ 6 เหตุผล ทำไมธุรกิจต้องมี mobile application Jun 16, 2016
  • วิธีใช้ Google Lighthouse ตรวจสอบคุณภาพเว็บไซต์ Dec 18, 2018
  • วิธีเปิดใช้งาน USB Debugging Mode เครื่อง Samsung S9สำหรับนักพัฒนา Dec 10, 2018
  • Datatables-ใช้-Ajax-โหลดข้อมูลทีละหน้าเกิน-10000-Row
    Datatables.js ใช้ Ajax โหลดข้อมูลทีละหน้าเกิน 10,000 Row Nov 30, 2018
  • วิธีแก้-Error-Foreign-key-constraint-is-incorrectly-formed
    วิธีแก้ Error Foreign key constraint ใน MySQL Nov 20, 2018
  • HMVC-สำหรับพัฒนาเว็บไซต์ขนาดใหญ่
    ทำเว็บไซต์ขนาดใหญ่ ด้วย HMVC Codeigniter Sep 11, 2018
  • React-Native-ส่ง-Notification-ด้วย-Onesignal-3
    React Native ส่ง Notification ด้วย Onesignal [Android] Jun 21, 2018
  • การพัฒนาเว็บไซต์-ภาษา-PHP-โดยใช้-Web-Framework-VS-Core-PHP
    การพัฒนาเว็บไซต์ ภาษา PHP โดยใช้ Web Framework VS Core PHP Jun 8, 2018
  • วิธีลบหน้า-Error-404-ออกจากผลการค้นหา--3
    วิธีลบหน้า Error 404 ออกจากผลการค้นหา Google Search Result Jun 4, 2018
  • PHP-ส่งข้อความเข้ามือถือ2
    PHP ส่งข้อความเข้ามือถือ ( SMS )ด้วย Nexmo SMS API May 31, 2018
  • คำสั่งค้นหาขั้นสูง-ด้วย-Advanced-Google-Search-Commands
    คำสั่งค้นหาขั้นสูง ด้วย Advanced Google Search Commands May 30, 2018
  • วิธีทำ-redirect-หน้าเว็บไซต์-htaccess
    วิธีทำ URL redirect โดยใช้ .htaccess และคำสั่งอื่น ๆ Mar 9, 2018
  • วิธีทำหน้า-404-Page-Not-Found
    วิธีทำหน้า 404 Page Not Found ใน Codeigniter Feb 14, 2018
  • วิธีติดตั้ง Facebook messenger plugin สำหรับเว็บไซต์ Feb 14, 2018
  • html5 canvas animation
    html5 Canvas วิธีทำ Animation จาก Sprite Sheet Feb 5, 2018
  • แนะนำโปรแกรม Quony สำหรับจัดการเอกสารออนไลน์ ฟรี! Nov 17, 2017
  • วิธีทำ-Website-MySQL-ให้โหลดโคตรเร็ว-2
    วิธีทำ Website / MySQL ให้โหลดโคตรเร็วและรองรับคนปริมาณมาก ๆ Nov 16, 2017
  • ระบบเช็คยอดโอนอัตโนมัติ
    ระบบเช็คยอดโอนอัตโนมัติ ทำยังไง และปลอดภัยแค่ไหน Nov 2, 2017
  • Google Algorithm เข้าใจอัลกอริทึมของ Google ฉบับรวบรัด Nov 1, 2017
  • ทำ-Backend-ด้วย-CRUD5
    วิธีทำ Backend ด้วย CRUD Library ด้วยโค๊ดไม่กี่บรรทัด Oct 31, 2017
  • ประโยชน์ของการทำ-E-R-Diagram
    ประโยชน์ของการทำ E-R Diagram ก่อนเริ่มลง database Oct 20, 2017
  • แนวคิดการพัฒนาระบบ-machine-learning
    ระบบ Machine Learning แนวคิดพื้นฐานการทำ Website ให้คิดเองได้ Oct 18, 2017
  • php-export-pdf-ภาษาไทย-3
    แปลง html เป็น pdf รองรับภาษาไทย ด้วย mPdf และ codeigniter Sep 30, 2017
  • php-codeigniter-framework
    ทำเว็บไซต์ด้วย codeigniter การใช้งาน autoload Aug 27, 2017
  • ลืมรหัสผ่านเว็บไซต์
    ลืมรหัสผ่าน facebook วิธีหารหัสผ่านเดิมด้วย browser ที่เราใช้ Aug 16, 2017
  • รวม-PHP-Utils-ฟังก์ชั่นอรรถประโยชน์ที่ใช้งานบ่อย
    รวม PHP Utils ฟังก์ชั่นอรรถประโยชน์ที่ใช้งานบ่อย Aug 14, 2017
  • ตัดข้อความภาษาไทยใน-php
    ตัดข้อความภาษาไทยใน php ไม่ให้มีเครื่องหมายสี่เหลี่ยม Aug 14, 2017
  • วิธีสมัครและใช้งาน-Facebook-Developer Account-1
    วิธีสมัครและใช้งาน Facebook Developer Account Aug 11, 2017
  • วิธีแปลงไฟล์ให้เป็น-utf8-ด้วยโปรแกรม-dreamweaver
    วิธี save ไฟล์เป็น UTF-8 สำหรับโปรแกรม Dreamweaver Aug 10, 2017
  • ใช้งาน isotope javascript สำหรับการกรองข้อมูล filtering Aug 9, 2017
  • วิธีทำ Javascript Share ทั้ง 3 โซเชียล Facebook Google Twitter Jul 20, 2017
  • jquery-ui-frameworks
    วิธีทำลากและวางไอเทม Drag & Drop Image หรือ Div ด้วย jQuery UI Jun 30, 2017
  • บันทึก Emoji ด้วย MySQL ได้ทั้งใน iOS และ Android Jun 14, 2017
  • วิธีติดตั้งไฟล์ .exe ติดตั้งเกมส์ของ Window ในเครื่อง Mac Jun 1, 2017
  • รวม-website-checklist
    รวม Website Checklist สำหรับคนเริ่มทำเว็บไซต์ May 25, 2017
  • รวมฟรี Javascript Library ที่จะทำให้เว็บไซต์ดูน่าสนใจมากยิ่งขึ้น May 24, 2017
  • สอนทำเว็บไซต์-css-animation
    การทำ CSS Transition ทำเว็บไซต์ให้มีลูกเล่น May 19, 2017
  • ทำแอพด้วย-beacon
    ไอเดียทำ Mobile Apps ด้วยการประยุกต์ใช้เทคโนโลยี Beacon May 18, 2017
  • curl-คืออะไร
    cURL คืออะไร วิธีดึงรายละเอียดและทำระบบแชร์เว็บไซต์ May 16, 2017
  • ตลาดมะลิ
    ตลาดมะลิ เลียบด่วนเมืองทอง ช้อป กิน ฟินเวอร์ May 11, 2017
  • เริ่มใช้งาน-macbook
    Macintosh OS X แนะนำโปรแกรม และการใช้งาน ฉบับเริ่มต้น May 5, 2017
  • รวม-online-payment-gateway
    Payment Gateway คืออะไร เลือกรูปแบบการชำระเงินบนโลกออนไลน์ May 3, 2017
  • เทียบ-inch-และ-pixel
    ทำแอปใน iOS ตัวเลขขนาดหน้าจอแบบ Inch และ Pixel Apr 25, 2017
  • google-adword ไฟล์ csv xml excel
    Google ปรับการทำงาน Remarketing ให้ทำงานข้ามอุปกรณ์ได้แล้ว Apr 9, 2017
  • วิธีดูเครื่องมือที่ใช้ทำเว็บไซต์-4
    เว็บไซต์นี้ ทำจากอะไร วิธีดูว่าเว็บไซต์ ทำจากภาษา ปลั๊กอิน เฟรมเวิร์ค อะไร Apr 3, 2017
  • ฟรีโปรแกรม-FTP
    รวมฟรีโปรแกรม FTP Client สำหรับอัพโหลดไฟล์ขึ้น Server Mar 31, 2017
  • วิธีทำ-google-plus-login
    วิธีทำระบบ Login ด้วย Google Plus Javascript API Mar 30, 2017
  • วิธีทำ-chrome-extension
    วิธีทำ Chrome Extension และอัพโหลดขึ้น Chrome Web Store Mar 29, 2017
  • ทำ-mobile-app
    ทำ mobile apps ติดตามตัว ด้วยระบบ GPS ระบุตำแหน่งในมือถือ Mar 27, 2017
  • php-codeigniter-framework
    วิธีทำเว็บไซต์ 2 ภาษา โดยใช้ Dababase อย่างง่าย Mar 27, 2017
  • วิธีทำ-email-tracking
    สอนทำ Email Tracking วิธีดูว่าอีเมลที่เราส่งออกไปถูกเปิดอ่านหรือยัง Mar 23, 2017
สงวนลิขสิทธิ์ บริษัท โค๊ดบี จำกัด 41/94 แจ้งวัฒนะ - ปากเกร็ด นนทบุรี 11120 โทร. 02 962 1556