Cara Mengaktifkan Login Google Sekali Klik Di WordPress

Diterbitkan: 2023-03-20

Saat pengguna Anda dapat masuk menggunakan akun Google mereka, mereka tidak perlu membuat, mengingat, atau memantau nama pengguna dan sandi lain untuk mengakses situs web Anda. Waktu mereka dihemat, dan tingkat konversi Anda meningkat. Dalam tutorial ini, kami akan menunjukkan cara mengintegrasikan login Google sekali klik ke WordPress.

Mengapa Memasukkan Google Login di WordPress?

Banyak pengguna online terus menggunakan akun Google mereka. Ini memungkinkan mereka mengakses produk Google dengan cepat seperti Gmail, Drive, dan Dokumen tanpa harus masuk secara terpisah untuk masing-masing produk.

Saat Anda mengaktifkan login Google sekali klik di halaman login WordPress Anda, pengguna Anda akan dapat melakukan hal yang sama di situs web Anda. Pengguna dapat menghemat waktu dengan masuk dengan cepat menggunakan akun Google mereka. Ini menghilangkan kebutuhan pengguna untuk memasukkan detail login mereka setiap saat.

Jika Anda hanya memiliki blog WordPress dasar, Anda mungkin tidak menemukan fungsi ini berguna. Namun, jika perusahaan Anda menggunakan Google Workspace untuk alamat email bisnis profesional, anggota tim Anda dapat login menggunakan akun aplikasi Google perusahaan Anda.

Opsi sistem masuk tunggal, seperti login Google sekali klik, juga sangat berguna untuk situs web apa pun yang mengharuskan pengguna untuk masuk, seperti situs web multi-penulis, situs web keanggotaan, dan situs web yang menjual kursus online. Karena itu, mari kita lihat cara mengintegrasikan login sekali klik Google ke situs web WordPress Anda.

Bagaimana cara mengaktifkan login Google sekali klik di WordPress?

Pertama, unduh dan instal plugin Nextend Social Login and Registration. Silakan kunjungi panduan pemula kami untuk memasang plugin WordPress untuk informasi tambahan.

Untuk pelajaran ini, kami akan menggunakan plugin gratis yang memungkinkan login Google, Twitter, dan Facebook. Login Sosial Nextend juga memiliki versi komersial yang menambahkan login sosial ke berbagai situs web, termasuk PayPal, Slack, dan TikTok.

Buka Pengaturan »Login Sosial Nextend di area admin WordPress setelah aktivasi. Layar ini menampilkan banyak opsi login sosial yang tersedia.

One-Click Google Login plugin

Klik tombol 'Memulai' di bawah logo Google untuk menambahkan login Google ke situs web WordPress Anda. Langkah pertama Anda, seperti yang Anda lihat, adalah mengembangkan aplikasi Google. Jangan terintimidasi oleh prospek membuat aplikasi Google.

One-Click Google Login app

Anda tidak perlu mengetahui kode apa pun, dan kami akan memandu Anda melalui seluruh proses.

Mengembangkan Aplikasi Google

Anda harus beralih antara dasbor WordPress dan Google Developers Console untuk membuat aplikasi ini. Sebaiknya biarkan dasbor WordPress Anda terbuka di tab browser saat ini sambil membuka yang baru.

Anda sekarang dapat mengakses halaman Google Developers Console. Jika Anda belum masuk, Anda akan diminta untuk melakukannya menggunakan akun Google Anda.

Langkah selanjutnya adalah memilih proyek dari menu paling atas. Untuk melanjutkan, popup akan muncul, dan Anda harus mengklik tombol 'Buat Proyek'.

new project

Ini akan mengarahkan Anda ke halaman untuk proyek baru. Anda harus memasukkan nama proyek dan memilih lokasi. Nama proyek bisa apa saja yang Anda suka, misalnya, 'Login Google'.

Jika Anda login dengan akun Google Workspace, lokasi akan otomatis diisi dengan nama organisasi Anda. Jika tidak, biarkan saja sebagai 'Tidak ada organisasi.'

cloud google

Untuk melanjutkan, klik tombol 'Buat'. Anda akan dibawa ke 'dasbor API & Layanan sekarang. Di halaman ini, pilih 'Layar persetujuan OAuth' dari opsi kiri.

consent screen

Anda memilih tipe orang yang ingin Anda aktifkan untuk masuk di sini.

