Tutorial Cara Membuat Fitur Login Google Dengan PHP

Mungkin kamu pernah melihat atau bahkan menggunakannya ketika mengunjungi website tertentu, denga...
Penulis
Admin
Kategori
Tutorial
Estimasi
4 menit baca
Dilihat
442
Posting
22 Aug 2022
Tutorial Cara Membuat Fitur Login Google Dengan PHP Mungkin kamu pernah melihat atau bahkan menggunakannya ketika mengunjungi website tertentu, dengan adanya fitur Google Login ini akan membantu sekali user untuk registrasi dengan cepat. Tutorial Cara Membuat Fitur Login Google Dengan PHP
2022-11-25

Seiring berkembangnya website dari berbagai macam fitur yang disediakan, kita dapat mengunakan beberapa library yang disediakan oleh berbagai vendor untuk memudahkan pemilik website dan pengguna website itu sendiri salah satunya adalah Google Login, mungkin kamu pernah melihat atau bahkan menggunakannya ketika mengunjungi website tertentu, dengan adanya fitur Google Login ini akan membantu sekali user untuk registrasi dengan cepat. Jika kamu sedang mencari bagaimana cara membuat website dengan Google login, kamu berada diartikel yang tepat, karena saat ini kita akan memberikan sebuah cara atau tutorial sederhana bagaimana cara untuk menggunakan Google Login dengan PHP.

Sebelum melanjutkan kedalam intinya, kamu perlu melakukan beberapa hal terlebih dahulu yaitu membuat token credential atau API Key dari Google untuk mengintegrasikan server Google dengan website kamu, hal ini dilakukan untuk memastikan apakah permintaan data user adalah memang benar dari website kamu yaitu dengan mencocokkan token dari API Key yang nantinya akan digunakan.

 

Tutorial Cara Mudah Membuat Fitur Login Akun Google Dengan PHP

 

 

Membuat Credentials/Google API Key

  • Langkah pertama masuk kedalam console google.
  • Pilih select project lalu pilih create a new project dipojok kanan atas.
  • Silahkan isi nama project lalu pilih tombol create.
  • Pilih library pada sidebar, lalu cari Google+ API, setelah itu enable.
  • Setelah library selesai tercreate, pilih create credentials lalu pilih OAuth Client ID, pilih web application, isi nama app dan authorized redirect URIs, pada bagian authorized redirect URIs isi dengan URL Endpoint. yang nantinya akan memproses data yang dikembalikan oleh Google, disini kita mengisi http://localhost/google_login yaitu bagian index pada project yang dibuat.
  • Setelah proses pengisian form selesai, maka akan tampil modal yang akan menampilkan client id dan client secret, copy kedua token tersebut kedalam notepad.

Bagian penting yang dibutuhkan untuk mengkonfigurasi dalam bagian config.php nantinya yaitu client id, client secret dan redirect URI.

 

Menginstall library Google Client

Setelah proses mendapatkan client id dan client secret sudah berhasil, langkah selanjutnya adalah menginstall library yang kita butuhkan kedalam project kita, disini kita akan menginstall Google Client. Buat folder baru project Google login kita, buka text editor seperti VScode, import folder project yang sudah tadi kita buat, setelah folder project sudah masuk kedalam VScode, saatnya menginstall library dari google client, buka terminal didalam VS code, lalu masukan perintah didalam terminal:

composer require google/apiclient

Tunggu hingga proses installasi selesai setelah itu buat file baru bernama index.php, config.php, dan logout.php, kira-kira struktur dari isi foldernya seperti ini:

Folder Project
|__vendor
|__index.php
|__config.php
|__logout.php

Untuk menampilkan tombol dari google login, kita buat file yang bernama index.php, didalam file ini nantinya kita akan menampilkan tombol dari Google login untuk mengarahkan kedalam Google OAuth modal, dan semua data user jika sudah berhasil terverifikasi akan ditampilkan didalam halaman ini, file config.php digunakan untuk menyimpan semua credentials seperti client id, client secret dan redirect uri dan logout untuk membersihkan semua session dan mereset ulang access token dari server google.

 

1. Membuat file index.php

Setelah mengetahui semua fungsi dari masing-masing file yang dibutuhkan, hal pertama yang dilakukan adalah menampilkan tombol dari Google login yang nantinya akan diarahkan kedalam modal Google OAuth, kamu bisa isi dari file index.php seperti dibawah ini:

<?php

// Panggil file config
require_once 'config.php';

if (isset($_GET['code']))
{
    $token = $client->fetchAccessTokenWithAuthCode($_GET['code']);
    $client->setAccessToken($token['access_token']);
    $_SESSION['token'] = $token['access_token'];

    // Verifikasi setelah proses token sudah selesai
    $google_oauth = new Google_Service_Oauth2($client);
    $google_account_info = $google_oauth->userinfo->get();

    // Mendapatkan info dari user yang melakukan login melalui google
    $userdata = array();
    $userdata['google_id'] = $google_account_info->id;
    $userdata['email'] = $google_account_info->email;
    $userdata['name'] = $google_account_info->name;
    $userdata['picture'] = $google_account_info->picture;
    $userdata['locale'] = $google_account_info->locale;
    $userdata['gender'] = $google_account_info->gender;
    $userdata['oauth_provider'] = 'google';

    // Menyimpan semua data user kedalam session
    $_SESSION['userData'] = $userdata;

    // redirect ke homepage jika berhasil
    header("Location: index.php");
}
else
{
    // Get login url
    $authUrl = $client->createAuthUrl();

    // Render google login button
    $output = '<a href="'.filter_var($authUrl, FILTER_SANITIZE_URL).'"><img src="images/google-sign-in-btn.png" alt=""/>Sign in with google</a>'; 
}
?>

<!-- Menampilkan data dari user -->
<div class="container">
    <?php
    if(!empty($_SESSION['userData']))
    {
        $userdata = $_SESSION['userData'];

        $output = '<h2>Google Account Details</h2>';
        $output .= '<div class="ac-data">';
        $output .= '<img src="'.$userdata['picture'].'">';
        $output .= '<p><b>Google ID:</b> '.$userdata['google_id'].'</p>';
        $output .= '<p><b>Name:</b> '.$userdata['name'].'</p>';
        $output .= '<p><b>Email:</b> '.$userdata['email'].'</p>';
        $output .= '<p><b>Gender:</b> '.$userdata['gender'].'</p>';
        $output .= '<p><b>Locale:</b> '.$userdata['locale'].'</p>';
        $output .= '<p><b>Logged in with:</b> '.$userdata['oauth_provider'].'</p>';
        $output .= '<p>Logout from <a href="logout.php">Logout</a></p>';
        $output .= '</div>';
    }
    else {
        $output = $output;
    }
    echo $output;
    ?>
</div>

Kamu juga bisa memodifikasi dari semua file ini agar lebih menarik, disini kita mencontohkan dasarnya saja yang berfokus pada fungsi Google login itu sendiri.

 

2. Mengkonfigurasi file config.php

Setelah file index.php sudah diisi dengan sempurna, langkah selanjutnya adalah membuat file config.php, yang berfungsi untuk menyimpan seluruh bagian credentials dari aplikasi kamu seperti client id, client secret dan redirect uri, untuk masing-masing bagian tersebut kamu bisa sesuaikan ya. Isi dari file config.php adalah:

<?php

// Google API konfigurasi
define('GOOGLE_CLIENT_ID', 'ISI-CLIENT-ID-KAMU');
define('GOOGLE_CLIENT_SECRET', 'ISI-CLIENT-SECRET-KAMU');
define('GOOGLE_REDIRECT_URL', 'ISI-AUTHORIZED-REDIRECT-URI');

// Memulai session
if(!session_id())
{
    session_start();
}

// Memanggil library
require_once 'vendor/autoload.php';

// Memanggil Google Client API
$client = new Google_Client();
$client->setClientId(GOOGLE_CLIENT_ID);
$client->setClientSecret(GOOGLE_CLIENT_SECRET);
$client->setRedirectUri(GOOGLE_REDIRECT_URL);
$client->addScope("email");
$client->addScope("profile");

Setelah selesai bisa klik save dan lanjut kepada bagian terakhir yaitu fitur logout.

 

3. Membuat Logout

Pada bagian terakhir, file ini akan mereset keseluruhan dari session dan access token yang didapatkan dari server Google, kamu bisa isi dari file logout.php seperti dibawah ini:

<?php

// Import file config
require_once 'config.php';

// Reset access token
$client->revokeToken($_SESSION['token']);

// Hapus userdata dan token dari session
unset($_SESSION['token']);
unset($_SESSION['userData']);

// Hapus semua session yang ada
session_destroy();

// Redirect ke homepage
header("Location:index.php");

Hasil akhirnya seperti gambar dibawah ini:

hasil akhir google login dengan menggunakan PHP


Dan akhirnya sistem login menggunakan Google login sudah selesai dengan sempurna, sebenarnya sistem dari Google login ini cukup sederhana, kita sebagai client yang menggunakan libary dari Google, meminta akses kepada Google untuk mendapatkan info dari user ketika melakukan registrasi, perbedaan yang menonjol dibandingkan user registrasi secara manual adalah user tidak perlu menginput data seperti nama, email, password ketika menggunakan aplikasi kalian, hal ini tentu akan mempermudah user ketika ingin membuat akun didalam aplikasi kamu.

Kamu juga bisa menkombinasikannya dengan database, jadi ketika user sudah selesai melakukan login dengan menggunakan Google login, semua data yang didapatkan dari server Google dapat kamu simpan kedalam database. Dan ketika user melakukan login kembali kedalam aplikasi kamu, semua data sudah berada didalam database dan fungsi dari Google login ini hanya untuk mencocokkan email saja, dan mengupdate beberapa elemen lainnya seperti avatar.

 

Penutup

Google login merupakan salah satu alternatif yang bisa kamu gunakan untuk melakukan register dan login kepada user agar lebih mudah, dan penggunaannya pun terbilang cukup mudah karena sudah terdapat library yang disediakan, untuk mengintegrasikan Google login ini kamu bisa kombinasikan dengan berbagai macam hal seperti database yang sangat berguna untuk menyimpan semua data user. Jika kamu mencari bagaimana cara untuk mengintegrasikan Google login dengan website, artikel yang sederhana ini mungkin akan membantu kamu dalam menyelesaikan project yang sedang dikerjakan.
 

Share