Bằng cách đăng ký và đăng nhập tài khoản vào một trang web mua hàng, Khách mua hàng đã tự "định danh" trên trang web đó. Khi đó việc tương tác với Nhà bán hàng dễ dàng hơn cũng như đem lại một số tiện ích nhất định:

  • Đối với Khách mua hàng: đăng ký thành viên, tích lũy điểm, nhận khuyến mãi, không cần nhập lại thông tin khi mua hàng,...

  • Đối với Nhà bán hàng: nắm được thông tin khách hàng, theo dõi hành vi,..

Tuy nhiên, đôi khi khách mua hàng không muốn sử dụng đăng ký tài khoản mới mà thực hiện liên kết thẳng với tài khoản Facebook, Google của họ.

Vậy thì làm sao giải quyết vấn đề đó? 

Ứng dụng Social Login Plus sẽ giải quyết điều đó!

Mục lục

1. Tổng quan về ứng dụng Social Login

Social Login là ứng dụng được cung cấp hoàn toàn miễn phí, do nhóm Haravan Partners phát triển.

Social Login được ra đời nhằm mục đích đáp ứng việc đăng nhập bằng tài khoản Facebook, Google,..

Với ứng dụng Social Login Plus:

  • Khách mua hàng trên website dễ dàng đăng ký và đăng nhập mua hàng bằng các tài khoản social như Facebook, Google.

  • Nhà bán hàng dễ dàng biết được tên và email của người mua ngay khi họ vừa đăng nhập

  • Tăng tỉ lệ đăng ký tài khoản lên đến 90%.

2. Cài đặt ứng dụng

  1. Nhà bán hàng truy cập vào trang ứng dụng Social Login Plus.

  2. Chọn Cài đặt ứng dụng.

  3. Hệ thống hiển thị thông tin admin shop cần kết nối app Social Login Plus và Nhà bán hàng chọn vào Admin cần cài đặt app (nếu có)

  4. Hệ thống điều hướng về Trang quản trị Haravan. Tại đây, Nhà bán hàng chọn "Cài ứng dụng Social Login".




  1. Khi ứng dụng được cài đặt thành công, hệ thống tự động điều hướng về trang ứng dụng Social Login.




3. Cấu hình hiển thị cho ứng dụng

Sau khi cài đặt ứng dụng vào Trang quản trị Haravan, Nhà bán hàng cần thực hiện thêm một thao tác nữa thì ứng dụng mới có hiệu lực. Đó là cấu hình hiển thị cho ứng dụng.

  1. Từ Trang quản trị Haravan -> Ứng dụng -> Social Login Plus.


  2. Trong trang ứng dụng Social Login Plus, Nhà bán hàng vào mục Widget.

  3. Nhà bán hàng sao chép một trong hai đoạn mã.




  4. Nhà bán hàng vào tiếp mục Website -> Giao diện -> Hiệu chỉnh theme.

  5. Nhà bán hàng chọn vị trí cần dán (ví dụ đặt trong login.liquid hay register.liquid).

  6. Nhà bán hàng dán đoạn mã và Lưu lại.  

Lưu ý: Nhà bán hàng chỉ cần dán một trong hai đoạn mã trong mục Widget. Haravan khuyến cáo Nhà bán hàng lựa chọn đoạn mã 1 được đánh giá là mã hóa tốt hơn.

4. Tùy chỉnh CSS cho nút đăng ký/đăng nhập 

Sau khi cài đặt và cấu hình hiển thị cho ứng dụng, bây giờ website của Nhà bán hàng đã có chức năng đăng nhập bằng tài khoản social.

Trong trường hợp Nhà bán hàng muốn tùy chình nút đăng ký/đăng nhập về màu sắc, font chữ,... thì Nhà bán hàng có thể tùy chỉnh CSS ngay trong ứng dụng.

  1. Từ Trang quản trị Haravan -> Ứng dụng -> Social Login Plus.


  2. Trong trang ứng dụng Social Login Plus, Nhà bán hàng chọn mục Tùy chỉnh CSS.

  3. Nhà bán hàng viết đoạn mã vào ô trống.




  4. Chọn Cập nhật để lưu thiết lập.

5. Cấu hình Multipass

Để lấy Multipass, bạn vào Cấu hình → Thanh toán

Copy đoạn mã Multipass 

Sau đó bạn thực hiện gắn mã Multipass này vào mục Multipass Secret