Pilih 'Internal' jika hanya orang dengan akun Google perusahaan Anda yang dapat masuk. Jika pengguna Anda memiliki alamat email di luar organisasi Anda, Anda harus memilih 'Eksternal'. Seseorang memiliki akun @gmail.com, misalnya, berlawanan dengan alamat @perusahaanmailanda.com.

Saat Anda siap untuk melanjutkan, klik tombol "Buat". Sekarang Anda dapat mulai menambahkan informasi tentang aplikasi Anda.

app registration

Pertama, masukkan nama perusahaan Anda di area nama aplikasi. Saat masuk, pengguna akan melihat sesuatu seperti, 'Smith Training Services meminta akses ke akun Google Anda.'

Anda juga harus memasukkan alamat email yang Anda gunakan untuk masuk ke Google. Ini memungkinkan pengguna Anda untuk bertanya tentang layar masuk Google.

Setelah itu, gulir ke bawah ke area 'Domain aplikasi'. Tambahkan tautan ke beranda situs web Anda, halaman kebijakan privasi, dan halaman persyaratan layanan di sini.

app domain

Kemudian, klik opsi 'Tambahkan Domain' untuk memasukkan nama domain untuk situs web Anda, seperti 'contoh.com.' Jika Anda ingin menambahkan login Google sekali klik ke lebih dari satu situs web, Anda dapat melakukannya dengan mengeklik opsi '+ Tambahkan Domain'.

app registration

Terakhir, Anda harus memasukkan satu atau beberapa alamat email agar Google dapat terus mengabari Anda tentang setiap perubahan pada proyek Anda. Setelah Anda menyelesaikannya, klik opsi 'Simpan dan Lanjutkan'.

Anda kemudian akan dibawa ke halaman Lingkup dan Pengguna Uji. Cukup gulir ke bagian bawah kedua halaman ini dan klik opsi 'Simpan dan Lanjutkan'.

scopes

Halaman terakhir langkah ini akan menawarkan ringkasan pengaturan layar persetujuan OAuth Anda. Langkah selanjutnya adalah membuat kunci yang diperlukan oleh plugin Anda untuk terhubung ke Google Cloud. Dari menu sebelah kiri, pilih 'Credentials', lalu klik opsi '+ Generate Credentials' di bagian atas layar. Anda harus memilih opsi 'ID klien OAuth'.

API keys One-Click Google Login

Tindakan ini akan mengarahkan Anda ke halaman 'Buat ID klien OAuth'. Pilih 'Aplikasi web' dari menu tarik-turun 'Jenis aplikasi'.

Client ID

Situs web akan diperbarui dengan beberapa pengaturan. Turun ke area berjudul 'Authorized redirect URIs' dan klik tombol '+ Add URI'.

Sekarang masukkan URL berikut:

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

Berhati-hatilah untuk mengubah contoh.com dengan alamat situs web Anda sendiri.

Client URI

Setelah itu, Anda harus mengklik tombol 'Buat' untuk menyimpan opsi. Diperlukan waktu mulai dari lima menit hingga berjam-jam agar penyesuaian diterapkan.

Klien OAuth Anda telah berhasil dibuat!

Sebuah jendela akan muncul dengan 'ID Klien Anda' dan 'Rahasia Klien Anda.' Kunci ini harus disalin dan ditempelkan ke halaman pengaturan plugin di area admin WordPress Anda.

Cukup klik ikon "salin" di sebelah kanan untuk menyalin setiap kunci satu per satu.

client created

Termasuk Google Keys di Plugin Anda

Sekarang kembali ke tab browser situs web Anda dan pilih tab 'Pengaturan' dari menu Pengaturan » Login Sosial Nextend . Ada kolom untuk ID Klien dan Rahasia Klien di sini.

Anda harus menyalin dan menempelkan kunci Anda dari Google Cloud Console ke area ini.

Including Google Keys in Your Plugin

Setelah itu, pastikan Anda mengklik tombol 'Simpan Perubahan untuk menyimpan pengaturan Anda.

Anda sekarang harus memvalidasi bahwa pengaturan sudah benar. Ini penting karena Anda tidak ingin pengguna asli mengalami kesulitan saat mencoba masuk ke situs web Anda.

Save Changes button

Cukup klik tombol 'Verifikasi Setelan', dan plugin akan memastikan bahwa Google app yang Anda buat dapat beroperasi.

Jika Anda melakukan instruksi sebelumnya dengan benar, Anda akan melihat pesan yang menyatakan 'Berfungsi OK – Dinonaktifkan.'

you should see a message

