วิธีเพิ่มการเข้าสู่ระบบ Google แบบคลิกเดียวใน WordPress (ทีละขั้นตอน)

เผยแพร่แล้ว: 2023-01-19


คุณต้องการเพิ่มการเข้าสู่ระบบด้วยคลิกเดียวด้วย Google ในเว็บไซต์ WordPress ของคุณหรือไม่?

เมื่อผู้ใช้สามารถลงชื่อเข้าใช้ด้วยบัญชี Google พวกเขาจะไม่ต้องสร้าง จดจำ หรือติดตามชื่อผู้ใช้และรหัสผ่านอื่นเพื่อเข้าถึงเว็บไซต์ของคุณ ซึ่งจะช่วยประหยัดเวลาและเพิ่มอัตราการแปลงของคุณ

ในบทความนี้ เราจะแชร์วิธีเพิ่มการเข้าสู่ระบบ Google ในคลิกเดียวใน WordPress อย่างง่ายดาย

How to Add One-Click Login With Google in WordPress

ทำไมต้องเพิ่ม One-Click Google Login ใน WordPress?

ผู้ใช้อินเทอร์เน็ตจำนวนมากยังคงลงชื่อเข้าใช้บัญชี Google ของตน ซึ่งช่วยให้เข้าถึงแอปของ Google เช่น Gmail, ไดรฟ์ และเอกสารได้อย่างรวดเร็วโดยไม่ต้องลงชื่อเข้าใช้แยกกันสำหรับแต่ละแอป

การเปิดใช้งานการเข้าสู่ระบบ Google เพียงคลิกเดียวบนหน้าเข้าสู่ระบบ WordPress ช่วยให้ผู้ใช้ทำเช่นเดียวกันบนเว็บไซต์ของคุณได้ พวกเขาประหยัดเวลาได้ด้วยการลงชื่อเข้าใช้ด้วยบัญชี Google อย่างรวดเร็ว สิ่งนี้ช่วยให้พวกเขาไม่ต้องป้อนข้อมูลรับรองการเข้าสู่ระบบในแต่ละครั้ง

หากคุณใช้งานบล็อก WordPress แบบธรรมดา คุณอาจพบว่าคุณสมบัตินี้ไม่มีประโยชน์

แต่ถ้าองค์กรของคุณใช้ Google Workspace สำหรับที่อยู่อีเมลธุรกิจแบบมืออาชีพ สมาชิกในทีมของคุณสามารถใช้บัญชีแอป Google ขององค์กรเพื่อเข้าสู่ระบบได้

นอกจากนี้ คุณลักษณะการลงชื่อเข้าใช้เพียงครั้งเดียว เช่น การเข้าสู่ระบบ Google ในคลิกเดียวยังมีประโยชน์มากสำหรับเว็บไซต์ใดๆ ที่กำหนดให้ผู้ใช้ต้องลงชื่อเข้าใช้ เช่น เว็บไซต์ที่มีผู้เขียนหลายคน เว็บไซต์สำหรับสมาชิก และเว็บไซต์ที่ขายหลักสูตรออนไลน์

จากที่กล่าวมา เรามาดูวิธีเพิ่มการเข้าสู่ระบบด้วยคลิกเดียวด้วย Google ในเว็บไซต์ WordPress ของคุณได้อย่างง่ายดาย

วิธีเพิ่มการเข้าสู่ระบบ Google ด้วยคลิกเดียวใน WordPress

ก่อนอื่น คุณจะต้องติดตั้งและเปิดใช้งานปลั๊กอิน Nextend Social Login and Register สำหรับรายละเอียดเพิ่มเติม โปรดดูคู่มือสำหรับผู้เริ่มต้นของเราเกี่ยวกับวิธีติดตั้งปลั๊กอิน WordPress

สำหรับบทช่วยสอนนี้ เราจะใช้ปลั๊กอินฟรีที่รองรับการเข้าสู่ระบบ Google, Twitter และ Facebook นอกจากนี้ยังมี Nextend Social Login เวอร์ชันชำระเงินที่เพิ่มการเข้าสู่ระบบโซเชียลสำหรับเว็บไซต์ต่างๆ มากมาย เช่น PayPal, Slack และ TikTok

