Membuat Aplikasi Login Dengan Google Account

Saat ini siapa sih yang tidak punya akun google? Google sudah berhasil membuat kita selalu menggunakan produk – produknya, karena memang bermanfaat dan sangat dimudahkan. Dengan satu akun google kita sudah bisa menggunakan layanan google seperti gmail, google+, google drive, youtube, maps, adsense dan lain sebagainya.

Posting kali ini kita akan sama-sama belajar membuat aplikasi yang loginnya bisa menggunakan akun google. Dengan fitur ini tentu pengguna aplikasi kita merasa dimudahkan, karena tidak usah mendaftar – daftar lagi pada aplikasi kita, cukup menggunakan akun google yang mereka punya.

Sebelum memulai, kita pahami dulu alur sistem login menggunakan akun google ini, kira – kira seperti berikut gambarannya:

Jadi pengguna aplikasi kita melakukan login dihalaman google, jika berhasil login maka google akan mengalihkan ke url callback yang kita definisikan, disertakan pula code yang akan digunakan untuk mendapatkan token. Dengan token maka aplikasi kita bisa mendapatkan profil pengguna seperti alamat email, nama depan, nama belakang, jenis kelamin dan lain-lain kecuali password ya.

Sebenarnya tanpa profile pengguna seperti alamat email, nama, jenis kelamin dll, Aplikasi kita sudah bisa mengidentifikasi bahwa ada pengguna yang login menggunakan akun googlenya dan kita buat session untuk mereka, namun untuk kepentingan kelengkapan profil biasanya kita membutuhkan nama dan alamat email saja.

Sekarang yuk sama – sama kita mulai praktikkan projek kita kali ini tentang membuat aplikasi login dengan akun google.

Setting Google API Console

Langkah pertama, kita harus membuat projek di google API console untuk mendapatkan OAuth 2.0 client IDs, caranya:

• Akses API Console https://console.developers.google.com
• Menuju ke menu Credentials kemudian ciptakan projek baru:
  
  Sebagai contoh nama projeknya DokumenAry, kemudian pilih create:
  
• Menuju ke tab OAuth consent screen, kemudian atur profile aplikasi, contoh:
  
  Kemudian simpan.
• Menuju ke tab Credentials, kemudian Create Credentials pilih Oauth Client ID:
  
  

  Kemudian pilih Create maka kita sudah berhasil membuat OAuth 2.0 client ID
  

  Pada isian Authorized redirect URLs saya isikan http://localhost/login_google/auth.php ini karena kita selanjutnya akan membuat projek dilocalhost kita dengan nama folder login_google.

• Aktifkan Google+ API, supaya aplikasi kita bisa mendapatkan profil pengguna
  
  

Memulai Menggunakan Google APIs Client Library for PHP

Google sudah menyediakan library php yang bisa kita gunakan untuk projek kita ini, jadi kita tinggal pakai saja. Pastikan versi php Anda minimal 5.4.

1. Buat folder didalam htdocs, pada contoh kali ini saya beri nama login_google.
2. Download file composer.phar di https://getcomposer.org/download/, pilih manual download saja atau langsung ke https://getcomposer.org/download/1.2.2/composer.phar dan letakkan file composer.phar pada folder login_google.

   Penjelasan Singkat Tentang Composer:
   Composer merupakan dependency management yang sekarang umum digunakan para programmer PHP dalam membangun aplikasi. Fungsi composer adalah kita dapat dengan mudah mendapatkan paket – paket library php yang kita butuhkan dalam projek kita dan sumbernya terpecaya. Untuk melihat paket – paket yang ada bisa melihatnya di https://packagist.org/.

3. Buka Terminal untuk pengguna mac & linux, untuk windows buka CMD. Kemudian masuk ke folder htdocs/login_google, kemudian jalankan perintah berikut:
   Mac & Linux : php composer.phar require google/apiclient:^2.0
   Windows : ..\..\..\php\php.exe composer.phar require google/apiclient:^2.0
   Setelah dijalankan, maka akan ada folder verdor:
   

4. Kembali ke API Console, kemudian download Auth client IDs:
   
   Simpan di dalam folder login_google, kemudian rename menjadi client_secret.json

5. Buat file baru bernama index.php sejajar dengan folder vendor, dan berikut isinya:

   <?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']['url']}\">";
     echo "<h3>Hai, {$profile['displayName']} ({$profile['emails']['0']['value']})</h3>";
     echo "Anda telah berhasil login menggunakan akun google anda, klik <a href='logout.php'>Logout</a> untuk keluar.";
   } else {
     echo "<a href='auth.php'>Login dengan Akun Google</a>";
   }
   

6. Buat file baru bernama auth.php sejajar dengan folder vendor, dan berikut isinya:

   <?php
   require_once __DIR__.'/vendor/autoload.php';
    
   session_start();
    
   $client = new Google_Client();
   $client->setAuthConfigFile('client_secret.json');
   $client->setRedirectUri("http://localhost/login_google/auth.php");
   $client->setScopes(array(
       "https://www.googleapis.com/auth/userinfo.email",
       "https://www.googleapis.com/auth/userinfo.profile",
       "https://www.googleapis.com/auth/plus.me"
   ));
    
   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 {
         // profile
         $plus = new Google_Service_Plus($client);
         $_SESSION['access_profile'] = $plus->people->get("me");
     } catch (\Exception $e) {
         echo $e->__toString();
   
         $_SESSION['access_token'] = "";
         die;
     }
    
     header('Location:index.php');
   }
   

7. Terahir buat file lagi bernama logout.php, dan berikut kodenya:

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

   Saat logout kita akan mengosongkan variabel $_SESSION[‘access_token’] & $_SESSION[‘access_profile’]

Test Aplikasi

Saatnya testing aplikasi, sekarang coba akses http://localhost/login_google, kemudian klik link Login dengan Akun Google maka akan diarahkan kehalaman login akun google, kemudian akan dijumpai halaman seperti berikut:

Klik Allow, maka akan diredirect kembali ke halaman aplikasi kita, dan profil sudah didapatkan:

Video Tutorial

Download FIle

Teman – teman bisa mendownload file contohnya di SINI.

Ok sekian totorial kali ini, selamat mencoba.
Sekali lagi semoga tutorial ini bisa memberikan pencerahan buat teman – teman semua.

Terimakasih 🙂

Category: Uncategorized

Tags: aplikasi login, aplikasi login dengan akun gmail, aplikasi login dengan google account, composer