Membuat sistem Login dan pendaftaran website menggunakan akun facebook

Posted by bg teuku On Senin, 29 Oktober 2012 26 komentar





Kita ketahui persaingan social network kali ini di dominasi oleh facebook setelah meninggalkan berkilo-kilo meter social network seperti Friendster jauh di belakangnya, hal ini membuat situs-situs lainnya membuat pembaruhuan demi eksitensinya di dunia maya dengan memasang sebuah plugin yang memudahkan pengunjung untuk mendaftarkan dirinya pada situs tersebut maka di instal-lah plugin pendaftaran menggunakan akun facebook untuk pengambilan data dari database facebook ke database pribadi situs  tersebut seperti username, email, password dan lain-lain melalui kebijakan API FACEBOOK

Dengan itu memungkinkan kita untuk membuat pendaftran pada website pribadi dengan akun facebook pengunjung, 'so' situs yang kita kelola akan lebih mengikuti perkembangan zaman dan lebih mudah dalam langkah-langkah pengunjung untuk melakukan login dan pendaftaran. selain itu para webmaster atau pengelola situs akan mendapatkan data yang valid sesuai data dari database facebook

contoh website yang sudah berintgrasi dengan pendaftaran facebook :
  1. http://www.histats.com/
  2. http://beta.photobucket.com/
  3. dan masih banyak yang lainnya
jadi bagi anda-anda yang sudah mempunyai website dan mau menggunakan layanan dari facebook ini untuk menjadikan plugin pendaftarannya menggunkan akun facebook silah kan baca tutorial ini

hal yang paling di butuhkan adalah pemahaman tentang php , database mysql dan java script, bila] belum paham, bisa belajar untuk membuat aplikasi chat dengan php dan mysql karena pada tutorial tersebut bila anda berhasil membangun aplikasinya, otomatis anda akan paham tentang keseluruhan cara kerja php dengan database dan java script,

coution: saya tidak menyarankan menjalankan aplikasi ini pada localhost, maka dari itu anda memerlukan webhosting untuk menjalankan dan mempraktekannya

ok kita lanjut

download dulu folderzipnya disini
upload ke webhosting anda dan extrak sehingga menampilkan seperti ini
 setelah itu masuk ke phpmy admin dan import table

-- phpMyAdmin SQL Dump
-- version 3.4.11.1
-- http://www.phpmyadmin.net
--
-- Inang: localhost
-- Waktu pembuatan: 01 Nov 2012 pada 00.54
-- Versi Server: 5.1.65
-- Versi PHP: 5.2.6

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;

--
-- Basis data: `icarahip_c`
--

-- --------------------------------------------------------

--
-- Struktur dari tabel `daftarfb`
--

