Banyak orang yang diuntungkan dengan hadirnya
facebook, selain sebagai media sosial facebook juga banyak sekali digunakan untuk bermacam-macam kepentingan, seperti halnya periklanan, pengembangan, ataupun sarana yang lainnya. Untuk kali ini penulis ingin berbagi tentang layanan facebook yang bisa kita ambil keuntungannya, yaitu adalah
Login Facebook API. Singkatnya adalah, kita menggunakan
authentifikasi user dengan mengambil
login dari facebook untuk aplikasi web yang kita buat, jadi kita tidak usah repot-repot membuat database user untuk menyimpan data detail user diaplikasi kita. langkahnya sebagai berikut :
- 1. Login terlebih dahulu di https://developers.facebook.com
- 2. Menuju ke menu App dan daftarkan sebagai developer
- 3. Buat aplikasi baru dengan klik create new app, isi appication name
 |
| Create New App |
- 4. Setelah itu akan muncul dashboard dari application yang kita daftarkan, beserta ID dan kode rahasianya pada dashboard ada beberapa yang harus kita isi secara benar, yaitu adalah "App Domain" dan "Website With Facebook Login". Isi keduanya dengan domain dimana aplikasi web kita berada, misalnya "http://localhost/FB-API/index.html" nanti secara otomatis akan menjadi "localhost".
 |
| Dashboard Facebook Appication |
- 5. langkah selanjutnya adalah menyiapkan halaman login tersebut. didalam contoh yang kita masukan adalah ada pada index.html
untuk kode HTML-nya :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <html>
<head>
<!-- load main library JQuery-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- load facebook API -->
<script src="//connect.facebook.net/en_US/all.js"></script>
</head>
<body>
<!-- facebook button -->
<fb:login-button show-faces="true" width="200" max-rows="1"></fb:login-button>;
</body>
</html>
|
dan untuk kode javascript-nya :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
| <!--javascript untuk authentifikasi aplikasi kita dengan aplikasi yang di daftarkan di facebook-->
<script>
//load SDK facebook-nya
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
//initialize awal dan pengecekan ID applikasi
window.fbAsyncInit = function() {
FB.init({
appId : 'xxxxxxxxxxxxxxx', // App ID
channelUrl : 'http://localhost/FB-API/index.html', // Channel
Filestatus : true, // cek login
statuscookie : true, // enable cookies to allow the server to access the
sessionxfbml : true // parse XFBML
});
//kondisi authentifikasi apabila user terdaftar atau tidak
FB.Event.subscribe('auth.authResponseChange', function(response) {
//status apabila sudah valid atau belum
if (response.status === 'connected') {
//fungsi setelah login valid
testAPI();
} else if (response.status === 'not_authorized') {
FB.login();
} else {
FB.login();
}
});
};
//fungsi setelah login valid
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
}
</script>
|
- 6. Lalu save, apabila aplikasi berhasil maka button login dari facebook akan muncul di aplikasi kita
 |
| Facebook Login Button |
 |
| Facebook Login form popup |
|
 |
| Success facebook login |
No comments:
Post a Comment