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.
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.
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.
Step 4: Create Project
Name the project and add organisation location if you want. Then click the Create Project button.
Step 5: OAuth Consent Screen
Go to APIs & Services in the sidebar and click on the OAuth Consent Screen option.
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.
Step 7: Select the User Type
Select External as the user type and click the Create button.
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.
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.
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.
Step 11: Developer Contact Information
Provide an email ID under "Developer Contact Information". Click the Save and Continue button.
Step 12: Save and Continue
Provide an email ID under "Developer Contact Information". Click the Save and Continue button.
Step 13: Go to Credentials
Click on the Credentials tab in the left sidebar to open it.
Step 14: Create Credentials
Click the Create Credentials button.
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.
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.
Step 17: Create Client ID
Now click the Create button and create the OAuth Client ID.
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.
Step 18: Go to DrapCode Builder
Go to the App builder and open plugins. Find the Google Login plugin and click the install button.
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.
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.
Step 21: Social Login/Sign Up Event
Create a new event and add Social Login/Sign Up event action.
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.
Step 23: Add a Button
Go to Social category under Components and drag and drop a Google button.
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.
Now, open the page in the preview or publish mode to see how the logging in through Google works.