Sudah lama sebenarnya saya ingin menulis topik ini di blog, namun baru kesampaian saat ini karena kesibukan saya dalam mengembangkan GampSMS :-).
Pernahkah Anda mengunjungi situs berbagi file 4shared? Jika Anda perhatikan di form loginnya, situs tersebut menawarkan login menggunakan akun Google yang sudah dimiliki usernya (lihat gambar di bawah ini).
Dengan begitu, si user bisa melakukan login dengan 2 cara yaitu melalui username dan password ketika registrasi di 4shared, atau menggunakan akun Google jika si user tersebut memiliki.
Pada artikel kali ini pembahasan akan dimulai dari cara pembuatan script registrasinya, script login, sampai dengan script untuk logout.
OK, pertama kita perlu rancang untuk tabel databasenya di MySQL terlebih dahulu. Tabel ini nanti digunakan untuk menyimpan data user yang sudah teregistrasi. Di sini kita buat simpel saja ya, karena sekedar contoh.
CREATE TABLE `login` (
`email` varchar(100),
`passwd` varchar(100),
`nama` varchar(100),
PRIMARY KEY (`email`)
);
Dalam contoh ini, email nantinya akan digunakan sebagai username loginnya. Karena nama email digunakan sebagai user login, maka jangan lupa membuatnya sebagai primary key supaya unik.
Untuk keperluan koneksi ke MySQL, kita buat dahulu script koneksinya
koneksi.php
<?php
$dbuser = "...";
$dbpass = "...";
$dbhost = "localhost";
$dbname = "...";
mysql_connect($dbhost, $dbuser, $dbpass);
mysql_select_db($dbname);
?>
Script di atas nantinya akan kita sisipkan ke script lain setiap kali membutuhkan koneksi ke databasenya.
Selanjutnya, kita buat form untuk proses registrasi usernya
register.php
<h1>Register</h1>
<form method="post" action="registerproses.php">
<table>
<tr><td>Email</td><td>:</td><td><input type="text" name="email"></td></tr>
<tr><td>Nama Lengkap</td><td>:</td><td><input type="text" name="nama"></td></tr>
<tr><td>Password</td><td>:</td><td><input type="password" name="pass1"></td></tr>
<tr><td>Ulangi Password</td><td>:</td><td><input type="password" name="pass2"></td></tr>
</table>
<input type="submit" name="name" value="Register">
</form>
Setelah form registrasi user dibuat, jangan lupa buat juga script untuk memproses registrasinya
registrasiproses.php
<?php
// koneksi ke MySQL
include "koneksi.php";
// baca data email
$email = $_POST['email'];
// baca data nama user
$nama = $_POST['nama'];
// baca data password1
$pass1 = $_POST['pass1'];
// baca data password2
$pass2 = $_POST['pass2'];
// query untuk mencari email yg sdh ada di database
$query = "SELECT * FROM login WHERE email = '$email'";
$hasil = mysql_query($query);
if (mysql_num_rows($hasil) == 0)
{
// jika belum ada, simpan data user ke database
if ($pass1 == $pass2)
{
$query2= "INSERT INTO login (email, nama, passwd) VALUES ('$email', '$nama', '$pass1')";
$hasil2 = mysql_query($query2);
if ($hasil2) echo "<p>Registrasi sukses</p>";
else echo "<p>Registrasi gagal</p>";
}
else echo "<p>Password tidak sama</p>";
}
else echo "<p>Email '".$email."' sudah pernah diregistrasikan sebelumnya</p>";
?>
Script registrasi sudah dibuat, selanjutnya kita buat script untuk proses loginnya.
login.php
<?php
session_start();
include "koneksi.php";
// untuk proses login biasa
if ($_GET['op'] == "submit")
{
$email = $_POST['email'];
$pass = $_POST['pass'];
$query = "SELECT * FROM login WHERE email = '$email'";
$hasil = mysql_query($query);
$data = mysql_fetch_array($hasil);
// proses pencocokan password login dengan yg tersimpan di db
if ($data['passwd'] == $pass)
{
// redirect ke main.php
header("location: main.php");
// simpan nama ke session
$_SESSION['nama'] = $data['nama'];
}
else echo "<p>Login Gagal</p>";
}
// untuk proses login dg akun Google
else if ($_GET['op'] == "google")
{
include 'openid.php';
// membuat obyek open id
$openid = new LightOpenID;
if(!$openid->mode)
{
// proses authentication dengan Open ID Google
$openid->identity = 'https://www.google.com/accounts/o8/id';
$openid->required = array('contact/email');
header('Location: ' . $openid->authUrl());
}
else
{
// baca data email Google
$ambildata = $openid->getAttributes();
$email = $ambildata['contact/email'];
// cari data user yang memiliki email Google
$query = "SELECT * FROM login WHERE email = '$email'";
$hasil = mysql_query($query);
if (mysql_num_rows($hasil) > 0)
{
// jika data user ada, baca nama user dan simpan ke session
$data = mysql_fetch_array($hasil);
$_SESSION['nama'] = $data['nama'];
// redirect ke main.php
header("location: main.php");
}
else
{
// jika data user tidak terdaftar/tidak ada, munculkan form registrasi
echo "<p>Username/email tidak terdaftar.</p><p>Silakan register dahulu </p>";
// munculkan form registrasi user
?>
<h1>Register</h1>
<form method="post" action="registerproses.php">
<table>
<tr><td>Email</td><td>:</td><td><input type="text" name="email" value="<?php echo $email; ?>"></td></tr>
<tr><td>Nama Lengkap</td><td>:</td><td><input type="text" name="nama"></td></tr>
<tr><td>Password</td><td>:</td><td><input type="password" name="pass1"></td></tr>
<tr><td>Ulangi Password</td><td>:</td><td><input type="password" name="pass2"></td></tr>
</table>
<input type="submit" name="name" value="Register">
</form>
<?php
}
}
}
else
{
// munculkan form login
?>
<h1>Login</h1>
<form method="post" action="login.php?op=submit">
<table>
<tr><td>Email</td><td>:</td><td><input type="text" name="email"></td></tr>
<tr><td>Password</td><td>:</td><td><input type="password" name="pass"></td></tr>
</table>
<input type="submit" name="submit" value="Login"><br><br>
<small><a href="login.php?op=google">Login with Google Account</a></small>
</form>
<?php
}
?>
Dalam script login di atas, terdapat 2 skenario login yaitu login biasa melalui pengisian username/email dan password melalui form login sesuai yang pernah diisi sewaktu registrasi, serta login melalui open ID Google. Untuk proses melalui form login biasa, saya kira tidak perlu saya jelaskan karena simpel. Sedangkan proses login dengan open ID Google agak sedikit kompleks. Di sini, kita menggunakan class LightOpenID yang sudah pernah di buat orang. Dengan class ini, kita nantinya akan terhubung ke server Google untuk proses authentication. Anda dapat mendownload file berisi class LightOpenID di sini.
Setelah proses authentication melalui Open ID Google berhasil, selanjutnya kita ambil data email dari hasil authentication tersebut untuk kita lookup ke dalam database user login yang kita buat sebelumnya. Jika email ini ada, maka proses login berhasil. Namun jika belum ada, maka si user belum terdaftar dan nantinya akan muncul form registrasi user baru.
Lantas, bagaimana dengan script main.php yang merupakan hasil redirect jika proses login berhasil? Script main.php ini merupakan landing page berisi konten-konten yang bersifat restricted, hanya bisa diakses oleh user yang loginnya berhasil. Misalkan main.php ini kita buat simpel saja sbb:
main.php
<?php
session_start();
if (isset($_SESSION['nama']))
{
// tampilkan nama user
echo "<p>Hallo ".$_SESSION['nama'].", Anda sudah login</p>";
echo "<a href='logout.php'>Logout</a>";
}
else echo "<p>Anda belum login (<a href='login.php'>Login</a>)</p>";
?>
Sedangkan script untuk logoutnya, kita buat seperti berikut
logout.php
<?php
session_start();
session_destroy();
echo "<p>Anda sudah logout</p>";
echo "<p><a href='login.php'>Login</a></p>";
?>
Jika kita perhatikan script logout di atas, maka untuk proses logout hanyalah menghapus variabel sessionnya saja. Dengan demikian, jika sebelumnya si user melakukan login melalui Open ID Google maka masih tetap bisa masuk ke sistem melalui link ‘Login with Google Account’.
Berikut ini beberapa screen shot tampilan dari script di atas.
Gambar di bawah ini muncul ketika proses registrasi
Gambar di bawah ini muncul ketika proses login melalui Open ID Google
Setelah proses login berhasil
OK deh.. selamat mencoba ya…
