Hướng dẫn tích hợp đăng nhập Facebook vào Website

Hiện nay, chắc hẳn các bạn sẽ bắt gặp rất nhiều trang web có chức năng đăng nhập bằng tài khoản Facebook, điều đó thuận tiện cho người dùng, bởi vì người dùng không phải mất công tạo tài khoản trên trang web mà vẫn có thể đăng nhập để sử dụng các chức năng của thành viên.

Nếu bạn có ý định tích hợp chức năng đăng nhập bằng Facebook cho website của mình thì bài viết này sẽ hướng dẫn cho các bạn làm được điều đó với minh họa bằng ngôn ngữ PHP. Mình sẽ có 2 cách để giúp bạn có thể “tích hợp đăng nhập Facebook vào Website”.

Cách 1: Không sử dụng Facebook SDK
Cách 2: Sử dụng Facebook SDK

Sau bài viết này, nếu bạn nắm được các bước thực hiện, bạn hoàn toàn có thể áp dụng cho các tài khoản khác như Google hoặc mạng xã hội Twitter.

Toàn bộ “Hướng dẫn tích hợp đăng nhập Facebook vào Website” trong bài viết này được tham khảo từ nguồn Facebook ở 2 địa chỉ sau:

1. Hiểu về quy trình xác thực bằng Facebook

Để xác thực bằng facebook chúng ta sẽ trải qua 4 bước cơ bản như sau:

Đầu tiên, từ trang web của mình, chúng ta yêu cầu người dùng cho phép truy cập vào thông tin của người dùng (Từ thông tin này ta sẽ dùng để đăng nhập vào hệ thống). Thực ra ở bước này ta sẽ chuyển hướng người dùng đến trang xác thực của facebook.
Tiếp theo, người dùng sẽ xác nhận và cung cấp cho ta các quyền để truy cập vào thông tin của người dùng.
Sau đó, facebook sẽ chuyển hướng người dùng về lại trang web của ta cùng với thông tin về quyền truy cập mà người dùng đã cho phép.
Từ thông tin facebook trả về, ta sẽ gọi các hàm API của facebook để lấy thông tin của người dùng như user name, email,…
Với những thông tin đã có được, ta tiến hành đăng nhập cho người dùng (chẳng hạn lưu vào session rằng người dùng đã đăng nhập), nếu muốn ta có thể sử dụng thông tin người dùng để lưu vào database.

Tôi đã hệ thống các bước trên lại thành sơ đồ đơn giản như sau:

2. Hướng dẫn tích hợp đăng nhập Facebook vào Website không dùng Facebook SDK

Dưới đây tôi sẽ cố gắng trình bày thật chi tiết và dễ hiểu việc thực hiện sơ đồ trên với một ví dụ đăng nhập đơn giản, sử dụng ngôn ngữ PHP.

(Xin chú ý các bước dưới đây là các bước thực hiện chứ không có quan hệ song song với các bước ở sơ đồ trên)

2.1. Bước 1: Tạo một Facebook App và Setting

Trước tiên, ta cần tạo 1 app trong facebook và cài đặt nó để chạy trên môi trường vdata.com.vn(vì ở đây tôi sẽ ví dụ chạy trên vdata.com.vn, các bạn có thể sửa lại cài đặt cho phù hợp với môi trường riêng của mình)

Tạo 1 app mới tại https://developers.facebook.com/apps/ và điền các thông tin cơ bản:

Ở mục Cài đặt – > Thông tin cơ bản: điền các thông tin yêu cầu:

Ở hình trên ta thấy có 2 thông tin quan trọng là ID ứng dụng và Khóa bí mật của ứng dụng sẽ được sử dụng trong code sau này.

Ở mục Xét duyệt ứng dụng ta thực hiện đặt chế độ công khai cho ứng dụng:

2.2. Bước 2: Tạo trang đăng nhập

File: index.php

Sau khi đã tạo xong app trên facbook, tiếp theo ta tạo trang đăng nhập cho website của mình. Để cho đơn giản, trang đăng nhập của tôi chỉ bao gồm 1 nút đăng nhập. Khi người dùng kích chuột vào đó, nó sẽ nhảy tới trang xác thực của facebook.

Màn hình login

Màn hình xác thực facebook

Code của trang index.php

Ở dòng 12, trong thẻ ta có 2 tham số quan trọng:

client_id: đây là APP ID của app ta vừa tạo
redirect_uri: sau khi người dùng xác thực với facebook xong, facebook sẽ tự động điều hướng người dùng trở lại địa chỉ này. (tại đây ta sẽ xử lý các tham số được gởi về bởi facebook để lấy thông tin người dùng)
scope: yêu cầu truy cập vào thông tin người dùng, vì chỉ cần lấy thông tin cá nhân cơ bản nên scope là public_profile

2.3. Bước 3: Tạo trang xử lý khi người dùng đã xác thực bằng facebook

File: callback.php

Ở bước này ta thực hiện 3 bước nhỏ:

Lấy access token từ giá trị trả về của facebook
Lấy thông tin người dùng từ access token có được
Login người dùng vào hệ thống

Sau khi đã xác thực xong với facbook, người dùng sẽ được chuyển hướng về lại địa chỉ vdata.com.vn/thuvien/fblogin/callback.php

Khi chuyển hướng người dùng trở lại trang callback.php , facebook gởi thêm các thông tin xác thực của người dùng, từ đó ta có thể lấy được thông tin của người dùng vừa xác thực.

