Đăng nhập Facebook sử dụng JavaScript SDK

Với Facebook API bạn có thể dễ dàng thu thập các thông tin cơ bản cần thiết như: họ tên, ngày sinh, địa chỉ email, giới tính,.. từ người dùng khi họ đăng nhập Facebook. Và dưới đây là một ví dụ lấy thông tin facebook sử dụng Facebook Javascript SDK, nhưng trước tiên bạn xem demo bằng cách click vào nút đăng nhập dưới đây

Vui lòng đăng nhập vào ứng dụng này.

 Xem thêm tài liệu hướng dẫn này sử dụng Facebook Javascript SDK v2.2

- Trước tiên, bạn cần phải có một App ID
- Để có được App ID truy cập vào địa chỉ https://developers.facebook.com/apps và tạo ra một ứng dụng miễn phí từ địa chỉ đó. Sau khi tạo xong ứng dụng, bạn sẻ được cung cấp app ID

App ID được lấy từ các trang ứng dụng facebook, như trong hình trên. 

- Tạo một Form HTML cho phép nhập các thông tin như: họ tên, email,..

01	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

02	<script src="//getbootstrap.com/dist/js/bootstrap.min.js"></script>

03

04	<form class="form-signin" role="form">

05	<div id="status"></div>

06	<h2 class="form-signin-heading">User Registration</h2>

07

08	<label for="inputFname" class="sr-only">First Name</label>

09	<input type="text" id="inputFname" class="form-control" placeholder="First Name" required autofocus>

10

11	<label for="inputLname" class="sr-only">First Name</label>

12	<input type="text" id="inputLname" class="form-control" placeholder="Last Name" required >

13

14	<label for="inputEmail" class="sr-only">Email address</label>

15	<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required >

16

17	<label for="inputPassword" class="sr-only">Password</label>

18	<input type="password" id="inputPassword" class="form-control"placeholder="Password" required>

19

20	<div class="checkbox">

21	<label><input type="checkbox" value="remember-me"> Remember me</label>

22

</div>

23

24	<button class="btn btn-sm btn-primary btn-block" type="submit">Sign Up

25	<button class="btn btn-sm btn-primary btn-block" onclick="_login();"type="submit">Sign Up using Facebook</button>

26

</form>

- Javascript:

01

<script>

02	// Nạp Javascript SDK

03	(function(thisdocument, scriptelement, id) {

04	var js, fjs = thisdocument.getElementsByTagName(scriptelement)[0];

05	if (thisdocument.getElementById(id)) return;

06

07	js = thisdocument.createElement(scriptelement); js.id = id;

08	js.src = "//connect.facebook.net/vi_VN/sdk.js"; //you can use

09	fjs.parentNode.insertBefore(js, fjs);

10	}(document, 'script', 'facebook-jssdk'));

11

12	window.fbAsyncInit = function() {

13

FB.init({

14	appId      : '212550605589620', // APP ID ứng dụng của bạn

15	cookie     : true,  // Kích hoạt cookies

16

17	xfbml      : true,  // plugins xã hội

18	version    : 'v2.1' // Sử dụng version 2.1

19

});

20

21	// Xử lý hàm callback

22	FB.getLoginStatus(function(response) {

23	statusChangeCallback(response);

24

});

25

26

};

27

28	// Kết quả từ FB.getLoginStatus().

29	function statusChangeCallback(response) {

30	if (response.status === 'connected') {

31	// Đăng nhập vào ứng dụng của bạn và facebook.

32

_i();

33	} else if (response.status === 'not_authorized') {

34	// Người dùng đăng nhập từ một địa chỉ khác.

35	document.getElementById('status').innerHTML = 'Please log ' +

36	'into this app.';

37

}

38

}

39

40	function _login() {

41	FB.login(function(response) {

42	// Xử lý các kết quả

43	if(response.status==='connected') {

44

_i();

45

}

46	}, {scope: 'public_profile,email'});

47

}

48

49	// Điền kết quả vào textbox

50	function _i(){

51	FB.api('/me', function(response) {

52	document.getElementById("inputFname").value = response.first_name;

53	document.getElementById("inputLname").value = response.last_name;

54	document.getElementById("inputEmail").value = response.email;

55

});

56

}

57

58

</script>

Kết quả:
ID: id
Link : link
Họ và tên: name
Tên: last_name
Tên đệm: middle_name
Họ: first_name
Email: email
Thành phố: hometown.name
Sinh nhật: birthday
Giới tính: gender
...
Xem thêm: https://developers.facebook.com/docs/facebook-login/permissions/v2.0#reference