Home / WordPress / WordPress Plugins / Tích hợp đăng nhập Google, Facebook, Twitter vào website

Tích hợp đăng nhập Google, Facebook, Twitter vào website

Bạn sử dụng website WordPress và muốn tích hợp chức năng đăng nhập từ tài khoản mạng xã hội như Facebook, Google, Twitter… nhưng bạn không dành code. Vậy phải làm thế nào đây? Không sao với WordPress hiện tại có rất nhiều Plugin giúp bạn tích hợp tính năng login từ social (MXH). Bài viết này mình giới thiệu bạn Plugin miễn phí đó là Nextend Social Login.

Giới thiệu Nextend Social Login

Với hơn 200.000 cài đặt hoạt động như chúng ta nói, Nextend Social Login có lẽ là plugin đăng nhập xã hội miễn phí phổ biến nhất trên WordPress.org.

Trong vài phút, bạn có thể kích hoạt đăng ký người dùng và đăng nhập thông qua Facebook, Twitter và Google. Đúng vậy, plugin Nextend Social Login tập trung vào ba mạng xã hội phổ biến nhất.

Bây giờ, bạn không phải buộc người dùng điền vào các mẫu đăng ký mặc định hoặc dài; plugin đăng nhập xã hội WordPress này tích hợp liền mạch với các biểu mẫu đăng nhập và đăng nhập WordPress hiện có của bạn.

Trên trang hồ sơ WordPress, người dùng có thể dễ dàng liên kết hoặc hủy liên kết các tài khoản xã hội mà không bị đổ mồ hôi. Ngoài ra, người dùng có thể truy cập tài khoản người dùng WordPress của họ có hoặc không có tài khoản xã hội.

Các tính năng đáng chú ý khác bao gồm khả năng sử dụng hình ảnh hồ sơ mạng xã hội như hình đại diện WordPress, chuyển hướng tùy chỉnh sau khi đăng nhập xã hội, widget, mã ngắn, thiết kế dễ tùy chỉnh, hỗ trợ nhanh và tiện ích bổ sung có nhiều tính năng hơn.

Hướng dẫn sử dụng Nextend Social Login

Để cài đặt: Bạn tìm kiếm plugin “Nextend Social Login” tại trang quản trị và cài đặt như các Plugin khác.

Ngoài ra bạn có thể tải trực tiếp tại trang chủ: https://nextendweb.com/social-login/

Bước 1: Sau khi cài đặt và kích hoạt Plugin bạn vào mục Setting (Cài Đặt) -> Chọn Nextend Social Login

Bước 2: Tại mục Provider bạn sẽ thấy các mạng xã hội phổ biến mà plugin hỗ trợ tích hợp với tài khoản miễn phí thì hỗ trợ các MXH như: Facebook, Google. Twitter

Bước 3: Bạn muốn tích hợp đăng nhập từ đâu thì click vào nút Getting Started và bạn được được đến trang hướng dẫn bạn cách tạo App và lấy mã API (Client ID và Client Secret).

Bước 4: Khi làm theo hướng dẫn thành công bạn đã tạo được mã Client ID và Client Secret thì bạn nhấn vào nút I am done setting up my Twitter/Facebook/Google App để đưa đến trang Setting.

Bước 5: Tại mục Setting bạn nhập 2 mã đã tạo vào. Nhấp Save Changes bên dưới

Bước 6: Sau đó bạn nhấp tiếp vào nút Verify Setting để xác minh tài khoản và Enable để bật chức năng đăng nhập là xong.

Ngoài ra bạn có thể tìm hiểu thêm các chức năng ở mục Buttons để tùy chỉnh cách hiển thị nút đăng nhập và Usage để lấy mã Shortcode để nhúng vào web.

Xem thêm:

Note: Phần bên dưới này có hướng dẫn trong Plugin tại Bước 3 rồi, mình lưu lại để sau này có quên thì đọc lại thôi bạn không cần quan tâm nhé

Hướng dẫn tạo App để lấy mã Client ID và Client Secret

Lấy mã Client ID và Client Secret Google

Getting Started

To allow your visitors to log in with their Google account, first you must create a Google App. The following guide will help you through the Google App creation process. After you have created your Google App, head over to “Settings” and configure the given “Client ID” and “Client secret” according to your Google App.

Create Google App

  1. Navigate to https://console.developers.google.com/apis/
  2. Log in with your Google credentials if you are not logged in.
  3. If you don’t have a project yet, you’ll need to create one. You can do this by clicking on the blue “Create Project” text on the right side! ( If you already have a project, then in the top bar click on the name of your project instead, which will bring up a modal and click “New Project”. )
  4. Name your project and then click on the “Create” button again!
  5. Once you have a project, you’ll end up in the dashboard. ( If earlier you have already had a Project, then make sure you select the created project in the top bar! )
  6. Click the “OAuth consent screen” button on the left hand side.
  7. Choose a User Type according to your needs and press “Create“. If you want to enable the social login with Google for any users with a Google account, then pick the “External” option!
    • Note: We don’t use sensitive or restricted scopes either. But if you will use this App for other purposes too, then you may need to go through an Independent security review!
  8. Enter a name for your App to the “App name” field, which will appear as the name of the app asking for consent.
  9. For the “User support email” field, select an email address that users can use to contact you with questions about their consent.
  10. Under the “Authorized domains” section press the “Add Domain” button and enter your domain name, probably: localhost without subdomains!
  11. At the “Developer contact information” section, enter an email address that Google can use to notify you about any changes to your project.
  12. Press “Save and Continue” then press it again on the “Scopes”, “Test users” pages, too!
  13. On the left side, click on the “Credentials” menu point, then click the “+ Create Credentials” button in the top bar.
  14. Choose the “OAuth client ID” option.
  15. Select the “Web application” under Application type.
  16. Enter a “Name” for your OAuth client ID.
  17. Under the “Authorised redirect URIs” section click “Add URI” and add the following URL:
    • http://yourwebsite.com/wp-login.php?loginSocial=google
  18. Click on the “Create” button
  19. A modal should pop up with your credentials. If that doesn’t happen, go to the Credentials in the left hand menu and select your app by clicking on its name and you’ll be able to copy-paste the “Client ID” and “Client Secret” from there.

