ardpratama

Home > Menampilkan post dengan kategori login

Membuat Login Hotspot Mikrotik dengan Autentikasi Google

<div dir="ltr" style="text-align: left;" trbidi="on">
<b>Login Hotspot Mikrotik dengan Autentikasi Google - </b>Assalamualaikum paman pengguna blogger. Postingan kali ini melanjutkan tentang <a href="https://ardpratama.blogspot.com/2020/01/membuat-login-website-menggunakan-akun-google.html" target="_blank">Membuat Login Website Menggunakan Akun Google</a>. Pada postingan tersebut autentikasi diintegrasikan dengan website saja, tapi kali ini ardpratama akan mencoba mengintegrasikan google autentikasi kedalam mikrotik hotspot.<br />
<br />
Alat yang diperlukan:<br />
<ul style="text-align: left;">
<li><b>Mikrotik</b> yang mendukung hotspot, saya menggunakan RB951</li>
<li><b>Server </b>yang terinstall web server, saya menggunakan laptop windows dengan xampp</li>
<li><b>Internet </b>untuk internet :v, saya menggunakan tethering hp</li>
<li><b>PC client / HP</b> yang memiliki wifi adapter untuk testing</li>
</ul>
Skema kerja:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_-d49WhIRenJkShaYmj_qDWEm_oJPX8EPNzo06aTmI7a5HyR1Nz34A45PynHzRc_WPnOuI3QwikQd9b78uHehP5sDmjinvvfpc5jeqmR9XrTbGW2j16jiJiftTo5LkhOnFhe6BUmJAa1m/s1600/Login+Hotspot+Mikrotik+dengan+Autentikasi+Google+-+ardpratama+1.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Login Hotspot Mikrotik dengan Autentikasi Google - ardpratama" border="0" data-original-height="431" data-original-width="761" height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_-d49WhIRenJkShaYmj_qDWEm_oJPX8EPNzo06aTmI7a5HyR1Nz34A45PynHzRc_WPnOuI3QwikQd9b78uHehP5sDmjinvvfpc5jeqmR9XrTbGW2j16jiJiftTo5LkhOnFhe6BUmJAa1m/s400/Login+Hotspot+Mikrotik+dengan+Autentikasi+Google+-+ardpratama+1.png" title="Login Hotspot Mikrotik dengan Autentikasi Google - ardpratama" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<h4 style="text-align: left;">
<span style="font-weight: normal;">
Langkah 1. Membuat Hotspot</span></h4>
Tutorial dapat dilihat di <a href="https://ardpratama.blogspot.com/2015/07/membuat-dan-redirect-login-hotspot.html" target="_blank">sini</a><br />
<br />
<h4 style="text-align: left;">
<span style="font-weight: normal;">
Langkah 2. Membuat Static DNS untuk Server (goodpanda.id)</span></h4>
Masuk ke ip --> dns --> static<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCyOHbxDxLL3pyqZ5yw4p01ZhxeXa7oPnI07edMLTrGKoIE1ADSpuCp6K32wFDNxUgiKCL1US17IW4e89Y43FqaKYrhpvsFeWQgM8i4R7HA3002Ez0dv04vUrtTx0Wo7OS_6hW5I2lv4YT/s1600/Login+Hotspot+Mikrotik+dengan+Autentikasi+Google+-+ardpratama+2.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Login Hotspot Mikrotik dengan Autentikasi Google - ardpratama" border="0" data-original-height="168" data-original-width="361" height="148" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCyOHbxDxLL3pyqZ5yw4p01ZhxeXa7oPnI07edMLTrGKoIE1ADSpuCp6K32wFDNxUgiKCL1US17IW4e89Y43FqaKYrhpvsFeWQgM8i4R7HA3002Ez0dv04vUrtTx0Wo7OS_6hW5I2lv4YT/s320/Login+Hotspot+Mikrotik+dengan+Autentikasi+Google+-+ardpratama+2.png" title="Login Hotspot Mikrotik dengan Autentikasi Google - ardpratama" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Pada gambar diatas ada dua DNS yaitu untuk server dan untuk domain router mikrotik.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<h4 style="text-align: left;">
<span style="font-weight: normal;">
Langkah 3. Whitelist Alamat Google Auth</span></h4>
<div class="separator" style="clear: both; text-align: left;">
Langkah ini sangat penting agar auth google dapat diakses dan tidak kena rule dari hotspot sebelum login.</div>
<div class="separator" style="clear: both; text-align: left;">
Masuk ke ip --> hotspot --> Walled Garden</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/AVvXsEhYN-AtpftbjbYS0dZ64JCj3Hr5Y-rfqBouNbKUsYCF2DSJlpaWmtj8smiGJh6JpC1f_8YlInU3ce-Qgx_q_jrR5aLTvmWrvxf8YoPaCpaAdXyvEYm9dq69uYPs1eB0o0A1pq4sBdATqMX6/s1600/Login+Hotspot+Mikrotik+dengan+Autentikasi+Google+-+ardpratama+3.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Login Hotspot Mikrotik dengan Autentikasi Google - ardpratama" border="0" data-original-height="393" data-original-width="703" height="222" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYN-AtpftbjbYS0dZ64JCj3Hr5Y-rfqBouNbKUsYCF2DSJlpaWmtj8smiGJh6JpC1f_8YlInU3ce-Qgx_q_jrR5aLTvmWrvxf8YoPaCpaAdXyvEYm9dq69uYPs1eB0o0A1pq4sBdATqMX6/s400/Login+Hotspot+Mikrotik+dengan+Autentikasi+Google+-+ardpratama+3.png" title="Login Hotspot Mikrotik dengan Autentikasi Google - ardpratama" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<h4 style="text-align: left;">
<span style="font-weight: normal;">
Langkah 4. Scripting login.html Mikrotik</span></h4>
Script kita rubah agar ketika auth langsung terlempar ke halaman goodpanda.id<br />
<br />
<pre class="code highlight" lang="plaintext"><i style="font-family: "courier new", courier, monospace;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>internet hotspot > login</title>
<meta http-equiv="refresh" content="0;url=http://goodpanda.id/google_auth/index.php?dst=$(link-orig)" />
</head>

