A Cozmoslabs Product
Documentation / Profile Builder Add-ons / Social Connect / How to create a Google App for Social Connect

How to create a Google App for Social Connect

Login into Google Developers Console

First you will need to Login into your Google Account and then to access the Google Developers Console.

Profile Builder Pro - Social Connect - Google Developers Console

Select a project

After you login and access the Google Developers Console click on “Select a project” Menu Item.

Profile Builder Pro - Social Connect - Google Developers Console - Select a project

Create a project

After we click on “Select a project” Menu Item a popup will appear. We will need to click on “New project”.

Profile Builder Pro - Social Connect - Google Developers Console - Create a project

Setup the project

After we click on “New Project” we will need to choose a name for the project. After finishing to setup the Project click on “Create”.

Profile Builder Pro - Social Connect - Google Developers Console - Setup project

Create Credentials

To use the Google API we need to Create Credentials. Click on “Credentials” to get started.

Profile Builder Pro - Social Connect - Google Developers Console - Create Credentials

After clicking on “Credentials” we will need to create an OAtuh 2.0 client ID. Click on “OAuth consent screen”.

Profile Builder Pro - Social Connect - Google Developers Console - Create Credentials

Create an OAuth 2.0 client ID

Step 1: Choose from the following options and then click on “Create”:

Profile Builder Pro - Social Connect - Google Developers Console - Create an Oauth 2.0 client ID – Step 1

Step 2: After clicking on “Create” we will need to set the following options:

Page1: OAuth consent screen

Click Save and Continue

Profile Builder Pro - Social Connect - Google Developers Console - Create an OAuth_consent_screen_1.0Page2: Scopes

Click Save and Continue

Profile Builder Pro - Social Connect - Google Developers Console - Create an OAuth_consent_screen_2

Page 3: Test Users

Click Save and Continue

Profile Builder Pro - Social Connect - Google Developers Console - Create an OAuth_consent_screen_3.0Page 4: Summary

Click Save and Continue

Profile Builder Pro - Social Connect - Google Developers Console - Create an OAuth_consent_screen_4

Step 3: Go to “ Credentials” → “Create credentials” → “OAuth client ID”

Profile Builder Pro - Social Connect - Google Developers Console - Create an Oauth 2.0 client ID – Step 3

Step 4: Choose your Application type.

Profile Builder Pro - Social Connect - Google Developers Console - Create an Oauth 2.0 client ID – Step 4

Step 5: We will need to set the following options:

• Name – add your own name
• Authorized JavaScript – add your website url – Example: http://www.yourdomain.com
• Authorized redirect URLs – add your website url – Example: http://www.yourdomain.com

After you finish click on “Create”.

Client ID Credentials

After clicking on “Create” you will be prompted with your Client ID Credentials. You will need to copy the Client ID and click on “Done”. You will also need to copy the name of your OAuth 2.0 client.

Profile Builder Pro - Social Connect - Google Developers Console - Create Client ID

Paste the Google Client ID

After you copy the Google Client ID go to your website -> Dashboard -> Profile Builder -> Social Connect -> Enable Google Login and paste your Client ID and the name of your OAuth 2.0 client. Scroll to the bottom to Save.

Profile Builder Pro - Social Connect - Application Settings - Google App

Google Login in Front End

Social Login with Google should be available on WordPress Default and Profile Builder forms.

https://www.cozmoslabs.com/wp-content/uploads/2016/02/Profile-Builder-Pro-Social-Connect-Application-Settings-Google-Login-Form.png

The Ultimate Membership Bundle

Combine the power of Profile Builder with Paid Member Subscriptions to set up user registration, memberships, and recurring revenue.

Get 25% off with the bundle

Help & Support

We’re here to help you every step of the way.

Open a Support Ticket