default image

Hướng dẫn cách tích hợp đăng nhập facebook vào website

Hiện nay, trang web có chức năng đăng nhập bằng tài khoản Facebook không còn xa lạ gì với nhiều người. Bởi nó mang lại thuận tiện cho người sử dụng. 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.

Tuy nhiên, không phải ai cũng biết cách để đăng nhập facebook vào website. Chúng tôi sẽ hướng dẫn tích hợp đăng nhập facebook vào website chi tiết từng bước trong bài viết dưới đây. Các bạn hãy lưu ngay lại để thực hiện và chia sẻ cho bạn bè cũng biết đến nhé.

1. Các cách tích hợp đăng nhập facebook vào website
Có 2 cách để chúng ta có thể đăng nhập facebook vào website đó là sử dụng và  không sử dụng Facebook SDK. Chúng tôi sẽ tiến hành hướng dẫn tích hợp đăng nhập facebook vào website  từng cách thật chi tiết, bạn đọc hãy theo dõi nhé.

Hướng dẫn cách tích hợp đăng nhập facebook vào website

Đăng nhập bằng tài khoản Facebook không còn xa lạ gì với nhiều người.

Trước tiên, chúng ta cần phải tìm hiểu về quá trình xác thực facebook. Chúng ta sẽ trải qua 4 bước như sau:

  • Bước 1: Đầ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.
  • Bước 2: Người dùng 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.
  • Bước 3: 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ư username, email,…
  • Bước 4: 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.

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

Hướng dẫn cách tích hợp đăng nhập facebook vào website

Tích hợp đăng nhập facebook vào website một cách đơn giản và dễ thực hiện

Chúng tôi sẽ hướng dẫn tích hợp đăng nhập Facebook vào Website  một cách cụ thể và chi tiết chỉ qua 4 bước sau:

  • 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 phù hợp với cá nhân mỗi người. Chúng ta sẽ tiến hành điền các thông tin cơ bản và 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à chúng ta phải ghi nhớ. Lưu ý, ở mục xét duyệt ứng dụng, ta thực hiện đặt ở chế độ công khai.

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

Sau khi đã tạo xong app trên facebook, 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.

Ở thao tác này, chúng ta có các tham số quan trọng như:

- 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

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

Ở bước này, chúng tôi sẽ hướng dẫn tích hợp đăng nhập Facebook vào Website  theo 3 bước nhỏ:

Ở 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

  • 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

Thực hiện tích hợp đăng nhập Facebook vào website bằng cách sử dụng Facebook SDK được tiến hành khá đơn giản. Facebook cung cấp SDK hoặc API để đăng nhập với chức năng facebook trên website.

Hướng dẫn cách tích hợp facebook vào website

Hình thức tích hợp đăng nhập facebook vào website mang lại nhiều thuận tiện cho người sử dụng. 

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.

- get UserData() 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.

- fb Logout() đăng xuất ra khỏi tài khoản Facebook.

Trên đây, chúng tôi đã hướng dẫn tích hợp đăng nhập Facebook vào Website một cách chi tiết, mong rằng bài viết sẽ mang lại nhiều thông tin bổ ích cho khách hàng. Ngoài ra, mình mong rằng với những bước ở 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…

Mọi thông tin chi tiết xin vui lòng liên hệ với chúng tôi thông qua hotline 024.3972.6746 - 024.3972.6747 hoặc truy cập tại website https://thietkeweb.vn/  để đươc tư vấn miễn phí. 


>>> Xem ngay: Top 10 công ty thiết kế website nổi tiếng tại Việt Nam

>>> Có thể bạn quan tâm: Cách thiết kế phần mềm giao diện app hiệu quả với 5 phần mềm miễn phí

Bài viết khác cùng chuyên mục
20 năm kinh nghiệm

20 năm kinh nghiệm

Trong lĩnh vực thiết kế website cho các
doanh nghiệp trong và ngoài nước

Hơn 5000+ Website

Hơn 5000+ Website

Đã được Vinalink hoàn thành trong những năm qua,
với sự hài lòng của khách hàng.

Thiết kế web chuẩn SSC

Thiết kế web chuẩn SSC

Dẫn đầu các xu hướng chuẩn SSC
(SEO - SMO - CRO)