Hôm nay mình làm một ví dụ nhỏ về cách sử dụng FB.login Javascript SDK của Facebook để xây dựng một chức năng đăng nhập trên website viết bằng Asp.Net MVC
Đầu tiên các bạn cần phải tạo 1 facebook app tại đây https://developers.facebook.com/
Sau khi tạo App thành công, bạn sẽ có Id ứng dụng (AppID), bạn cũng cần cấu hình tên miền ứng dụng sử dụng chức năng này. Khi đang trong quá trình phát triển bạn có thể ghi là localhost, khi deploy lên server thì sử dụng domain của website.
Chúng ta sẽ dựa vào hàm FB.login() để xác thực người dùng, sau khi xác thực thành công thì sẽ lấy thông tin xác thực trả về lưu vào Session trên website để bắt đầu một phiên làm việc mới của người dùng.
1. Javascript
Ta có phần mã javascript sẽ như sau
$(document).ready(function () { 'use strict'; // Load the SDK asynchronously (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/sdk.js"; ref.parentNode.insertBefore(js, ref); }(document)); window.fbAsyncInit = function () { FB.init({ appId: 'YOUR_APPID', // App ID status: true, // check login status cookie: true, // enable cookies to allow the server to access the session xfbml: true, // parse XFBML version: 'v2.11' }); }; function Login() { FB.login(function (response) { if (response.authResponse) { getFacebookUserInfo(); } else { console.log('User cancelled login or did not fully authorize.'); } }, { scope: 'email,user_photos,publish_actions' }); } function getFacebookUserInfo() { FB.api('/me?fields=email,name', function (response) { var token = $('input[name="__RequestVerificationToken"]').val(); $.ajax({ url: "/Home/Login", headers: { "__RequestVerificationToken": token }, type: "POST", data: { 'name': response.name, 'email': response.email }, success: function (data) { if(data.success === "True") { location.reload(); } }, error: function (data) { console.log(data); } }) }); } function Logout() { FB.logout(function () { document.location.reload(); }); } $('.lbtSignInFacebook').click(function () { Login(); }) $('.lbtLogOutFacebook').click(function () { Logout(); var token = $('input[name="__RequestVerificationToken"]').val(); $.ajax({ url: "/Home/LogOut", headers: { "__RequestVerificationToken": token }, type: "POST", success: function (data) { if (data.success === "True") { location.reload(); } }, error: function (data) { console.log(data); } }) })}); |
Ở trên ta sẽ thấy khi gọi hàm FB.login() và việc xác thực thành công, chúng ta sẽ lấy thông tin của facebook trả về bao gồm response.email & response.name để đẩy về server thông qua ajax. Phía server sẽ lấy thông tin trả về đó để lưu vào session phục vụ cho phiên làm việc mới.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| function getFacebookUserInfo() { FB.api('/me?fields=email,name', function (response) { var token = $('input[name="__RequestVerificationToken"]').val(); $.ajax({ url: "/Home/Login", headers: { "__RequestVerificationToken": token }, type: "POST", data: { 'name': response.name, 'email': response.email }, success: function (data) { if(data.success === "True") { location.reload(); } }, error: function (data) { console.log(data); } }) }); } |
Tương tự khi gọi hàm FB.Logout() ta cũng cần gọi phương thức phía server để xóa session của phiên làm việc hiện tại của người dùng.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| $('.lbtLogOutFacebook').click(function () { Logout(); var token = $('input[name="__RequestVerificationToken"]').val(); $.ajax({ url: "/Home/LogOut", headers: { "__RequestVerificationToken": token }, type: "POST", success: function (data) { if (data.success === "True") { location.reload(); } }, error: function (data) { console.log(data); } }) }) |
2. HTML
Ở phần view phía ngoài sẽ như sau.
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
| @using (Html.BeginForm()){ @Html.AntiForgeryToken() <div class="jumbotron"> <h1>Demo Login facebook</h1> <p class="lead">The sample about how to integrated Facebook Login to your website</p> @if (string.IsNullOrEmpty(ViewBag.UserName)) { <p><a href="javascript:;" class="btn btn-primary btn-lg lbtSignInFacebook">LOGIN FACEBOOK</a></p> } else { <table> <tr> <td>User:</td> <td> @ViewBag.UserName </td> </tr> <tr> <td colspan="2"> <a href="javascript:;" class="btn btn-danger lbtLogOutFacebook">Log Out</a> </td> </tr> </table> } </div>}@section scripts{ <script src="~/Scripts/FacebookLogin.js"></script>} |
Phần view sẽ chỉ bao gồm một button Login (.lbtSignInFacebook) để gọi hàm Login() javascript viết ở trên.
1
2
3
| $('.lbtSignInFacebook').click(function () { Login(); }) |
Một form hiện thị thông tin người dùng trả về từ server thông qua @ViewBag.UserName và một button Logout (.lbtLogOutFacebook) để thoát phiên đăng nhập bằng cách gọi hàm Logout() ở trên.
1
2
3
4
| $('.lbtLogOutFacebook').click(function () { Logout(); //clear session here }) |
3. C#
Phía server ta chỉ cần viết hai hàm để xử lý sự kiện login & logout được gọi từ phía client như sau.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| public ActionResult Index() { ViewBag.UserName = Convert.ToString(Session["UserName"]); return View(); } [HttpPost, ValidateJsonAntiForgeryToken] public JsonResult Login(string name, string email) { Session["UserName"] = email; return Json(new { success = "True" }); } [HttpPost, ValidateJsonAntiForgeryToken] public JsonResult LogOut() { Session.Abandon(); return Json(new { success = "True" }); } |
Trong ví dụ này mình cố gắng chỉ làm những bước cơ bản nhất để các bạn dễ hình dung cách thức hoạt động của chức năng này, các bạn có thể download ví dụ ở dưới để xem chi tiết hơn.
0 comments: