Setup Google Login and Photos

Overview & Purpose

Let your customers use Google Account to log in to your OnPrintShop Store. Login made simple with Google. Your customers will not have to remember individual usernames and passwords for each account. Also, Google Login gives easy access to your users’ data; this enables you to request access to additional info about someone using your website.

Also, integrate Google Photos for your print store. The Google login feature comes in handy with the Google Photos feature.

How to integrate

Follow the below steps to configure Google Login and Photos in your domain:

1. Create a New Project

• Visit Google's Developers Console. 
• Log in with your Google Account.
• After successful login, create a New Project from a NEW PROJECT Button:



• Enter your project name and location to create a project.
• After creating the project, The Google Developers page will lead you to your project dashboard.
• Click on the Go To APIs Overview.

2. Enable APIs and Services

• The APIs Overview button will redirect you to your project dashboard:



• Click on the ENABLE APIS AND SERVICES button.
• Search the Google+ API and enable the API:



• Similarly, enable the Photos Library API:



3. Create Credentials

• To use Google Login in your store, you may need credentials:



• Click on the CREATE CREDENTIALS. The Create Credentials page will appear:

Credential Type

• The first step of creating credentials is the selection of the type of API you are using, this is because different APIs use different auth platforms, and some credentials can be restricted for certain APIs:



• In this case, choose the Photos Library API.
• Select the type of data you are willing to access i.e. User Data.
• Now, click on the Next button and set up an OAuth consent Screen.

OAuth Consent Screen and App Registration

• The OAuth Consent Screen will appear:



• Fill up the consent screen, enter your Application Name, Application Logo, User Support Email, Developer Contact Information and click on the SAVE AND CONTINUE.
• The next screen of Scopes will appear, you can skip this portion and click on SAVE AND CONTINUE.

OAuth Client ID

• The OAuth Client ID screen will appear:



• Select application type as – ‘Web Application’
• Enter your store domain in Authorized JavaScript Origin.
• In Authorized redirect URIs enter the URL in the following manner
  • Redirect URI for Google Login - http://www.<yourdomainname>.com/user_registration.php
  • Redirect URI for Google Photos - http://www.<yourdomainname>.com/studio/Services/images.php
  • Redirect URI for Google Drive - http://www.<yourdomainname>.com/admin/configuration_external_service_action.php

• Click on the CREATE. The next screen to download the credential information will appear:



• Click on DOWNLOAD to get the credential information in JSON format. Click on the DONE button.
• If you got only the Client ID as shown above then, return to the credentials page:



• Here, you’ll find your OAuth 2.0 Client IDs. Click on the pencil-like icon to get the secret key:



• Copy the Client ID and Client Secret key to configure into Admin Panel.

Edit App Registration

• Once you are done with creating the app, it is time to add some more details. For this, click on the OAuth Consent Screen option from the left panel and then, click on the EDIT APP icon:



• This will lead you to the Edit app registration screen:



• Here, you will see some of the fields pre-filled as per the details we configured in the Create Credentials process. Add the details to the remaining fields:
  • Enter the website domain for domain authorization, such as the website domain, homepage link, privacy policy page link, and terms of services link.
  • Enter developer contact information, if not added. This email address is entirely for Google to notify you about the changes to your project.
• When finished, click on  SAVE AND CONTINUE.
• The next step is to define the Scopes:



• Click on the ADD OR REMOVE SCOPES button. This will list all the scopes for enabled API:



• Select the Photos Library API with the description as – View your Google Photos Library.
• This scope will be listed in ‘Your Sensitive Scopes’:



• In the next step Add test users. Till the time the publishing status is set as is testing, only these test users will be able to access your app:



• Click on the +ADD USERS button to add a test user:



• Enter the email id of the user and click on the ADD button to Complete the process.

Publish App

• To publish the app, you need to take the action from the OAuth Consent Screen:



• Click on the PUBLISH APP and then click on the CONFIRM button from the pop-up.

4. Admin Panel Configuration

• For the configuration of App in the Admin Panel, go to the Admin >> Store Configuration >> External Service Settings >> Social Sharing >> Google  >> Action menu >> Edit option:



• Select the status for the Login and Studio.
• Enter the Client ID and Client Secret key.
• Save the settings.

5. Apply for verification

In Google Developers, go to OAuth consent screen >> Prepare for verification:



Here, for the sensitive scope, you would need to add justification. This should include how you will use the app permission and why you need this scope:



Use Sample Content –

Next, you need to enter the screencast video link:



If your application isn’t verified then google displays a safety error to your customers, as shown below –



With this error, your application may work for a few days but it is advisable to get the application verified to avoid any further inconveniences. Screencast video steps –

• Login to your print store with any customer’s credentials.
• Start recording.
• Navigate to any product with a Custom Design option, say Standard Business Card.
• Choose Custom Design.
• In the Designer Studio, go to the Images Tab (left-panel) >> Image Gallery.
• Click on the Google Photos button.
• Click the Connect.
• Maximize the new Chrome window. The Client ID should be visible in the address bar.
• Log in to the Google Account.
• Make sure two permission screens to grant your application the necessary permissions are visible.
• After successful login, make sure the images from the Google account are visible.
• Select one image to create a design.
• Proceed to the cart page.
• Stop the recording.
• Upload this video publicly from your YouTube channel.