<body>

</body>
</html></i></pre>
<br />
<br />
<h4 style="text-align: left;">
<span style="font-weight: normal;">
Langkah 5. Setting Auth Google di Web Server</span></h4>
Tutorial bisa dilihat di <a href="https://ardpratama.blogspot.com/2020/01/membuat-login-website-menggunakan-akun-google.html" target="_blank">sini</a>. Saya anggap sudah berhasil ya ^^<br />
<br />
<h4 style="text-align: left;">
<span style="font-weight: normal;">
Langkah 6. Menambah dan Edit File di Web Server</span></h4>
<div>
Merubah file<b> auth.php</b></div>
<pre class="code highlight" lang="plaintext"><i style="font-family: "courier new", courier, monospace;"><?php
require_once __DIR__.'/vendor/autoload.php';
session_start();
//credential router access from web server
 $ip_router = "192.168.137.2";
 $uname_router = "admin";
 $passw_router = "asdf";
//-------------------------------------------
$client = new Google_Client();
$client->setApplicationName("Client_Library_Examples");
//$client->setDeveloperKey("DEVELOPER_KEY");
$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;  
   // add user mikrotik
 require_once('routeros_api.class.php');
 $API = new RouterosAPI();
 $API->debug = true;
 if ($API->connect($ip_router, $uname_router, $passw_router)) {
    $API->comm("/ip/hotspot/user/add", array(
    "name"     => $email,
    "profile" => "default",
    "limit-uptime" => "00:60:00",
    "comment"  => $user_name,
    
    ));
   $API->disconnect();
}
   
  } catch (\Exception $e) {
      echo $e->__toString();
 
      $_SESSION['access_token'] = "";
      die;
  }
 header('Location:index.php');
}
?></i></pre>
<div>
<br />
Merubah file <b>index.php</b><br />
<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 "Selamat datang <b>".$profile['displayName']."</b>, Anda telah berhasil login hotspot menggunakan akun google anda, ";
  echo "<a href='http://goodpanda.lv/login?username=".$profile['emails']."&dst=".$_SESSION['dst']."'><br></br>klik disini untuk mendapatkan internet</a>";
  } else {
?> <center>
 <h1>Selamat datang di login page ardpratama.blogspot.com</h1>
 <a href='auth.php'><img src='google.png' width='200px'/></a>
<?php
 if(isset($_GET['dst'])) {
   $_SESSION['dst'] = $_GET['dst'];
  } else {
   $_SESSION['dst'] = "";
  }
}
?></i></pre>
<br /></div>
Kemudian menambahkan<b> library routeros_api</b><br />
File dapat diunduh <a href="https://github.com/BenMenking/routeros-api/blob/master/routeros_api.class.php" rel="nofollow" target="_blank">disini </a><br />
<br />
Kemudian <b>tambahkan gambar tombol</b> dengan nama <b>google.png</b>, bebas cari di internet hehe<br />
<br />
Jadi file yang ada di project akan seperti ini.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDbe5evqachiJGVBIwFjye8UWNY5VkUL-i0_AgP7TmJDkQ1PAxgIAvgPGMpXvlW5uwA3sNbDyjURj1XdR4qCUiEwKOwSbUmKJ1adBgZJy_PJCbqygK_ylP9ZeJur_p3hw_UEl9WktoxHvt/s1600/Login+Hotspot+Mikrotik+dengan+Autentikasi+Google+-+ardpratama+4.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Login Hotspot Mikrotik dengan Autentikasi Google" border="0" data-original-height="263" data-original-width="255" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDbe5evqachiJGVBIwFjye8UWNY5VkUL-i0_AgP7TmJDkQ1PAxgIAvgPGMpXvlW5uwA3sNbDyjURj1XdR4qCUiEwKOwSbUmKJ1adBgZJy_PJCbqygK_ylP9ZeJur_p3hw_UEl9WktoxHvt/s1600/Login+Hotspot+Mikrotik+dengan+Autentikasi+Google+-+ardpratama+4.png" title="Login Hotspot Mikrotik dengan Autentikasi Google" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<br />
tinggal testing<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcikhvImbY_mrc7lM1hBBF0xromHOci3MEJmh2d44ijVfnp6xM09eRENyGYtO8_RqNh6BPzlWqWyxRp8910Ym3TVt00SmsnTS_E5BmXVCYp3la-1100W-cPO3xpBRb0KztCxaRNlVIbLyy/s1600/Login+Hotspot+Mikrotik+dengan+Autentikasi+Google.gif" style="margin-left: 1em; margin-right: 1em;"><img alt="Login Hotspot Mikrotik dengan Autentikasi Google" border="0" data-original-height="752" data-original-width="1425" height="336" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcikhvImbY_mrc7lM1hBBF0xromHOci3MEJmh2d44ijVfnp6xM09eRENyGYtO8_RqNh6BPzlWqWyxRp8910Ym3TVt00SmsnTS_E5BmXVCYp3la-1100W-cPO3xpBRb0KztCxaRNlVIbLyy/s640/Login+Hotspot+Mikrotik+dengan+Autentikasi+Google.gif" title="Login Hotspot Mikrotik dengan Autentikasi Google" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
Sekian untuk post Login Hotspot Mikrotik dengan Autentikasi Google kali ini, semoga bermanfaat. wassalamualaikum wr wb<br />
<i><span style="font-size: x-small;"><br /></span></i>
<i><span style="font-size: x-small;">mikrotik hotspot dengan akun gooogle</span></i><br />
<i>src: </i><br />
<i>https://mum.mikrotik.com//presentations/ID13/ragil.pdf</i><br />
<i>https://mum.mikrotik.com//presentations/NZ15/perkins.pdf</i><br />
<i>https://github.com/BenMenking/routeros-api/blob/master/routeros_api.class.php</i><br />
<i>https://abdulrochman77.blogspot.com/2019/03/konfigurasi-bypass-website-di-hotspot.html</i><br />
<i><br /></i>
<i><br /></i>
<br />
<blockquote class="tr_bq">
<i><br /></i></blockquote>
</div>

Membuat Login Hotspot Mikrotik dengan Autentikasi Google

Login Hotspot Mikrotik dengan Autentikasi Google - Assalamualaikum paman pengguna blogger. Postingan kali ini melanjutkan tentang Membuat ...

Ardi Pratama
Sen Jan 20 2020

Membuat Login Website Menggunakan Akun Google

<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