เมื่อเปิดใช้งาน คุณต้องไปที่ การ ตั้งค่า » Nextend Social Login ในพื้นที่ผู้ดูแลระบบ WordPress บนหน้าจอนี้ คุณจะเห็นตัวเลือกการเข้าสู่ระบบโซเชียลต่างๆ ที่พร้อมใช้งาน

Adding social login to your WordPress website

ในการเพิ่มข้อมูลเข้าสู่ระบบ Google ในเว็บไซต์ WordPress ของคุณ คุณต้องคลิกปุ่ม 'เริ่มต้นใช้งาน' ใต้โลโก้ Google

ที่นี่คุณจะเห็นว่าขั้นตอนแรกของคุณคือการสร้างแอป Google

การสร้างแอป Google ฟังดูเป็นเรื่องทางเทคนิค แต่ไม่ต้องกังวล

The Nextend Social Login Getting Started Tab

คุณไม่จำเป็นต้องรู้รหัสใดๆ และเราจะแนะนำคุณตลอดทุกขั้นตอน

การสร้าง Google App

ในการสร้างแอปนี้ คุณจะต้องสลับระหว่างแดชบอร์ด WordPress และ Google Developers Console คุณควรเปิดแดชบอร์ด WordPress ทิ้งไว้ในแท็บปัจจุบันและเปิดแท็บเบราว์เซอร์ใหม่

ตอนนี้คุณสามารถเยี่ยมชมเว็บไซต์ Google Developers Console หากคุณยังไม่ได้ลงชื่อเข้าใช้ ระบบจะขอให้คุณลงชื่อเข้าใช้ด้วยบัญชี Google ของคุณ

ถัดไป คุณต้องคลิกที่ 'เลือกโครงการ' จากเมนูด้านบน จะเปิดป๊อปอัปซึ่งคุณจะต้องคลิกปุ่ม 'โครงการใหม่' เพื่อดำเนินการต่อ

Create a New Project in the Google Developers Console

ซึ่งจะเป็นการเปิดหน้าโครงการใหม่ คุณจะต้องเพิ่มชื่อโครงการและเลือกที่ตั้ง ชื่อโครงการสามารถเป็นอะไรก็ได้ที่คุณต้องการ เช่น 'Google Login'

หากคุณเข้าสู่ระบบโดยใช้บัญชี Google Workspace สถานที่นั้นจะถูกกรอกด้วยชื่อองค์กรของคุณโดยอัตโนมัติ ถ้าไม่เช่นนั้น คุณควรปล่อยให้เป็น 'ไม่มีองค์กร'

Give the Project a Name and Location

ถัดไป คลิกปุ่ม 'สร้าง' เพื่อดำเนินการต่อ

คุณจะถูกนำไปที่แดชบอร์ด 'API & Services' ในหน้านี้ คุณต้องคลิกที่ 'หน้าจอยินยอม OAuth' ในเมนูด้านซ้าย

Decide Whether Your Users Are Internal or External

ที่นี่คุณเลือกประเภทผู้ใช้ที่คุณอนุญาตให้เข้าสู่ระบบ

เลือก 'ภายใน' หากเฉพาะผู้ใช้ที่มีบัญชี Google ขององค์กรของคุณเท่านั้นที่จะเข้าสู่ระบบ หรืออีกทางเลือกหนึ่ง คุณควรเลือก 'ภายนอก' หากผู้ใช้ของคุณมีที่อยู่อีเมลภายนอกองค์กรของคุณ ตัวอย่างเช่น ใครก็ตามที่มีบัญชี @gmail.com เทียบกับที่อยู่ @yourcompanyemail.com

เมื่อคุณพร้อมที่จะดำเนินการต่อ ให้คลิกปุ่ม 'สร้าง' ตอนนี้คุณสามารถเริ่มเพิ่มข้อมูลเกี่ยวกับแอปของคุณได้แล้ว

Add Information About Your Google App

ขั้นแรก คุณควรป้อนชื่อธุรกิจของคุณในช่องชื่อแอป สิ่งนี้จะแสดงให้ผู้ใช้เห็นเมื่อเข้าสู่ระบบ เช่น 'Smith Training Services ต้องการเข้าถึงบัญชี Google ของคุณ'

คุณต้องเพิ่มที่อยู่อีเมลที่คุณลงชื่อเข้าใช้ Google ด้วย ซึ่งจะทำให้ผู้ใช้ของคุณสามารถถามคำถามเกี่ยวกับหน้าจอเข้าสู่ระบบของ Google

