ardpratama

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<b>Membuat Login Website Menggunakan Akun Google - </b>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.<br />
<br />
Pada praktek kali ini saya menggunakan windows 8 dengan aplikasi xampp sebagai bundling web server. Sediakan aplikasi <b>composer</b> untuk mendapatkan library google/apiclient nantinya. Kemudian saya juga menyiapkan satu <b>domain goodpanda.id</b> yang saya pointing ke 127.0.0.1 atau localhost (karena saya ga punya domain web aktif).<br />
<h4 style="text-align: left;">
Langkah 1. Membuat Project di htdocs</h4>
<br />
Composer inisialisasi<br />
<pre class="code highlight" lang="plaintext"><i style="font-family: "courier new", courier, monospace;">$ composer init</i></pre>
<br />
<div class="separator" style="clear: both;">
Klik next next saja sampai selesai sambil dimasukan data yang valid :v</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe0VsKlavas1LYQOTJIN-skYesWccCOVn1GL7uT0MDwcsDkfArlxQKmbA8aLA2m2Hq32JJkIIw69paukoHYGJLWqYPykBivPJ3HNe1vJCZUNBSnvPWXZlJ0coishv36cnDPbAvuM6TYDE_/s1600/Membuat+Login+Website+Menggunakan+Akun+Google+-+ardpratama+5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Login Website Menggunakan Akun Google" border="0" data-original-height="128" data-original-width="570" height="88" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe0VsKlavas1LYQOTJIN-skYesWccCOVn1GL7uT0MDwcsDkfArlxQKmbA8aLA2m2Hq32JJkIIw69paukoHYGJLWqYPykBivPJ3HNe1vJCZUNBSnvPWXZlJ0coishv36cnDPbAvuM6TYDE_/s400/Membuat+Login+Website+Menggunakan+Akun+Google+-+ardpratama+5.png" title="Membuat Login Website Menggunakan Akun Google" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Add library google/apiclient</div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<pre class="code highlight" lang="plaintext"><i style="font-family: "courier new", courier, monospace;">$ php composer.phar require google/apiclient:^2.0</i></pre>
Maka akan muncul folder vendor di project kita.<br />
<br />
<h4 style="text-align: left;">
Langkah 2. Membuat Project di Google API Console</h4>
<br />
<div class="separator" style="clear: both;">
Kunjungi <b><a href="https://console.developers.google.com/" rel="nofollow" target="_blank">Google API Console</a>, </b>kemudian cari tombol untuk membuat <b>project </b>baru</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHACbHpnCWVzmYU3EQh8feFcW6YFKuqOimwKxm9m95Jcioa0Gzn1nRoiA4hB5bC1XG_FFz_ofsOrBum2ROSXthZBbw9EgUTJQ3d5RHo2zIYIayXT2IK20WIkZBt4zNOtG0FNYnTPATFjDI/s1600/Membuat+Login+Website+Menggunakan+Akun+Google+-+ardpratama+0.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Login Website Menggunakan Akun Google" border="0" data-original-height="267" data-original-width="756" height="141" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHACbHpnCWVzmYU3EQh8feFcW6YFKuqOimwKxm9m95Jcioa0Gzn1nRoiA4hB5bC1XG_FFz_ofsOrBum2ROSXthZBbw9EgUTJQ3d5RHo2zIYIayXT2IK20WIkZBt4zNOtG0FNYnTPATFjDI/s400/Membuat+Login+Website+Menggunakan+Akun+Google+-+ardpratama+0.png" title="Membuat Login Website Menggunakan Akun Google" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Membuat project baru yang akan kita gunakan untuk autentikasi, masukan nama project bebas. Kemudian klik buat</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKHRfVqGPppLl9KGH95zDGujUkfFcwwttVPi58gxK8ulZPhKj5YoP_eYV0erbgfo7YTwRqSxSF9SBqPrhtGKI1ALpy8ZZRFkdt6JQx_q4oQD_ZjHDCfXIvd461n2JfPkgWeUr7Sb6AAAkS/s1600/Membuat+Login+Website+Menggunakan+Akun+Google+-+ardpratama+1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Login Website Menggunakan Akun Google" border="0" data-original-height="396" data-original-width="538" height="293" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKHRfVqGPppLl9KGH95zDGujUkfFcwwttVPi58gxK8ulZPhKj5YoP_eYV0erbgfo7YTwRqSxSF9SBqPrhtGKI1ALpy8ZZRFkdt6JQx_q4oQD_ZjHDCfXIvd461n2JfPkgWeUr7Sb6AAAkS/s400/Membuat+Login+Website+Menggunakan+Akun+Google+-+ardpratama+1.png" title="Membuat Login Website Menggunakan Akun Google" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Setelah itu beralih ke menu <b>Kredensial, </b>kemudian pilih buat kredensial dengan menggunakan <b>Client ID OAuth</b></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVOHeTXnfGzuo7n9UhlM-wr2slNpDSX5K1M5fUC7YBaWKWhHL3-XE-o87tjjmxQG8FMm6Oh_Uvw2Q8dfkpUJZQqAIgIV69paRaxDDcwPN52dbIMJMDf8TvQdL1_vfOknlT_qWUuyXYdvcx/s1600/Membuat+Login+Website+Menggunakan+Akun+Google+-+ardpratama+2+oauth+google+.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Login Website Menggunakan Akun Google" border="0" data-original-height="399" data-original-width="954" height="166" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVOHeTXnfGzuo7n9UhlM-wr2slNpDSX5K1M5fUC7YBaWKWhHL3-XE-o87tjjmxQG8FMm6Oh_Uvw2Q8dfkpUJZQqAIgIV69paRaxDDcwPN52dbIMJMDf8TvQdL1_vfOknlT_qWUuyXYdvcx/s400/Membuat+Login+Website+Menggunakan+Akun+Google+-+ardpratama+2+oauth+google+.png" title="Membuat Login Website Menggunakan Akun Google" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Ketika menambahkan kredensial OAuth masukan url yang digunakan untuk auth nantinya pada <b>URI pengalihan yang diotorisasi </b></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNf0OS1QpSMPpLuU85a2Nbw9PNyPUI-Rpta3Jy0d2NfAP29PI-qfFqDmhl9vEnW2tEx8Cn5GrCeDhALvYCJVTgKlS4oomKPQIyTZKpZYsR0XCl27efv_8RqsByr80m3X6AiZqSpUwBK8Wp/s1600/Membuat+Login+Website+Menggunakan+Akun+Google+-+ardpratama+3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Login Website Menggunakan Akun Google" border="0" data-original-height="454" data-original-width="410" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNf0OS1QpSMPpLuU85a2Nbw9PNyPUI-Rpta3Jy0d2NfAP29PI-qfFqDmhl9vEnW2tEx8Cn5GrCeDhALvYCJVTgKlS4oomKPQIyTZKpZYsR0XCl27efv_8RqsByr80m3X6AiZqSpUwBK8Wp/s400/Membuat+Login+Website+Menggunakan+Akun+Google+-+ardpratama+3.png" title="Membuat Login Website Menggunakan Akun Google" width="360" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
Kemudian download secret dari OAuth dengan menekan tombol download seperti pada gambar di bawah ini. Simpan baik baik file tersebut dan beri nama <b>client_secret.json</b> lalu letakan sejajar dengan folder vendor.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtPIR2WpcwixaJSUmHdfkD2gkMblzwbjMVpV6DqVlFCrFmGfGV_kIAWYIwoKCKUOwUtvMCaBP7NUc54RaqEsiqaytltVcU41WuAop0RfcwH9Fyw3cUSBTmRMIPuSgzCUvDarjakeveMZ5R/s1600/Membuat+Login+Website+Menggunakan+Akun+Google+-+ardpratama+4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Login Website Menggunakan Akun Google" border="0" data-original-height="459" data-original-width="1079" height="170" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtPIR2WpcwixaJSUmHdfkD2gkMblzwbjMVpV6DqVlFCrFmGfGV_kIAWYIwoKCKUOwUtvMCaBP7NUc54RaqEsiqaytltVcU41WuAop0RfcwH9Fyw3cUSBTmRMIPuSgzCUvDarjakeveMZ5R/s400/Membuat+Login+Website+Menggunakan+Akun+Google+-+ardpratama+4.png" title="Membuat Login Website Menggunakan Akun Google" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<h4 style="clear: both; text-align: left;">
Langkah 3. Membuat File PHP</h4>
<div class="separator" style="clear: both; text-align: left;">
<b><br /></b></div>
<div class="separator" style="clear: both; text-align: left;">
Membuat file <b>index.php</b> dan letakan sejajar dengan folder vendor</div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<pre class="code highlight" lang="plaintext"><i style="font-family: "courier new", courier, monospace;"><?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>
 ";
 }
