Membuat Login Website Menggunakan Akun Google

Membuat Login Website Menggunakan Akun Google - Selamat malam paman pengguna blogger kali ini ardpratama akan share cara Membuat Login Website Menggunakan Akun Google menggunakan php. Terkadang kita menjumpai website yang memiliki fitur login yang menggunakan authentikasi google untuk login ke website terebut. Nah bagaimana membuatnya? semoga tutorial ini membantu teman-teman.

Pada praktek kali ini saya menggunakan windows 8 dengan aplikasi xampp sebagai bundling web server. Sediakan aplikasi composer untuk mendapatkan library google/apiclient nantinya. Kemudian saya juga menyiapkan satu domain goodpanda.id yang saya pointing ke 127.0.0.1 atau localhost (karena saya ga punya domain web aktif).

Langkah 1. Membuat Project di htdocs

Composer inisialisasi

$ composer init

Klik next next saja sampai selesai sambil dimasukan data yang valid :v

Membuat Login Website Menggunakan Akun Google

Add library google/apiclient

$ php composer.phar require google/apiclient:^2.0

Maka akan muncul folder vendor di project kita.

Langkah 2. Membuat Project di Google API Console

Kunjungi Google API Console, kemudian cari tombol untuk membuat project baru

Membuat project baru yang akan kita gunakan untuk autentikasi, masukan nama project bebas. Kemudian klik buat

Setelah itu beralih ke menu Kredensial, kemudian pilih buat kredensial dengan menggunakan Client ID OAuth

Ketika menambahkan kredensial OAuth masukan url yang digunakan untuk auth nantinya pada URI pengalihan yang diotorisasi

Kemudian download secret dari OAuth dengan menekan tombol download seperti pada gambar di bawah ini. Simpan baik baik file tersebut dan beri nama client_secret.json lalu letakan sejajar dengan folder vendor.

Langkah 3. Membuat File PHP

Membuat file index.php dan letakan sejajar dengan folder vendor

<?php
require_once __DIR__.'/vendor/autoload.php';
session_start();
if (isset($_SESSION['access_token']) && $_SESSION['access_token']) {
   $profile = $_SESSION['access_profile'];
   echo "<img src='".$profile['image']."' width='200px'/><br>";
   echo "Selamat datang <b>".$profile['displayName']."(".$profile['emails'].")</b>, Anda telah berhasil login hotspot menggunakan akun google anda, ";
 } 
 else 
 {
 echo "<center>
 <h1>Selamat datang di login page with google auth</h1>
 <a href='auth.php'>Login Website</a>
 ";
 }
?>

Membuat file auth.php dan letakan sejajar dengan folder vendor

<?php
require_once __DIR__.'/vendor/autoload.php';
session_start();
$client = new Google_Client();
$client->setApplicationName("Client_Library_Examples");
$client->setAuthConfigFile('client_secret.json');
$client->setRedirectUri("http://goodpanda.id/google_auth/auth.php");
$client->setScopes(array(
 "profile",
 "email",
));
if (!isset($_GET['code'])) {
  $auth_url = $client->createAuthUrl();
  header('Location: ' . filter_var($auth_url, FILTER_SANITIZE_URL));
} else {
  $client->authenticate($_GET['code']);
  $_SESSION['access_token'] = $client->getAccessToken();
  try {
     
 $google_svc = new Google_Service_Oauth2($client);
 $data = $google_svc->userinfo->get();
 $user_name  = filter_var($data['name'], FILTER_SANITIZE_SPECIAL_CHARS);
 $email     = filter_var($data['email'], FILTER_SANITIZE_EMAIL);
 $profile_image_url    = filter_var($data['picture'], FILTER_VALIDATE_URL);
 $_SESSION['access_profile']['image'] = $profile_image_url;
 $_SESSION['access_profile']['displayName'] = $user_name;
 $_SESSION['access_profile']['emails'] = $email;
  } catch (\Exception $e) {
      echo $e->__toString();
 
      $_SESSION['access_token'] = "";
      die;
  }
 header('Location:index.php');
}
?>

Membuat file logout.php dan letakan sejajar dengan folder vendor

<?php 
session_start();
 
$_SESSION['access_token'] = "";
$_SESSION['access_profile'] = "";
 
header('location:index.php');
?>

Jadi folder kita berisi seperti ini.

Saatnya untuk demo time

Demikian tutorial kali ini tentang Membuat Login Website Menggunakan Akun Google, semoga bermanfaat. oh iya untuk file logout.php saya lupa untuk mencantumkan di index untuk pemanggilanya. Temen temen bisa menambahkan di index atau dimanapun sesuai kreasi.

Terima kasih
ardpratama

src:
https://www.dokumenary.net/2016/12/01/membuat-aplikasi-login-dengan-google-account/
https://www.dumetschool.com/blog/login-melalui-akun-google-menggunakan-php

Blog Article