Social Login ngày càng trở thành một tính năng phổ biến trong các ứng dụng và website hiện đại. Hãy cùng tìm hiểu các bước tích hợp Social Login vào ứng dụng hoặc website. Trước tiên, chúng ta sẽ tìm hiểu khái niệm và nguyên lý hoạt động.

Social Login là gì?

Social Login là phương thức cho phép người dùng sử dụng tài khoản hiện có trên các nền tảng mạng xã hội như Facebook, Google, Twitter,... để đăng nhập vào một ứng dụng hoặc website khác mà không cần đăng ký tài khoản mới. 

Phương thức này giúp người dùng đăng nhập nhanh chóng và thuận tiện. Đồng thời, ứng dụng và website có thể dễ dàng thu thập một số thông tin cơ bản của người dùng. 

Cách thức hoạt động

Quy trình Social Login được thực hiện thông qua OAuth – một giao thức cấp quyền truy cập. Ứng dụng sẽ yêu cầu quyền truy cập vào một số thông tin từ tài khoản mạng xã hội của người dùng. Sau khi người dùng đồng ý, nền tảng mạng xã hội sẽ cung cấp một Token cho ứng dụng, cho phép ứng dụng truy cập vào những thông tin đã được cấp quyền. 

Cấu hình Social Login

Để tích hợp Social Login, trước tiên chúng ta cần tạo tài khoản và cấu hình trên các nền tảng mạng xã hội mà ứng dụng hoặc website sẽ sử dụng để đăng nhập. Trong bài viết này, chúng ta sẽ sử dụng Google, Twitter và GitHub. Sau đó, thiết lập một bên thứ ba để xác thực đăng nhập, chẳng hạn như Firebase.

Cấu hình Google để tích hợp Social Login

  1. Truy cập https://console.cloud.google.com/ và đăng nhập bằng tài khoản Google của bạn.
  2. Sau khi đăng nhập, giao diện sẽ hiển thị như hình bên dưới. Nhấn Select a project.
  1. Nhấn DỰ ÁN MỚI
  1. Điền các thông tin Tên Dự Án. Người dùng sẽ nhìn thấy tên này khi tiếp tục đăng nhập. Lưu ý rằng tên này không thể thay đổi sau khi đã được thiết lập. Địa điểm mục này có thể được thiết lập ở chế độ mặc định. Sau khi hoàn tất, nhấn “Create”.
  1. Sau khi tạo project thành công, giao diện sẽ hiển thị như hình bên dưới. Nhấn APIs & Services, và chọn Credentials.
  1. Tiếp theo, chúng ta cần cấu hình Client ID. Thông tin này giúp Google nhận diện và xác minh ứng dụng của bạn, từ đó xác thực và cấp quyền truy cập vào thông tin tài khoản Google. Tuy nhiên, trước tiên bạn cần cấu hình OAuth Consent Screen. Đây là màn hình hiển thị khi người dùng cấp quyền cho ứng dụng truy cập vào các thông tin được bảo vệ, chẳng hạn như thông tin tài khoản Google. Nhấn CONFIGURE CONSENT SCREEN ngay bên góc phải trên màn hình
  1. External→ Cho phép tất cả người dùng có tài khoản Google sử dụng ứng dụng.
    Internal→ Chỉ cho phép người dùng có tài khoản Google thuộc cùng tổ chức với bạn sử dụng ứng dụng. Trong trường hợp này, chúng ta chọn External.
  1. Điền thông tin, điền đầy đủ các thông tin được yêu cầu. Các trường có dấu (*) là những thông tin bắt buộc. Sau khi hoàn tất, chọn SAVE AND CONTINUE.
  1. Trong Scopes tab, bạn sẽ cấu hình chi tiết ứng dụng của bạn sẽ yêu cầu từ người dùng. Sau đó, nhấn Sau khi hoàn tất, chọn SAVE AND CONTINUE. và chọn BACK TO DASHBOARD
  1. Sau khi cấu hình OAuth Consent Screen, quay lại tab Credentials và chọn CREATE CREDENTIALS → OAuth client ID. Tại trường Application type, chọn “Web application”.
  1. Authorized JavaScript origins: Đây là địa chỉ máy chủ (host) của website của bạn.
    Authorized redirect URIs: Đây là URL mà người dùng sẽ được chuyển hướng đến sau khi xác thực thành công. Sau khi điền đầy đủ các thông tin như trong hình, chọn “CREATE”.
  1. Sau khi tạo Client ID thành công, sao chép Client ID và Client Secret vào file .env.
    VITE_GOOGLE_LOGIN_CLIENT_ID=Client ID VITE_GOOGLE_LOGIN_CLIENT_SECRET=Client secret 

Tích hợp Đăng nhập Mạng xã hội với Twitter

  1. Truy cập https://developer.x.com/en và đăng ký tài khoản Developer. Quy trình đăng ký tương tự như khi tạo một tài khoản Twitter thông thường.
  2. Sau khi đăng ký thành công, giao diện sẽ hiển thị như hình bên dưới. Theo mặc định, hệ thống sẽ tự động tạo sẵn một ứng dụng (App) cho bạn.
  1. Select “Overview” (1) → “Install” (2) → In the “User authentication settings” section, select “Set up“
  1. Trong phần “App permissions”, chọn quyền phù hợp với ứng dụng của bạn. Đối với phần “Type of app”, chọnWeb App, Automated App or Bot". Trong "App info" phần, nhập một URL tạm thời hợp lệ vào trường Callback URI / Redirect URL trong trường này để hoàn tất cấu hình. Bạn sẽ thay đổi URL này sau khi cấu hình Firebase ở bước (1*). Đối với Website URL, Nhập đường dẫn website của bạn. Lưu ý: Bạn không thể sử dụng localhost, vì vậy cần triển khai website hoặc sử dụng một URL hợp lệ khác. Sau khi điền đầy đủ thông tin, nhấn SaveHãy đảm bảo lưu Client ID và Client Secret vào file .env.
  1. Chọn “Keys and Tokens” → “Regenerate” để tạo lại API Key và API Key Secret. Hãy nhớ lưu API Key và API Key Secret để cấu hình Firebase ở bước (2*).

