Skip to main content

Google - Plugin

The Google plugin allows you to add a Google button in your Sign In/Login page that allows users to sign in/login through their Google accounts.


Steps to Install Google Plugin

Step 1: Open the Google Developers Console

Go to the Google Developers console and login with your Google account.

DrapCode Builder Google Plugins

Step 2: Select Project

After logging in you will land on your Google Dashboard page. Go to the top-left side of the menu bar and click the Select a Project button.

Under New Project, add the Project Name and click on the Create Button, which will redirect you to the newly created project's dashboard page.

DrapCode Builder Google Plugins

Step 3: New Project

As you click the Select a Project button, a popup box will open. Here, click New Project as shown in the image below.

DrapCode Builder Google Plugins

Step 4: Create Project

Name the project and add organisation location if you want. Then click the Create Project button.

DrapCode Builder Google Plugins

Go to APIs & Services in the sidebar and click on the OAuth Consent Screen option.

DrapCode Builder Google Plugins

Step 6: Select the Project

As you open the OAuth Consent Screen page, all your recent projects will show. Here click on the project you previously created.

DrapCode Builder Google Plugins

Step 7: Select the User Type

Select External as the user type and click the Create button.

DrapCode Builder Google Plugins

Step 8: Add App Information

As you click the Create button, you will land on the Edit App Registration page. Here, first add the app information i.e. App Name, User support email and App Logo.

DrapCode Builder Google Plugins

Step 9: Add App Domains

Now fill the fields related to "App Domain", which are Application Homepage Link, i.e. the link of your homepage on DrapCode and Application Privacy Policy Link, for example: https://www.freeprivacypolicy.com/live/084cf9bb-79c9-407f-bdd5-4e802a38fa66.

DrapCode Builder Google Plugins

Step 10: Add Authorized Domains

Click Add Domain button under Authorized domains and add drapcode domain and free privacy policy domain as shown below.

and provide an email ID under "Developer Contact Information". Click the Save and Continue button.

DrapCode Builder Google Plugins

Step 11: Developer Contact Information

Provide an email ID under "Developer Contact Information". Click the Save and Continue button.

DrapCode Builder Google Plugins

Step 12: Save and Continue

Provide an email ID under "Developer Contact Information". Click the Save and Continue button.

DrapCode Builder Google Plugins

Step 13: Go to Credentials

Click on the Credentials tab in the left sidebar to open it.

DrapCode Builder Google Plugins

Step 14: Create Credentials

Click the Create Credentials button.

DrapCode Builder Google Plugins

Step 15: OAuth Client ID

As click the Create Credentials button, a dropdown list will open. Select OAuth client ID to create a new set of credentials for your application.

DrapCode Builder Google Plugins

Step 16: Application Type

You will land on the Create OAuth client ID page. Choose Web Application as the Application Type from the dropdown list.

DrapCode Builder Google Plugins

Step 17: Create Client ID

Now click the Create button and create the OAuth Client ID.

DrapCode Builder Google Plugins

As you click the create button, OAuth Client ID and Client Secret key will get generated. It will be needed while installing Google Login on DrapCode.

DrapCode Builder Google Plugins

Step 18: Go to DrapCode Builder

Go to the App builder and open plugins. Find the Google Login plugin and click the install button.

DrapCode Builder Google Plugins

Step 19: Add Client ID & Client Secret

Copy the Client ID and the Client Secret key previously generated and paste it on the Google Login Installation page on the builder.

Once done, click the Install Plugin button.

DrapCode Builder Google Plugins

Step 20: Go to Events

As click you on the install button, Google login plugin will get successfully installed as shown below in the image. Now, click on the events icon in the top bar and open events.

DrapCode Builder Google Plugins

Step 21: Social Login/Sign Up Event

Create a new event and add Social Login/Sign Up event action.

DrapCode Builder Google Plugins

Step 22: Choose Google As Provider

Select user role, choose Google as provider and select the page you users to land on after logging in via Google/Gmail account. Once done, click the Save button.

DrapCode Builder Google Plugins

Step 23: Add a Button

Go to Social category under Components and drag and drop a Google button.

DrapCode Builder LinkedIn Plugins

Step 24: Bind the Event

Open the settings of the button and change the type from Submit to Button. As you change the type, option to bind a workflow event would appear. So select the Google Login event from the list.

DrapCode Builder LinkedIn Plugins

Now, open the page in the preview or publish mode to see how the logging in through Google works.