Giới thiệu

Trong phần 2, chúng ta đã tìm hiểu cách tích hợp tính năng đăng nhập và đăng ký bằng Google với EzyLogin. Trong phần này, chúng ta sẽ tiếp tục khám phá một tính năng quan trọng không kém - Đăng nhập với Facebook.

Facebook là một trong những nền tảng mạng xã hội rộng rãi nhất với hơn 2,96 tỷ người sử dụng hàng tháng tính đến quý 1 năm 2023. Tính năng đăng nhập bằng Facebook được ưa chuộng nhờ vào sự tiện lợi, nhanh chóng và độ an toàn cao hơn so với các phương thức đăng nhập như Gmail truyền thống.

Bài viết này sẽ hướng dẫn bạn cách tích hợp tính năng Đăng nhập với Facebook vào ứng dụng web thông qua EzyLogin để mở rộng khả năng tiếp cận người dùng, cải thiện trải nghiệm và tiết kiệm chi phí phát triển hệ thống đăng nhập riêng.

Chuẩn bị

Để bắt đầu, bạn cần cài đặt và cấu hình EzyPlatform. Nếu bạn chưa quen thuộc với EzyPlatform, hãy tham khảo hướng dẫn từ bài viết EzyPlatform - Giới thiệu về nền tảng Lập trình từ người Việt.

I. Kích hoạt plugin EzyLogin

Khi đã cài đặt EzyPlatform, bạn cần kích hoạt plugin EzyLogin để tích hợp chức năng đăng nhập một cách nhanh chóng. Hướng dẫn chi tiết cách thực hiện có thể tìm thấy trong bài viết EzyLogin Phần 1.

II. Đăng ký Dịch Vụ Facebook App

Để sử dụng tính năng đăng nhập bằng Facebook, bạn cần đăng ký dịch vụ của Facebook. Điều này giúp Facebook nhận biết về ứng dụng của bạn và những dữ liệu bạn cần truy cập.

Dưới đây là hướng dẫn đăng ký trong môi trường thử nghiệm (localhost). Nếu sau này muốn triển khai trên một tên miền thực tế, bạn có thể chuyển sang chế độ "Live Mode" và làm theo hướng dẫn của Facebook.

1. Tạo hoặc Đăng nhập tài khoản Meta for Developers

Truy cập trang Facebook for Developers và chọn "Get Started" để tạo tài khoản mới hoặc đăng nhập nếu bạn đã có tài khoản.

Bước 1: Chấp nhận điều khoản và chính sách cho nhà phát triển của Meta, sau đó chọn "Continue".

Bước 2: Rà soát địa chỉ email, cập nhật hoặc xác nhận để tiếp tục. Để cập nhật email, chọn "Update Email" rồi nhập địa chỉ email vào ô "Primary email" và ấn "Send Verification Email".

Bước 3: Chọn vai trò như "Developer" và nhấp "Complete Registration" để hoàn tất.

2. Tạo My Apps trên Meta for Developer

Sau khi đăng nhập thành công, chọn "My Apps" hoặc "Apps" để vào trang tạo Apps. Ở đây bạn có thể chọn ứng dụng hiện có hoặc tạo một ứng dụng mới. Nếu chưa có ứng dụng, hãy chọn "Create App" và ấn "Next". Chọn mục đích sử dụng, chọn "Other" và nhấn "Next".

Chọn loại ứng dụng, chọn "Consumer" và tiếp tục ấn "Next". Cuối cùng, nhập tên ứng dụng và bấm "Create App" để hoàn tất. Sau đó, nhập mật khẩu tài khoản và chọn "Submit".

3. Thiết lập thông tin cần thiết cho Facebook Login

Từ bảng điều khiển Dashboard, chọn "Set up" ở mục Facebook Login. Chọn "Web" với biểu tượng www. Tiếp theo, bạn sẽ cần nhập địa chỉ URL trang web của mình. Nếu chạy trên localhost, bạn có thể nhập: http://localhost:8080/. Sau đó bấm "Save" > "Continue".