Cụ thể ở đây facebook điều hướng người dùng về địa chỉ của ta cùng với một tham số GET code như url sau:

Từ giá trị của code ta sẽ lấy ra được access token để truy cập vào thông tin người dùng bằng cách gọi một HTTP GET request đến địa chỉ có dạng như sau:

Nếu như thành công, ta sẽ nhận được kết quả trả về:

Dưới đây là đoạn code thực hiện các công việc trên:

Để lấy được thông tin người dùng ta gọi đến Facebook Graph API sau:

Thông tin facebook user lấy bằng Graph API

Đoạn code lấy thông tin người dùng bằng Facebook Graph API

Toàn bộ code đầy đủ file callback.php

2.4. Bước 4: Lưu thông tin người dùng nếu muốn

Ở bước 3, sau khi đã lấy thông tin người dùng, các bạn có thể lưu người dùng vào database, hoặc kiểm tra người dùng đã có trên hệ thống chưa …Thông tin bây giờ là của bạn, các bạn có thể làm bất cứ điều gì mình muốn.

3. Hướng dẫn tích hợp đăng nhập Facebook vào Website sử dụng Facebook SDK

Facebook cung cấp SDK hoặc API để đăng nhập với chức năng facebook trên website. Nhưng Facebook SDK cho JavaScript là cách thân thiện mà hầu hết người dùng thường sử dụng để tích hợp chức năng đăng nhập facebook vào website.

Trong JavaScript, chỉ cần Facebook App ID trong FB.init({});

fbLogin() mở hộp thoại đăng nhập để người dùng có thể đăng nhập vào facebook thông qua ủy quyền.
getFbUserData() trích xuất ra thông tin dữ liệu người dùng từ Facebook và hiển thị cũng như trạng thái đăng nhập của người dùng.
fbLogout() đăng xuất ra khỏi tài khoản Facebook.

<script>
window.fbAsyncInit = function() {
    // FB JavaScript SDK configuration and setup
    FB.init({
      appId      : 'InsertYourFacebookAppId', // FB App ID
      cookie     : true,  // enable cookies to allow the server to access the session
      xfbml      : true,  // parse social plugins on this page
      version    : 'v2.8' // use graph api version 2.8
    });
    
    // Check whether the user already logged in
    FB.getLoginStatus(function(response) {
        if (response.status === 'connected') {
            //display user data
            getFbUserData();
        }
    });
};

// Load the JavaScript SDK asynchronously
(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

// Facebook login with JavaScript SDK
function fbLogin() {
    FB.login(function (response) {
        if (response.authResponse) {
            // Get and display the user profile data
            getFbUserData();
        } else {
            document.getElementById('status').innerHTML = 'User cancelled login or did not fully authorize.';
        }
    }, {scope: 'email'});
}

// Fetch the user profile data from facebook
function getFbUserData(){
    FB.api('/me', {locale: 'en_US', fields: 'id,first_name,last_name,email,link,gender,locale,picture'},
    function (response) {
        document.getElementById('fbLink').setAttribute("onclick","fbLogout()");
        document.getElementById('fbLink').innerHTML = 'Logout from Facebook';
        document.getElementById('status').innerHTML = 'Thanks for logging in, ' + response.first_name + '!';
        document.getElementById('userData').innerHTML = '<p><b>FB ID:</b> '+response.id+'</p><p><b>Name:</b> '+response.first_name+' '+response.last_name+'</p><p><b>Email:</b> '+response.email+'</p><p><b>Gender:</b> '+response.gender+'</p><p><b>Locale:</b> '+response.locale+'</p><p><b>Picture:</b> <img src="'+response.picture.data.url+'"/></p><p><b>FB Profile:</b> <a target="_blank" href="'+response.link+'">click to view profile</a></p>';
    });
}

// Logout from facebook
function fbLogout() {
    FB.logout(function() {
        document.getElementById('fbLink').setAttribute("onclick","fbLogin()");
        document.getElementById('fbLink').innerHTML = '<img src="fblogin.png"/>';
        document.getElementById('userData').innerHTML = '';
        document.getElementById('status').innerHTML = 'You have successfully logout from Facebook.';
    });
}
</script>

HTML

Xem thêm tại đây: https://www.codexworld.com/login-with-facebook-using-javascript-sdk/

Hy vọng, với những bước đơn giản ở trên, các bạn có thể tự nắm được cách xác thực của facebook để lấy thông tin người dùng, hoặc bằng một vài thay đổi nhỏ ở bước 1, các bạn hoàn toàn có thể yêu cầu người dùng cung cấp quyền post bài viết, upload ảnh … các bạn nên đọc thêm ở 2 link mình đã dẫn ra ở trên để có thể làm được điều này.

https://developers.facebook.com/docs/facebook-login/web
https://developers.facebook.com/docs/facebook-login/manually-build-a-login-flow

Ngoài ra, mình mong rằng với Hướng dẫn tích hợp đăng nhập Facebook vào Website ở trên, các bạn cũng có thể tự mình viết được những đoạn mã xác thực cho các mạng xã hội khác như google, twitter…

Có thể bạn quan tâm: Cách ẩn nick Facebook không cho người khác thấy khi Online

Nguồn bài đăng: LADIGI Academy Company Link: https://ladigi.vn/huong-dan-tich-hop-dang-nhap-facebook-vao-website

Search This Blog

LADIGI.VN - Đào tạo và tư vấn giải pháp Digital Marketing