?></i></pre>
<br />
Membuat file <b>auth.php</b> dan letakan sejajar dengan folder vendor</div>
<pre class="code highlight" lang="plaintext"><i style="font-family: "courier new", courier, monospace;"><?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');
}
?></i></pre>
<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
Membuat file <b>logout.php</b> dan letakan sejajar dengan folder vendor<br />
<pre class="code highlight" lang="plaintext"><i style="font-family: "courier new", courier, monospace;"><?php 
session_start();
 
$_SESSION['access_token'] = "";
$_SESSION['access_profile'] = "";
 
header('location:index.php');
?></i></pre>
<br />
Jadi folder kita berisi seperti ini.<br />
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeLiUNAnUuj8aibt6dy3S9OsR1z64TYGHG3lVNl46dQDnKSvrjSziMTwmv8Ch070y6fisAnjg4g9ctmFo054oPgbPXqo1ypQcV_d1EenVU-RfHp3HwTlof-F9fdwSRAv_qpcfZn074mCNl/s1600/Membuat+Login+Website+Menggunakan+Akun+Google+-+ardpratama+6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Login Website Menggunakan Akun Google" border="0" data-original-height="186" data-original-width="187" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeLiUNAnUuj8aibt6dy3S9OsR1z64TYGHG3lVNl46dQDnKSvrjSziMTwmv8Ch070y6fisAnjg4g9ctmFo054oPgbPXqo1ypQcV_d1EenVU-RfHp3HwTlof-F9fdwSRAv_qpcfZn074mCNl/s1600/Membuat+Login+Website+Menggunakan+Akun+Google+-+ardpratama+6.png" title="Membuat Login Website Menggunakan Akun Google" /></a></div>
<br />
Saatnya untuk demo time<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE9KAEML1HYIjiKgnuN7MTorPk-VSaiCm9BF1ehKD9wts68fkTx6XmC3MgUHcTJidEV1e9izu_fAZRVFdwN1-XSLi6DmmCcT4QQRpuCwo7h45k7WD-_gO3xRKRYHNJYEm139u2xspRYLWk/s1600/Membuat+Login+Website+Menggunakan+Akun+Google+-+ardpratama+6.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="673" data-original-width="1299" height="328" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE9KAEML1HYIjiKgnuN7MTorPk-VSaiCm9BF1ehKD9wts68fkTx6XmC3MgUHcTJidEV1e9izu_fAZRVFdwN1-XSLi6DmmCcT4QQRpuCwo7h45k7WD-_gO3xRKRYHNJYEm139u2xspRYLWk/s640/Membuat+Login+Website+Menggunakan+Akun+Google+-+ardpratama+6.gif" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
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.<br />
<br />
Terima kasih<br />
ardpratama<br />
<br />
<br />
<i>src:</i><br />
<i>https://www.dokumenary.net/2016/12/01/membuat-aplikasi-login-dengan-google-account/</i><br />
<i>https://www.dumetschool.com/blog/login-melalui-akun-google-menggunakan-php</i></div>
</div>

Membuat Login Website Menggunakan Akun Google - Selamat malam paman pengguna blogger kali ini ardpratama akan share cara Membuat Login Web...

Ardi Pratama
Sen Jan 20 2020

Membuat Login Website Menggunakan Akun Google

Membuat Angka 1 - 6 Berpola Segitiga dengan Perulangan PHP