เคล็ดลับ: เราขอแนะนำว่าอย่าอัปโหลดโลโก้สำหรับแอปของคุณ หากคุณทำเช่นนั้น แอปของคุณจะต้องผ่านขั้นตอนการยืนยันกับทีมความน่าเชื่อถือและความปลอดภัยของ Google ขั้นตอนนี้ใช้เวลานานและอาจใช้เวลา 4-6 สัปดาห์

เมื่อเสร็จแล้ว ให้เลื่อนลงไปที่ส่วน 'โดเมนแอป' ที่นี่คุณต้องเพิ่มลิงก์ไปยังหน้าแรกของเว็บไซต์ของคุณ หน้านโยบายความเป็นส่วนตัว และหน้าข้อกำหนดในการให้บริการ

Add Links to These Important Website Pages

จากนั้น คุณต้องคลิกปุ่ม 'เพิ่มโดเมน' เพื่อเพิ่มชื่อโดเมนของเว็บไซต์ของคุณ เช่น 'example.com'

หากคุณต้องการเพิ่มการเข้าสู่ระบบ Google ด้วยคลิกเดียวในเว็บไซต์มากกว่าหนึ่งแห่ง คุณสามารถคลิกปุ่ม '+ เพิ่มโดเมน' เพื่อเพิ่มโดเมนอื่น

Add Your Website's Domain and an Email Address

สุดท้าย คุณต้องเพิ่มที่อยู่อีเมลอย่างน้อยหนึ่งรายการเพื่อให้ Google สามารถแจ้งให้คุณทราบเกี่ยวกับการเปลี่ยนแปลงในโครงการของคุณ

เมื่อดำเนินการเสร็จแล้ว อย่าลืมคลิกปุ่ม 'บันทึกและดำเนินการต่อ'

ต่อไป คุณจะเข้าสู่หน้าขอบเขตและผู้ใช้ทดสอบ สำหรับทั้งสองหน้านี้ เพียงเลื่อนลงไปด้านล่างแล้วคลิกปุ่ม 'บันทึกและดำเนินการต่อ'

Click Save and Continue on the Scopes and Test Users Pages

หน้าสุดท้ายของขั้นตอนนี้จะแสดงสรุปการตั้งค่าหน้าจอยินยอม OAuth ของคุณ

งานต่อไปคือการสร้างคีย์ที่ปลั๊กอินของคุณจะต้องเชื่อมต่อกับ Google Cloud

คุณควรคลิก 'ข้อมูลรับรอง' จากเมนูด้านซ้าย จากนั้นคลิกปุ่ม '+ สร้างข้อมูลรับรอง' ที่ด้านบนของหน้าจอ คุณต้องเลือกตัวเลือก "รหัสลูกค้า OAuth"

Click Create Credentials and Select OAuth Client ID

ซึ่งจะนำคุณไปยังหน้า 'สร้างรหัสลูกค้า OAuth'

คุณควรเลือก 'เว็บแอปพลิเคชัน' จากเมนูแบบเลื่อนลง 'ประเภทแอปพลิเคชัน'

Select Web Application for the Application Type

การตั้งค่าบางอย่างจะถูกเพิ่มลงในเพจ คุณต้องเลื่อนลงไปที่ส่วน 'URI การเปลี่ยนเส้นทางที่ได้รับอนุญาต' และคลิกปุ่ม '+ เพิ่ม URI'

ตอนนี้คุณควรป้อน URL นี้:

http://example.com/wp-login.php?loginSocial=google

ตรวจสอบว่าคุณแทนที่ example.com ด้วยที่อยู่เว็บไซต์ของคุณเอง

Paste This URL Under Authorized Redirect URIs

เมื่อคุณทำเสร็จแล้ว คุณควรคลิกปุ่ม 'สร้าง' เพื่อจัดเก็บการตั้งค่า อาจใช้เวลาห้านาทีถึงสองสามชั่วโมงเพื่อให้การตั้งค่ามีผล

สร้างไคลเอนต์ OAuth ของคุณแล้ว!

คุณจะเห็นป๊อปอัปที่มี 'รหัสลูกค้าของคุณ' และรหัสลับลูกค้าของคุณ' คุณจะต้องวางคีย์เหล่านี้ลงในหน้าการตั้งค่าของปลั๊กอินในพื้นที่ผู้ดูแลระบบ WordPress ของคุณ

