To integrate Google and Facebook authentication for user registration and login in WordPress, you can use third-party plugins that simplify the process. Here’s a step-by-step guide on how to do this:
Install Required Plugins:
Navigate to Plugin > Add New plugin and search “Nextend Social Login” install and activate this plugin.
Navigate to Settings > Nextend Social Login option click and Connect your WordPress site to Google and Facebook.
Create API Keys:
Google API Keys:
- Navigate to https://console.developers.google.com/apis/
- Log in with your Google credentials if you are not logged in.
- 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”. )
- Name your project and then click on the “Create” button again!
- 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! )
- Click the “OAuth consent screen” button on the left hand side.
- 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!
- Enter a name for your App to the “App name” field, which will appear as the name of the app asking for consent.
- For the “User support email” field, select an email address that users can use to contact you with questions about their consent.
- Under the “Authorized domains” section press the “Add Domain” button and enter your domain name, probably: demo7.wpengineers.com without subdomains!
- At the “Developer contact information” section, enter an email address that Google can use to notify you about any changes to your project.
- Press “Save and Continue” then press it again on the “Scopes”, “Test users” pages, too!
- On the left side, click on the “Credentials” menu point, then click the “+ Create Credentials” button in the top bar.
- Choose the “OAuth client ID” option.
- Select the “Web application” under Application type.
- Enter a “Name” for your OAuth client ID.
- Under the “Authorized redirect URIs” section click “Add URI” and add the following URL:
- http://demo7.wpengineers.com/wp-login.php?loginSocial=google
- Click on the “Create” button
- 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.
- Currently your App is in Testing mode, so only a limited number of people can use it. To allow this App for any user with a Google Account, click on the “OAuth consent screen” option on the left side, then click the “PUBLISH APP” button under the “Publishing status” section, and press the “Confirm” button.
Facebook API Keys:
- Navigate to https://developers.facebook.com/apps/
- Log in with your Facebook credentials if you are not logged in.
- Click on the “Create App” button and then choose the “Set up Facebook Login” option as use case and press “Next”!
- Pick the “Website” option for the platform.
- For the question “Are you building a game?”, select the “No, I’m not building a game” option, then press “Next”.
- Fill the “Add an app name” and “App contact email” fields. The specified app name will appear on your Consent Screen!. Optional: choose a “Business Manager Account” if you would like to.
- Click the “Create App” button and complete the Security Check.
- Request access to the “email” permission:
- Click on the “Use cases” tab on the left side and then click on the “Edit” button that appears next to the “Authentication and account creation” item.
- Find the “email” permission and click the “Add” button.
- Press the “Go back” button on the top right corner, so you can return to the previous page.
- Click on the “Products” tab on the left side and then click on the “Configure” button that appears next to the “Facebook Login” product, then choose “Settings”.
- Add the following URL to the “Valid OAuth redirect URIs” field: https:/wp-login.php?loginSocial=facebook
- Press the “Save changes” button.
- On the left side, click on the “Settings” tab, then click “Basic”.
- Enter your domain name to the “App Domains” field, probably: https://demo7.wpengineers.com/
- 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.
- 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.
- Select a “Category”, an “App Icon”.
- Scroll down to the bottom of the page, press the “+ Add platform” button.
- Select “Website” platform, then press “Next” and enter the following URL into the “Website > Site URL” field: https://demo7.wpengineers.com/
- Press the “Save changes” button.
- By default, your application only has Standard Access for the “public_profile” and “email” permissions, which means that only you can log in with it. To get Advanced Access you will need to go through the Business Verification, that you can start on the “Verification” tab on the left side.
- Currently your app is in Development Mode which also means that people outside of your business can not use it. Once your verification is completed, click on the “Go live” tab and publish your app by clicking on the “Go live” button at the bottom right corner. Before you press it, it is recommended to check the steps listed on the “Go live” page, if you configured everything properly.
- After everything is done, click on the “Settings” tab, then click “Basic”.
- 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 the plugin’s settings.
After both Accounts Verification so Google and Facebook login option available in login page