Integrate Github cho Login

  1. Go to https://github.com/settings/profile. In the Developer Settings tab → chọn OAuth Apps
  2. Chọn New OAuth App
  1. Điền tất cả thông tin Authorization callback URL (3) tạm thời đặt thành* http:localhost:3000, sau đó sẽ được thay thế bằng liên kết từ Firebase ở bước tiếp theo.
  1. Lưu Client ID và Client Secret vào file .env ở bước (4).
    VITE_GITHUB_CLIENT_ID=Client ID

    VITE_GITHUB_CLIENT_SECRET=Client secrets

Cấu hình Firebase để tích hợp Social Login

  1. Đăng ký https://console.firebase.google.com/u/1/ bằng cách sử dụng tài khoản Google. Sau đó, chọn Hãy bắt đầu với 1 dự án Firebase để bắt đầu.
  1. Điền đầy đủ các thông tin cần thiết, sau đó nhấn Continue hai lần và chọn Create project. Bạn cần chờ một lúc để hệ thống hoàn tất việc cấu hình project.
  1. Sau khi tạo 1 dự án, chọn Authentication, tiếp theo chọn Get started, và cuối cùng click Sign-in method. Việc đầu tiên, chúng tôi phải cấu hình Twitter
  1. Select Twittervà nhập API Key và API Secret đã lấy ở bước (2*). Sao chép Handler Link và dán vào trường Callback URI / Redirect URL ở bước (1)*. Sau đó, nhấn Save
  1. Chọn Add new provider → GitHub. Nhập Client ID và Client Secret đã tạo ở bước (3).* Sau đó, sao chép URL Handler và điền vào trường Authorization Callback URL ở bước (3).* Nhấn Save.
  1. Để lấy the Firebase thông tin cấu hình cho web, chúng tôi click Project settings in the Project Overview tab. Choose icon </>
  1. Điền tất cả các thông tin vào form và sau đó chọn Register App
  1. Nhập các thông tin trong phần firebaseConfig vào các trường tương ứng trong file .env.
    VITE_FIREBASE_PROJECT_ID=projectId
    VITE_FIREBASE_API_KEY=apiKey
    VITE_FIREBASE_MESSAGE_SENDER_ID=messagingSenderId
    VITE_FIREBASE_AUTH_DOMAIN=authDomain
    VITE_FIREBASE_STORAGE_BUCKET=storageBucket
    VITE_FIREBASE_APP_ID=appId
    VITE_FIREBASE_MEASUREMENT_ID=measurementId

Màn hình hướng dẫn cho đăng nhập mạng xã hội

Login with Google

  1. Select Log in with Google
  1. Chọn tài khoản của bạn, hay đăng ký tài khoản khác
  1. Bạn sẽ nhận được thông báo đăng ký thành công.

Login vào Twitter

  1. Select Log in with Twitter
  1. Chọn Authorize App
  1. Bạn sẽ nhận được thông báo đăng ký thành công.

Login vào Github

  1. Select Log in with Github
  1. Nhấn Authorize button
  1. Bạn sẽ nhận được thông báo đăng ký thành công.

Luồng màn hình

Sơ đồ dưới đây minh họa quy trình Social Login cho một ứng dụng Web. Các bước thực hiện như sau:
1. Đăng nhập - Người dùng bắt đầu đăng ký tài khoản trên một nền tảng mạng xã hội bất kỳ.

● Nếu đăng nhập không thành công:
Người dùng được chuyển trở lại trang localhost:3000/login để thử đăng nhập lại.
● Nếu đăng nhập thành công:
Hệ thống chuyển hướng đến localhost:3000 và tiếp tục đến bước Decision: Kiểm tra trạng thái đăng nhập.

2. Quyết định: Kiểm tra trạng thái đăng nhập - Hệ thống kiểm tra xem người dùng đã đăng nhập hay chưa.

● Nếu người dùng đã đăng nhập:
Hệ thống hiển thị màn hình sau đăng nhập tương ứng với nền tảng mạng xã hội mà người dùng đang truy cập.
Sau đó, chuyển đến endpoint.
● Nếu người dùng chưa đăng nhập:
Hệ thống chuyển người dùng đến trang đăng nhập tại localhost:3000/login.

Sơ đồ dưới đây mô tả cách Social Login hoạt động.

Cuối cùng, hy vọng sau khi đọc bài viết này, bạn có thể tự mình triển khai tích hợp Social Login cho ứng dụng. Các bước thực hiện khá đơn giản và dễ dàng áp dụng. Nếu bạn đang có nhu cầu phát triển website hoặc ứng dụng có tích hợp Social Login, hãy tìm hiểu thêm về dịch vụ phát triển phần mềm của SparkMinds. Custom Web/App Implementation Service và hãy liên hệ để nhận báo giá.