Tích hợp đăng nhập bằng tài khoản facebook vào website

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.

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.

$('.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.

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

$('.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.

 $('.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.

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.

 

Download Source

Related Post


Convert HTML to PDF dễ dàng với thư viện Select.Pdf
Tuesday, August 15, 2017
Select.Pdf là một thư viện hỗ trợ các lập trình viên .Net chuyển đổi HTML sang PDF một cách dễ dàng. Trước khi dùng thư viện này thì mình có sử dụng iTextSharp, nhưng thấy Select.Pdf không bị lỗi định dạng css như thằng iTextSharp mà mình thỉnh thoảng vẫn gặp.
Tìm hiểu về Async và Await trong Asp.Net
Monday, August 7, 2017
Lập trình bất đồng bộ (Asynchronous Programing) là cách viết code để nhiều phương thức có thể chạy cùng một lúc mà không phải chờ đợi phụ thuộc vào nhau, nó khác với lập trình tuần tự (Synchronous Programing) là phương thức A hoàn thành rồi mới chạy đến phương thức B. Việc ứng dụng lập trình bất đồng bộ để xử lý các hàm không phụ thuộc vào nhau chạy một cách đồng thời sẽ đem lại hiệu quả đáng kể đối với tốc độ chương trình và trải nghiệm người dùng, kể từ .Net 4.5  việc lập trình bất đồng bộ sẽ đơn giản hơn trước với sự hỗ trợ của cặp từ khóa Async & Await.
Search

Đăng ký nhận bài mới


Category

Blog Archive