คุณสามารถคลิกไอคอน 'คัดลอก' ทางด้านขวาเพื่อคัดลอกคีย์ทีละรายการ

You Will Now See Your Client ID and Client Secret

การเพิ่มคีย์ Google ของคุณในปลั๊กอินของคุณ

ตอนนี้ เพียงเปลี่ยนกลับไปที่แท็บเบราว์เซอร์ของเว็บไซต์ของคุณ และคลิกที่แท็บ 'การตั้งค่า' ใต้ การตั้งค่า » Nextend Social Login ที่นี่คุณจะเห็นช่องสำหรับรหัสไคลเอ็นต์และรหัสลับไคลเอ็นต์

คุณต้องคัดลอกคีย์จาก Google Cloud Console และวางลงในช่องเหล่านี้

Paste Your Google Client ID and Client Secret Into the Plugin's Settings

เมื่อคุณทำเสร็จแล้ว อย่าลืมคลิกปุ่ม 'บันทึกการเปลี่ยนแปลง' เพื่อจัดเก็บการตั้งค่าของคุณ

ตอนนี้ คุณจะต้องทดสอบว่าการตั้งค่าทำงานอย่างถูกต้อง นี่เป็นสิ่งสำคัญเนื่องจากคุณไม่ต้องการให้ผู้ใช้จริงพบข้อผิดพลาดเมื่อพยายามลงชื่อเข้าใช้เว็บไซต์ของคุณ

Click Verify Settings to Make Sure the Google App Is Working Correctly

เพียงคลิกปุ่ม 'ยืนยันการตั้งค่า' และปลั๊กอินจะตรวจสอบให้แน่ใจว่าแอป Google ที่คุณสร้างทำงานอย่างถูกต้อง

หากคุณทำตามขั้นตอนด้านบนอย่างถูกต้อง คุณควรเห็นการแจ้งเตือนว่า 'ใช้งานได้ดี – ปิดใช้งาน'

You Should See a Notification Saying ‘Works Fine - Disabled’

ขณะนี้คุณสามารถคลิกปุ่ม 'เปิดใช้งาน' ได้อย่างปลอดภัยเพื่อให้ผู้ใช้เข้าสู่ระบบโดยใช้ Google ID ของตน

คุณจะเห็นข้อความยืนยันว่าเปิดใช้งานการเข้าสู่ระบบ Google แล้ว

Click the ‘Enable’ Button

การเลือกรูปแบบปุ่มและป้ายกำกับของคุณ

รูปแบบปุ่มและป้ายกำกับเริ่มต้นของ Nextend นั้นค่อนข้างมาตรฐานและใช้ได้กับเว็บไซต์ส่วนใหญ่ อย่างไรก็ตาม คุณสามารถปรับแต่งได้โดยคลิกที่แท็บ 'ปุ่ม' ที่ด้านบนของหน้าจอ

ตอนนี้คุณจะเห็นรูปแบบต่างๆ ทั้งหมดที่คุณสามารถใช้เป็นปุ่มเข้าสู่ระบบโซเชียลได้ หากต้องการใช้สไตล์อื่น เพียงคลิกเพื่อเลือกปุ่มตัวเลือก

Select a Skin by Clicking Its Radio Button

เมื่อคุณทำเสร็จแล้ว คุณยังสามารถเปลี่ยนข้อความของปุ่มได้ด้วยการแก้ไขข้อความในช่อง 'ป้ายกำกับการเข้าสู่ระบบ'

หากต้องการ คุณสามารถใช้การจัดรูปแบบพื้นฐานกับป้ายกำกับการเข้าสู่ระบบโดยใช้ HTML ตัวอย่างเช่น คุณสามารถทำให้ข้อความเป็นตัวหนาโดยใช้แท็ก <b> และ </b>

You Can Customize the Button Labels and Button

คุณยังสามารถแก้ไขฟิลด์ 'ป้ายกำกับลิงก์' และ 'ป้ายกำกับการยกเลิกการเชื่อมโยง' ที่อนุญาตให้ผู้ใช้เชื่อมโยงและยกเลิกการเชื่อมโยงเว็บไซต์ของคุณกับบัญชี Google ของพวกเขา ผู้ใช้ทางเทคนิคสามารถใช้รหัส HTML สำหรับปุ่มต่างๆ เพื่อสร้างปุ่มเข้าสู่ระบบ Google ของตนเอง