Sekarang Anda dapat mengeklik tombol 'Aktifkan' dengan percaya diri untuk memungkinkan orang melapor masuk dengan ID Google mereka.

Pemberitahuan akan muncul memverifikasi bahwa login Google sekarang diaktifkan.

Memilih Gaya Tombol dan Pelabelan

Gaya dan label tombol default di Nextend cukup konvensional dan akan berfungsi untuk sebagian besar situs web. Namun, Anda dapat mengubahnya dengan membuka opsi 'Tombol' di bagian atas layar.

Anda sekarang akan melihat semua gaya yang tersedia untuk tombol login sosial. Untuk menggunakan gaya yang berbeda, cukup pilih tombol radionya.

Choosing a Button Style

Setelah itu, Anda dapat mengubah kata-kata tombol dengan mengubah konten di kolom 'Login label'.

Jika mau, Anda dapat menggunakan HTML untuk menambahkan beberapa pemformatan dasar ke label login. Misalnya, tag <b> dan </b> dapat digunakan untuk membuat teks menjadi tebal.

Choosing Labeling

Anda juga dapat mengubah opsi 'Hubungkan label' dan 'Batalkan tautan label', yang memungkinkan orang menghubungkan dan memutuskan akun Google mereka dari situs web Anda. Pengguna teknis dapat membuat tombol login Google mereka sendiri dengan menggunakan kode HTML untuk tombol.

Untuk menyimpan pengaturan Anda, pastikan Anda mengklik opsi 'Simpan Perubahan'.

Menghapus Aplikasi Google Anda dari Mode Pengujian

Kembali ke tab browser Google Cloud, ada satu hal lagi yang harus Anda lakukan. Munculan yang berisi ID klien dan rahasia klien Anda harus tetap terlihat. Anda dapat menutup popup dengan mengklik tombol 'OK' di bagian bawah.

Anda sekarang harus memilih 'Layar persetujuan OAuth' dari menu sebelah kiri.

Aplikasi Google Anda dalam mode 'Pengujian', seperti yang Anda lihat. Ini memungkinkan Anda untuk menguji aplikasi Anda dengan sekelompok kecil orang. Anda sekarang dapat memindahkannya ke mode 'Produksi' setelah menerima sinyal 'Berfungsi OK' setelah memvalidasi pengaturan menggunakan plugin.

testing

Anda melakukannya dengan mengklik tombol 'Publikasikan Aplikasi'. Setelah itu, Anda akan menerima popup dengan judul 'Push to production?'

Cukup klik 'Konfirmasi' untuk mengizinkan semua orang menggunakan login Google satu langkah di situs Anda.

push to production

Jika Anda mengikuti petunjuk ini dengan saksama, Status Verifikasi sekarang seharusnya menjadi 'Verifikasi tidak diperlukan.'

Aplikasi Anda sekarang dapat diakses oleh semua pengguna Google.

verification status

Saat pengguna bergabung dengan situs web Anda, mereka sekarang memiliki opsi untuk menggunakan Google.

Namun, mereka dapat terus masuk menggunakan nama pengguna dan kata sandi WordPress yang biasa jika mereka mau.

WordPress login with Google

Ingatlah bahwa orang hanya dapat masuk menggunakan alamat akun Google yang mereka gunakan di situs web Anda. Selain itu, jika Anda telah mengaktifkan pendaftaran pengguna di situs WordPress Anda, orang dapat langsung mendaftar menggunakan login Google sekali klik.

Jika Anda ingin menempatkan tombol masuk Google di tempat lain di situs web Anda, Anda dapat melakukannya dengan kode pendek. Anda dapat mengetahui lebih lanjut dengan membuka tab 'Penggunaan' Nextend.

googleloginshortcode

Membungkus

Mengintegrasikan login Google sekali klik ke situs web WordPress Anda dapat menghemat waktu pengguna dan meningkatkan rasio konversi. Ini sangat berguna untuk situs web yang mengharuskan pengguna untuk masuk, seperti situs web multi-penulis, situs web keanggotaan, dan situs web yang menjual kursus online. Untuk mengaktifkan fitur ini, Anda perlu mengunduh dan menginstal plugin Nextend Social Login and Registration dan membuat aplikasi Google dengan mengikuti langkah-langkah yang diuraikan dalam tutorial ini. Dengan fitur login Google sekali klik, pengguna dapat login dengan cepat menggunakan akun Google mereka tanpa perlu memasukkan detail login mereka setiap saat.