6. Cấu hình Facebook

Tại lần đầu tiên đăng nhập vào ứng dụng, hệ thống sẽ tự động cấu hình Client ID và Client Secret theo Haravan (dành cho cả Cấu hình Facebook và Cấu hình Google). Lúc này Nhà bán hàng có thể không cần cấu hình lại Client ID và Client Secret, chỉ cần thực hiện thao tác gắn đoạn mã tại widget vào vị trí mong muốn trên web theme.

Lưu ý: Vì lý do bảo mật, Client Secret sẽ không hiển thị lên giao diện ứng dụng.

Trường hợp khách hàng mong muốn sử dụng Client ID và Client Secret của riêng mình, hãy thực hiện như thao tác dưới đây:

Cách dán mã vào ứng dụng Social Login Plus

Bước 1: Nhà bán hàng truy cập vào trang ứng dụng Social Login Plus.

Bước 2: Nhập Client ID (1) và Client Secret (2)

Trường hợp Nhà bán hàng muốn sử dụng Client ID và Client Secret mặc định do Haravan hỗ trợ, hãy nhấn chọn vào nút Client mặc định

Bước 3: Nhấn chọn Cập nhật.

Bây giờ Nhà bán hàng có thể theo dõi được lượng người tương tác với Website của bạn thông qua cổng đăng nhập nhanh Social Login Plus.

7. Cấu hình Google

Hệ thống đã tự động cấu hình mặc định Client ID và Client Secret tại lần đầu tiên đăng nhập vào ứng dụng, trường hợp Nhà bán hàng mong muốn sử dụng Client ID và Client Secret riêng của mình. Hãy thực hiện như thao tác dưới đây:

Bước 1: Nhà bán hàng truy cập vào trang ứng dụng Social Login Plus.

Bước 2: Nhập Client ID (1) và Client Secret (2)

Trường hợp Nhà bán hàng muốn sử dụng Client ID và Client Secret mặc định do Haravan hỗ trợ, hãy nhấn chọn vào nút Client mặc định.

Bước 3: Nhấn chọn Cập nhật

8. Thiết lập đăng nhập nhanh bằng Google One Tap

Google One Tap là một trong những phương thức đăng nhập mới của Google, giúp người dùng đăng nhập/tạo tài khoản trên website mua hàng một cách nhanh chóng. 



Để thiết lập Google One Tap Login, bạn thực hiện:

Bước 1: Tạo project tại Google Developers Console nếu bạn chưa khởi tạo project nào trước đây.

Bước 2: Vào tab Credentials, chọn Create project



Bước 3: Nhập thông tin project  -> chọn Create



Bước 4: Sau khi đã tạo thành công project, bạn chọn Create credentials và chọn OAuth client ID tại project vừa tạo.



Bước 5: Nếu bạn chưa cấu hình Oauth consent screen thì Google sẽ hiển thị giao diện như dưới đây. Bạn hãy nhấn vào Configure consent screen


Lưu ý: Nếu đã configure consent screen thì hãy chuyển đến bước 6


Bước 5.1: Nhấn chọn External và nhấn Create



Bước 5.2: Nhập App name là Social Login Plus, nhập User support email để khách hàng có thể liên hệ bạn khi có thắc mắc 



Bước 5.3: Tại developer contact information, nhập email của bạn hoặc của đội ngũ kĩ thuật để Google có thể gửi thông tin khi có thay đổi trên project của bạn -> chọn Save and Continue



Bước 6: Quay lại tab Credentials, chọn Create credentials và chọn OAuth client ID

Lưu ý: Đối với Google One Tap bạn có thể để trống mục này nhưng đối với trường hợp cấu hình đăng nhập bằng nút login của Google thì mục Authorized redirect URls là cần thiết.


Sau khi điền các thông tin trên, hãy nhấn Create



Bước 7: Lúc này Google đã tạo cho bạn một Client ID và Client Secret -> Copy 2 dãy Client ID và Client Secret và dán vào trong Cấu hình Google (One Tap) tại ứng dụng Social Login Plus -> Chọn Cập nhật để hoàn tất

Sau khi hoàn tất cấu hình tại màn hình đăng nhập, khách hàng sẽ được chọn các phương thức đăng nhập theo như cấu hình:

  • Đăng nhập bằng Google

  • Đăng nhập bằng Google One Tap

  • Đăng nhập bằng Facebook