ตรวจสอบให้แน่ใจว่าคุณคลิกปุ่ม 'บันทึกการเปลี่ยนแปลง' เพื่อจัดเก็บการตั้งค่าของคุณ

นำแอป Google ของคุณออกจากโหมดการทดสอบ

ตอนนี้มีสิ่งสุดท้ายที่คุณต้องทำในแท็บเบราว์เซอร์ Google Cloud คุณยังคงเห็นป๊อปอัปพร้อมรหัสไคลเอ็นต์และรหัสลับไคลเอ็นต์ของคุณ คุณสามารถปิดป๊อปอัปได้โดยคลิก 'ตกลง' ที่ด้านล่างของป๊อปอัป

ตอนนี้คุณต้องคลิก 'หน้าจอยินยอม OAuth' จากเมนูด้านซ้าย

คุณจะเห็นว่าแอป Google ของคุณอยู่ในโหมด "การทดสอบ" วิธีนี้ทำให้คุณสามารถทดสอบแอปกับผู้ใช้จำนวนจำกัดได้ ตอนนี้คุณได้รับการแจ้งเตือน 'ใช้งานได้ดี' เมื่อยืนยันการตั้งค่าด้วยปลั๊กอิน คุณสามารถย้ายไปยังโหมด 'ใช้งานจริง'

Click Publish App to Move it to In Production Mode

คุณทำได้โดยคลิกปุ่ม 'เผยแพร่แอป' ถัดไป คุณจะเห็นป๊อปอัปที่มีชื่อ 'ส่งไปยังการผลิตหรือไม่'

เพียงคลิก 'ยืนยัน' เพื่ออนุญาตให้ทุกคนใช้การเข้าสู่ระบบ Google แบบขั้นตอนเดียวบนไซต์ของคุณ

Now Click the Confirm Button

หากคุณปฏิบัติตามบทช่วยสอนนี้อย่างระมัดระวัง สถานะการยืนยันควรเป็น 'ไม่จำเป็นต้องมีการยืนยัน'

ตอนนี้แอปของคุณจะใช้งานได้กับผู้ใช้ Google ทุกคน

Your Verification Status Should Be Verification Not Required

ตอนนี้เมื่อผู้ใช้เข้าสู่ระบบเว็บไซต์ของคุณ พวกเขาจะมีตัวเลือกในการเข้าสู่ระบบด้วย Google

อย่างไรก็ตาม หากต้องการ พวกเขายังคงสามารถเข้าสู่ระบบโดยใช้ชื่อผู้ใช้และรหัสผ่านมาตรฐานของ WordPress

Google Login Preview

โปรดทราบว่าผู้ใช้สามารถลงชื่อเข้าใช้ด้วยที่อยู่บัญชี Google ที่พวกเขาใช้ในเว็บไซต์ของคุณเท่านั้น นอกจากนี้ หากคุณอนุญาตให้ผู้ใช้ลงทะเบียนบนไซต์ WordPress ของคุณ ผู้ใช้สามารถลงทะเบียนบนไซต์ของคุณได้อย่างรวดเร็วโดยใช้การเข้าสู่ระบบ Google เพียงคลิกเดียว

หากคุณต้องการเพิ่มปุ่มเข้าสู่ระบบ Google ที่อื่นๆ บนเว็บไซต์ของคุณ คุณสามารถทำได้โดยใช้รหัสย่อ คุณสามารถเรียนรู้เพิ่มเติมได้โดยคลิกที่แท็บ 'การใช้งาน' ของ Nextend

Adding a Google Login Button Using Shortcode

เราหวังว่าบทความนี้จะช่วยให้คุณเรียนรู้วิธีเพิ่มการเข้าสู่ระบบด้วยคลิกเดียวด้วย Google ใน WordPress คุณอาจต้องการเรียนรู้วิธีสร้างเว็บไซต์สมาชิก WordPress และดูรายการปลั๊กอินไดเรกทอรีธุรกิจ WordPress ที่ดีที่สุดของเรา

หากคุณชอบบทความนี้ โปรดสมัครรับข้อมูลช่อง YouTube ของเราสำหรับวิดีโอสอน WordPress คุณสามารถหาเราได้ที่ Twitter และ Facebook