CREATE TABLE IF NOT EXISTS `daftarfb` (
  `id` int(250) NOT NULL AUTO_INCREMENT,
  `username` text NOT NULL,
  `email` text NOT NULL,
  `facebook_id` text NOT NULL,
  `join_date` date NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;

--
-- Dumping data untuk tabel `daftarfb`
--

INSERT INTO `daftarfb` (`id`, `username`, `email`, `facebook_id`, `join_date`) VALUES
(1, 't.saddam', '', '1525835474', '2012-10-30'),
(2, 'carahipnotis.net', '', '100000301388746', '2012-10-30'),
(3, 'carahipnotisdotnet', '', '100001952779079', '2012-10-30');

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

setelah itu ikuti langkah-langkah di bawah ini
  • langkah 1
Membuat aplikasi facebook facebook, http://www.facebook.com/developers/createapp.php bila sudah ada simpan key dan kode rahasianya
bila belum klik create new app


isi "app name" dengan nama aplikasi anda
app namespace judul aplikasi anda
tidak perlu chek list "webhosting"

lalu lanjutkan

setelah itu
yang berkolom merah
APP id adalah aplikasi id nya
App secret adalah id rahasianya

kedua kode tersebut yang nantinya akan kita pastekan pada bagian-bagian tertentu di php script
untuk form 

dan untuk site url pada website with facebook login adalah halaman pengembalian dan tempat semua data dari facebook di proses ke sistem database mysql kita
misalnya

http://www.namasituskamu.com/nama-folder/facebook_auth.php

  • langkah 2
selanjuntnya mengganti seluruh app id , app secret dan url pada tiap tiap file,
kita mulai dengan file index.php



 <h4>Hello sobat!</h4>
              </div>

              <a href="https://www.facebook.com/dialog/oauth?client_id=1236111xxxxxx48&redirect_uri=http://i.carahipnotis.net/pendaftaranfb/facebook_auth.php&scope=publish_stream" title="Signup with facebook">
                <button class="btn btn-primary">Signup with facebook</button>
              </a>
    
            </div>
yang berwarna merah adalah
  •  app id anda yang anda dapatkan saat mendaftar aplikasi facebook
  •  redirect_uri sebagai halaman kembalian setelah diarahkan ke facebook dan melakukan perizinan  akses foto nama dll. nah di halaman ini akan di lakukan proses input dengan php ke database sistem
lalu pada halaman facebook_auth.php 

$code = $_GET['code'];

$app_id = "12xxxx11184459948";
$app_secret = "5e07e5b18756xxxxa9204bbe520b25b";
$my_url = "http://i.carahipnotis.net/pendaftaranfb/facebook_auth.php";
ganti semua  yang berwarna merah dengan data anda

nah sampai disini, sebelum saya jelaskan cara kerja script-script tersebut anda boleh mengujinya dengan mengetik alamat index dari folder tersebut pada broser, klik signup , biasanya banyak terjadi kendala setelah anda sign up dan diarah kan ke facebook .tidak terkecuali saya, di beberapa kejadian memang perlukan waktu untuk facebook untuk saving data anda ke sistem mereka selama beberpa menit bahkan jam, solusinya coba lagi 24x selama 24 jam :D .

namun setelah seharian belum juga merubah ke adaan coba chek lagi data-data yang di masukan mungkin saja ada kekeliruan dan ada data yang tak di masukan, kalau sudah dan belum menemukan permasalahannya, ya saya juga akan coba bantu, silahkan berkomentar pada kotak komentar di bawah,


Ditulis Oleh : bg teuku

Artikel Membuat sistem Login dan pendaftaran website menggunakan akun facebook ini ditulis oleh Bg Teuku pada hari Senin, 29 Oktober 2012. Saya sangat welcome kepada pertanyaan ,Dengan pertanyaan saya akan merasa di hargai karena tulisan sederhana yang jauh dari kata sempurna ini ternyata di pelajari sunguh-sunguh oleh anda, maka dari itu ajukan pertanyaan saya akan sebisa mungkin menjawabnya.
Hargai saya dengan memberikan link sumber apabila anda ingin COPAS artikel ini

:: TERIMAKASIH ::

26 komentar:

exchange social mengatakan...

salam, saya mahu cuba la cara ni ..terima kasih atas perkongsian anda.

mahasiswa yang kompeten mengatakan...
Komentar ini telah dihapus oleh pengarang.
Acep mengatakan...

Link download'na ga bisa gan. mohon sediakan link download yg lain donk. coz link itu ga bs

idwebdeveloper mengatakan...

good job gan, mau coba dulu :)

Budi Setiawan mengatakan...

tutorialnya bagus! tapi link downloadnya mati! jadi nanggung kerjanya bisa diperbaiki kah?? trims

Septic Tank mengatakan...

Kern juga nih

Dannie Yuuhi mengatakan...

Ane mau nanya gan,
setelah berhasil membuat tombol login facebook ini.

bagaimana cara mengambil variable untuk website kita.
misalkan saya butuh emailnya pengguna. sebagai acuan dia adalah user web saya.
ya agar saya bisa memanagenya lagi.

sessi atau lainnya yg saya butuhin kan harus saya ambil dari informasi user tadi gimana ngambilnya?

fatkhur mengatakan...

Gan link download sama link demo kok ke suspended??

Pasar Online Indonesia mengatakan...

kalo untuk di web saya yang b2b bisa nggak ya dipakai script nya??

CYTOMEDICAL mengatakan...

thanks sharing nya gan..

Arief mengatakan...

Gan ane versi ane maw nanya ane buat website menggunakan PHP lama, PHP 4. sementara script ente dia atas menggunakan PHP 5,,, apa bisa jalan itu plugin FB di web ane?

Lihin mengatakan...

Duh adminnya ke mana nih ?? hehe :)

FNc Adan mengatakan...

gan link download zip nya g bsa d bka tlong d perbaiki y

Anonim mengatakan...

Bang , itu facebook_auth nnya itu gimana masudnnya?

yoyon thok mengatakan...

gan file zipnya tolong di reupload

tilay hacker mengatakan...

iia gan tolong jadi penasaran

Cybernet Web Design mengatakan...

http://cybernetwebdesign.com/

Anonim mengatakan...

format database buat login facebook apa?

FB:Krisna Adi Triantara

Anonim mengatakan...

Maaf Gan , Link Nya Mati Mohon Di Update

Cybernet Web Design mengatakan...

makasih mas ..........

Ichwan mengatakan...

Sudah tidak bisa lagi ya Link download file nya

cipto Junaedy mengatakan...

mantap.. thanks gan atas pencerahannya...

alat bantu sex mengatakan...

engk bisa gan. eror punya ane :/

Admin mengatakan...

Bisa gak ya klo hostingnya hanya menggunakan blogger ?

http://www.industrimigas.com

Revcker Antasari mengatakan...

mas, tolong perbaiki donk link download nya tuh

bany sentosa mengatakan...

kalau gak pakek hosting gimana caranya ya?

Poskan Komentar