Search

Membuat sistem Login dan pendaftaran website menggunakan akun facebook



TUTORIAL PINDAH DI SINI LEBIH POWERFULL DAN TERBARU

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,


33 comments:

exchange social said...

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

Putri TP said...
This comment has been removed by the author.
Acep said...

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

idwebdeveloper said...

good job gan, mau coba dulu :)

Budi Setiawan said...

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

Septic Tank said...

Kern juga nih

Dannie said...

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 said...

Gan link download sama link demo kok ke suspended??

Pasar Online Indonesia said...

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

CYTOMEDICAL said...

thanks sharing nya gan..

Arief said...

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 said...

Duh adminnya ke mana nih ?? hehe :)

Anonymous said...

Bang , itu facebook_auth nnya itu gimana masudnnya?

Emyefm said...

gan file zipnya tolong di reupload

TilayZ said...

iia gan tolong jadi penasaran

Anonymous said...

format database buat login facebook apa?

FB:Krisna Adi Triantara

Anonymous said...

Maaf Gan , Link Nya Mati Mohon Di Update

Cybernet Web Design said...

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

Ichwan said...

Sudah tidak bisa lagi ya Link download file nya

cipto Junaedy said...

mantap.. thanks gan atas pencerahannya...

alat bantu sex said...

engk bisa gan. eror punya ane :/

Unknown said...

Bisa gak ya klo hostingnya hanya menggunakan blogger ?

http://www.industrimigas.com

pak agus said...

mas, tolong perbaiki donk link download nya tuh

Unknown said...

kalau gak pakek hosting gimana caranya ya?

Anonymous said...

hai ADMIN
Aku robot

Yamako said...

mohon di update bang...
link nya juga mati :D

abu hisab said...

hmmm saya datang telat ya.. ditunggu update nya boss

ipan said...

artikel bermanfaat. good !

www.inilahkoran.com

Unknown said...

izin coba gan,

Semoga sukses!
lihat disini: www.dexfile.org

Softlabkom said...

ga bisa di download gan, link ga ke arah ke sana.
ada cara yang lain ?

Spotify said...

Lapor gan, Link download Error

Berita Terbaru said...

josss Metrolagu

lilo said...

keren abis

http://melodylagu.com/