Lấy mã Client ID và Client Secret Facebook

Getting Started

To allow your visitors to log in with their Facebook account, first you must create a Facebook App. The following guide will help you through the Facebook App creation process. After you have created your Facebook App, head over to “Settings” and configure the given “App ID” and “App secret” according to your Facebook App.

Create Facebook App

  1. Navigate to https://developers.facebook.com/apps/
  2. Log in with your Facebook credentials if you are not logged in.
  3. Click on the “Create App” button and in the Popup choose the “Consumer” App type!
  4. If you see the message “Become a Facebook Developer“, then you need to click on the green “Register Now” button, fill the form then finally verify your account.
  5. Fill “App Display Name“, “App Contact Email“. The specified “App Display Name” will appear on your Consent Screen!
  6. Optional: choose a “Business Manager Account” in the popup, if you have any.
  7. Click the “Create App” button and complete the Security Check.
  8. Find “Facebook Login” and click “Set Up“.
  9. Select “Web” and enter the following URL to the “Site URL” field: https://yourwebsite.com
  10. Press “Save”.
  11. Click on the “Settings” option what you find on the left side, under “Products – Facebook Login
  12. Add the following URL to the “Valid OAuth redirect URIs” field:
    • https://yourwebsite.com/wp-login.php?loginSocial=facebook
  13. Click on “Save Changes”.
  14. On the top left side, click on the “Settings” menu point, then click “Basic”.
  15. Enter your domain name to the “App Domains” field, probably: stevenc43.sg-host.com
  16. Fill up the “Privacy Policy URL” field. Provide a publicly available and easily accessible privacy policy that explains what data you are collecting and how you will use that data.
  17. At “User Data Deletion“, choose the “Data Deletion Instructions URL” option, and enter the URL of your page* with the instructions on how users can delete their accounts on your site.
    • To comply with GDPR, you should already offer possibility to delete accounts on your site, either by the user or by the admin:
      • If each user has an option to delete the account: the URL should point to a guide showing the way users can delete their accounts.
      • If the accounts are deleted by an admin: then you should have a section – usually in the Privacy Policy – with the contact details, where users can send their account erasure requests. In this case the URL should point to this section of the document.
  18. Select a “Category”, an “App Icon” and pick the “App Purpose” option that describes your App the best, then press “Save Changes“.
  19. Your application is currently private, which means that only you can log in with it. In the top bar switch the “App Mode” from “Development” to “Live“.
  20. By default, your application only has Standard access for the permissions, which is not enough for Facebook Login.
    On the left side, click on App Review then click Permissions and Features. In the table you will find the “public_profile” and “email” permissions and you should click on the Get Advanced Access buttons next to them.
  21. On the top left side, click on the “Settings” menu point, then click “Basic”.
  22. At the top of the page you can find your “App ID” and you can see your “App secret” if you click on the “Show” button. These will be needed in plugin’s settings.

Lấy mã Client ID và Client Secret Twitter

Getting Started

To allow your visitors to log in with their Twitter account, first you must create a Twitter App. The following guide will help you through the Twitter App creation process. After you have created your Twitter App, head over to “Settings” and configure the given “Consumer Key” and “Consumer Secret” according to your Twitter App.

Create Twitter App

  1. Navigate to https://developer.twitter.com/en/portal/projects-and-apps
  2. Log in with your Twitter credentials if you are not logged in.
  3. If you don’t have a developer account yet, please apply one by filling all the required details! This is required for the next steps!
  4. Once your developer account is complete, navigate back to https://developer.twitter.com/en/portal/projects-and-apps if you aren’t already there!
  5. Click on “+ New Project“!
  6. Name your project, and go through the basic setup. You’ll need to select your use case, give a description and enter a name for the App as well.
  7. Click “Complete“!
  8. You’ll find your API key and secret on this page. Copy and paste the “API key” and the “API secret key” to the corresponding fields at Nextend Social Login > Twitter > Settings and press “Save Changes“.
  9. Go back to your Twitter project and on the left side, under the “Projects and Apps” section click on the name of your App.
  10. Scroll down and click on the “Edit” button at “Authentication settings“.
  11. Switch on the “Enable 3-legged OAuth” option.
  12. Add the following URL to the “Callback URLs” field:
    • http://localhost/aplar.org/wp-login.php
  13. Enter your site’s URL to the “Website URL” field: http://yourwebsite.com
  14. If you want to get the email address as well, then don’t forget to enable the “Request email address from users” option. In this case you also need to fill the “Terms of service” and the “Privacy policy” fields with the corresponding URLs!
  15. Click on “Save“.
  16. Go back to Nextend Social Login and Verify your Twitter provider.