Tại các bước tiếp theo, bạn có thể chọn "Next" để tiếp tục cho đến khi hoàn tất.

4. Lấy App ID và App Secret

Chuyển đến "App settings" > "Basic" để lấy APP ID và App Secret. Đây là hai thông tin cần thiết để cài đặt Facebook Login qua EzyLogin. Hãy ghi lại chúng và giữ bí mật.

Cấu hình EzyLogin

Sau khi có APP ID và App Secret, bạn vào mục "EzyLogin" trên thanh điều hướng bên trái.

1. Cài đặt Thông thường (Regular Settings)

Tại đây bạn có thể cấu hình cho phần đăng nhập và đăng ký. Để tìm hiểu thêm về các tùy chọn cấu hình, vui lòng tham khảo hướng dẫn tại Regular Setting.

2. Cài đặt Google (Google Settings)

Tại đây cho phép bạn cấu hình cho phần đăng nhập với Google. Chi tiết có thể tìm thấy ở Google Settings.

3. Cài đặt Facebook (Facebook Settings)

Tại mục này, bạn hãy cấu hình cho phần đăng nhập với Facebook:

• Display Name: Tên hiển thị trên trang đăng nhập.
• Client ID: App ID từ Meta for Developers.
• Client Secret: App Secret từ Meta for Developers.
• Redirect URI: URI chuyển hướng đã đăng ký.
• Authentication Url: URL xác thực của Facebook (thường không thay đổi).
• Get Token URL: URL lấy mã thông báo (token) từ Facebook (thường không thay đổi).
• Enable: Bật hoặc tắt tính năng đăng nhập qua Facebook.

Các trường có dấu (*) là bắt buộc và phải được điền chính xác để chức năng đăng nhập hoạt động trơn tru. Hãy điền thông tin chính xác vào phần cấu hình Facebook Settings.

4. Tính năng Đăng nhập qua Oauth 2.0

Tính năng này sẽ được hướng dẫn chi tiết ở các phần sau.

Chạy thử EzyLogin

Sau khi cấu hình thành công, bạn có thể tích hợp vào plugin của mình theo hướng dẫn có tại đây. Để thử nghiệm tích hợp, bạn có thể sử dụng chủ đề ELearning trên nền tảng EzyPlatform. Các bước thực hiện tương tự như trong EzyLogin Phần 1.

1. Tính năng Đăng nhập với Facebook

Khi trang thực hiện tính năng này, bạn sẽ thấy tùy chọn "Continue with Facebook Account". Nhấn cho phép và hoàn tất đăng nhập.

Khi bạn đăng nhập thành công, hệ thống sẽ chuyển hướng đến trang chính của ứng dụng. Chúc mừng bạn đã tích hợp thành công tính năng đăng nhập với Facebook vào ứng dụng web của mình!

Tạm kết

Trong phần này, chúng ta đã tìm hiểu cách tích hợp tính năng đăng nhập với Facebook vào ứng dụng web thông qua EzyLogin. Việc này sẽ mở rộng phạm vi tiếp cận người dùng, cải thiện trải nghiệm và giảm chi phí phát triển hệ thống đăng nhập. Ở phần tiếp theo, chúng tôi sẽ hướng dẫn tích hợp tính năng đăng nhập thông qua Oauth 2.0. Nếu bạn có bất kỳ câu hỏi nào, hãy để lại ý kiến của bạn. Chúng ta sẽ tiếp tục khám phá và học hỏi cùng nhau!

Ngoài ra, đừng quên tham khảo các bài viết khác trong series EzyLogin để tìm hiểu các tính năng khác:

• EzyLogin Phần 1: Tích hợp Tính năng Đăng nhập và Đăng ký Cơ bản
• EzyLogin Phần 2: Tích hợp Đăng nhập với Google vào Ứng dụng Web
• EzyLogin Phần 4: Tích hợp Tính năng Đăng nhập qua Oauth 2.0
  source: viblo