Jumat, 04 November 2011

membuat login alternatif dengan akun google open id

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).
Google Open ID
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.

1.CREATE TABLE `login` (
2.`email` varchar(100),
3.`passwd` varchar(100),
4.`nama` varchar(100),
5.PRIMARY KEY (`email`)
6.);
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

01.<?php
02. 
03.$dbuser = "...";
04.$dbpass = "...";
05.$dbhost = "localhost";
06.$dbname = "...";
07. 
08.mysql_connect($dbhost, $dbuser, $dbpass);
09.mysql_select_db($dbname);
10. 
11.?>
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

01.<h1>Register</h1>
02. 
03.<form method="post" action="registerproses.php">
04.<table>
05.<tr><td>Email</td><td>:</td><td><input type="text" name="email"></td></tr>
06.<tr><td>Nama Lengkap</td><td>:</td><td><input type="text" name="nama"></td></tr>
07.<tr><td>Password</td><td>:</td><td><input type="password" name="pass1"></td></tr>
08.<tr><td>Ulangi Password</td><td>:</td><td><input type="password" name="pass2"></td></tr>
09.</table>
10.<input type="submit" name="name" value="Register">
11.</form>
Setelah form registrasi user dibuat, jangan lupa buat juga script untuk memproses registrasinya
registrasiproses.php

01.<?php
02. 
03.// koneksi ke MySQL
04.include "koneksi.php";
05. 
06.// baca data email
07.$email = $_POST['email'];
08.// baca data nama user
09.$nama = $_POST['nama'];
10.// baca data password1
11.$pass1 = $_POST['pass1'];
12.// baca data password2
13.$pass2 = $_POST['pass2'];
14. 
15.// query untuk mencari email yg sdh ada di database
16.$query = "SELECT * FROM login WHERE email = '$email'";
17.$hasil = mysql_query($query);
18.if (mysql_num_rows($hasil) == 0)
19.{
20.// jika belum ada, simpan data user ke database
21.if ($pass1 == $pass2)
22.{
23.$query2= "INSERT INTO login (email, nama, passwd) VALUES ('$email', '$nama', '$pass1')";
24.$hasil2 = mysql_query($query2);
25.if ($hasil2) echo "<p>Registrasi sukses</p>";
26.else echo "<p>Registrasi gagal</p>";
27.}
28.else echo "<p>Password tidak sama</p>";
29.}
30.else echo "<p>Email '".$email."' sudah pernah diregistrasikan sebelumnya</p>";
31. 
32.?>
Script registrasi sudah dibuat, selanjutnya kita buat script untuk proses loginnya.
login.php

01.<?php
02.session_start();
03. 
04.include "koneksi.php";
05. 
06.// untuk proses login biasa
07.if ($_GET['op'] == "submit")
08.{
09.$email = $_POST['email'];
10.$pass = $_POST['pass'];
11.$query = "SELECT * FROM login WHERE email = '$email'";
12.$hasil = mysql_query($query);
13.$data  = mysql_fetch_array($hasil);
14.// proses pencocokan password login dengan yg tersimpan di db
15.if ($data['passwd'] == $pass)
16.{
17.// redirect ke main.php
18.header("location: main.php");
19.// simpan nama ke session
20.$_SESSION['nama'] = $data['nama'];
21.}
22.else echo "<p>Login Gagal</p>";
23.}
24.// untuk proses login dg akun Google
25.else if ($_GET['op'] == "google")
26.{
27.include 'openid.php';
28.// membuat obyek open id
29.$openid = new LightOpenID;
30.if(!$openid->mode)
31.{
32.// proses authentication dengan Open ID Google
33.$openid->identity = 'https://www.google.com/accounts/o8/id';
34.$openid->required = array('contact/email');
35.header('Location: ' . $openid->authUrl());
36.}
37.else
38.{
39.// baca data email Google
40.$ambildata = $openid->getAttributes();
41.$email = $ambildata['contact/email'];
42.// cari data user yang memiliki email Google
43.$query = "SELECT * FROM login WHERE email = '$email'";
44.$hasil = mysql_query($query);
45.if (mysql_num_rows($hasil) > 0)
46.{
47.// jika data user ada, baca nama user dan simpan ke session
48.$data  = mysql_fetch_array($hasil);
49.$_SESSION['nama'] = $data['nama'];
50.// redirect ke main.php
51.header("location: main.php");
52.}
53.else
54.{
55.// jika data user tidak terdaftar/tidak ada, munculkan form registrasi
56.echo "<p>Username/email tidak terdaftar.</p><p>Silakan register dahulu </p>";
57.// munculkan form registrasi user
58.?>
59.<h1>Register</h1>
60. 
61.<form method="post" action="registerproses.php">
62.<table>
63.<tr><td>Email</td><td>:</td><td><input type="text" name="email" value="<?php echo $email; ?>"></td></tr>
64.<tr><td>Nama Lengkap</td><td>:</td><td><input type="text" name="nama"></td></tr>
65.<tr><td>Password</td><td>:</td><td><input type="password" name="pass1"></td></tr>
66.<tr><td>Ulangi Password</td><td>:</td><td><input type="password" name="pass2"></td></tr>
67.</table>
68.<input type="submit" name="name" value="Register">
69.</form>
70. 
71.<?php
72.}
73.}
74.}
75.else
76.{
77.// munculkan form login
78.?>
79. 
80.<h1>Login</h1>
81. 
82.<form method="post" action="login.php?op=submit">
83.<table>
84.<tr><td>Email</td><td>:</td><td><input type="text" name="email"></td></tr>
85.<tr><td>Password</td><td>:</td><td><input type="password" name="pass"></td></tr>
86.</table>
87.<input type="submit" name="submit" value="Login"><br><br>
88.<small><a href="login.php?op=google">Login with Google Account</a></small>
89.</form>
90. 
91.<?php
92.}
93.?>
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

01.<?php
02. 
03.session_start();
04. 
05.if (isset($_SESSION['nama']))
06.{
07.// tampilkan nama user
08.echo "<p>Hallo ".$_SESSION['nama'].", Anda sudah login</p>";
09.echo "<a href='logout.php'>Logout</a>";
10.}
11.else echo "<p>Anda belum login (<a href='login.php'>Login</a>)</p>";
12. 
13.?>
 Sedangkan script untuk logoutnya, kita buat seperti berikut logout.php

1.<?php
2.session_start();
3.session_destroy();
4.echo "<p>Anda sudah logout</p>";
5.echo "<p><a href='login.php'>Login</a></p>";
6.?>
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
Google Open ID
Gambar di bawah ini muncul ketika proses login melalui Open ID Google
Google Open ID
Google Open ID
Setelah proses login berhasil
Google Open ID
OK deh.. selamat mencoba ya…



Sumber : http://blog.rosihanari.net
◄ Newer Post Older Post ►