Google Login and Photos

Admin > Store Configuration > External Service Settings > Social Sharing TAB > Google

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. Follow the below steps to configure Google Login and Photos in your domain.

Step – 1 Create a New Project

Visit https://console.developers.google.com/
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 a project Google Developers page will lead you to your project dashboard. Click on Go To APIs Overview.

Step – 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 ‘Google+ API’.
Enable the API.
Similarly, enable the 'Google Photos API'.
To use Google Login in your store, you may need credentials. Click ‘Credentials' to get started.

Click on ‘Create Credentials’.

Step – 3 Add Credentials to your project

Select which API you are using, as different APIs use different auth platforms, and some credentials can be restricted for certain APIs. In this case, choose the Photos Library API.
Choose from where you will call the API i.e. ‘Web Server’.
Select the type of data you are willing to access i.e. ‘User Data’.
Now click on the ‘What Credentials Do I Need?’ button and set up an OAuth consent Screen.

Step – 4 Set up OAuth Consent Screen and App Registration

In the pop-up click on ‘Set Up Consent Screen’

Next, choose the user type for your API i.e. External, and click on create.

This will start the ‘App Registration Process’.

Fill up the consent screen, enter your Application Name, Application Logo, and User Support Email.

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. This email address is entirely for Google to notify you about the changes to your project.

When finished click on the 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.

Note – Certain scopes are unavailable (i.e. are labeled with a lock sign) because usage of these scopes is restricted to projects using HTTPS URLs only. To continue, edit your OAuth clients and remove non-HTTPS URLs from the credentials page.

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.

Complete the App Registration process.
On the OAuth Consent Screen publish your app.

Step – 5 Get Credentials

For the credentials click on ‘Credentials’ at the left bar.
Click ‘+CREATE CREDENTIALS’ then OAuth Client ID.

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

Note - You can also configure Google Drive on the same screen i.e. under the same project, all you have to do is enter the redirect URIs for Google Drive and enable the Google Drive API them from the APIs Dashboard. There is no need to create a new project every time, you can configure all APIs in one project only.

Redirect URI for Google Drive -http://www.<yourdomainname>.com/admin/configuration_external_service_action.php

Click on Create.
Next, click to Download the credential information in JSON format. Or you get the Client ID and Secret Key in pop-up.

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.

Step – 6 Admin Panel Configuration

In Admin Panel go to, Admin >> Store Configuration >> External Service Settings >> Social Sharing >> Google >> Action menu >> Edit option
Enter the Client ID and Client Secret key.

Note: If you have entered the redirect URIs for Google Drive as shown in Step 5, then you can enter these Client ID and Client secret key in External Service Settings >> Social Sharing >> Cloud Storage Tab >> Enable Google Drive >> Action Menu >> ‘Edit’, and follow the steps given here.

Step – 7 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 –

We have created this application for the “<your_website_link>" website. Using the Google Photos application our end-users (i.e. the customers looking to order printing products) can connect their google photos account and use their images for product designing and printing purposes. Steps are stated below -

Go to <your_website_link>
Trigger top menu “Products”
Choose a product from. E.g. Standard business cards
Scroll down the product page and choose ‘Custom Design’
This will redirect you to the Designer studio
Go to Images Tab (Left-Panel) >> Image Gallery
Click on the ‘Google Photos’ button
Click ‘Connect’
Log in to the Google Account
Grant necessary permission to <your_website_name> to view the Google Photos library.
The images associated with Google Photos will load into the studio.
Select an image to complete the design and continue.
Proceed to the cart page.

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 Images Tab (left-panel) >> Image Gallery
Click on the ‘Google Photos’ button
Click ‘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.

Setup Google Login & Photos