Jump to: navigation, search

Setup Google Login & Photos

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
  • Setup Google Drive1.png

  • 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.
  • Setup Google Drive2.png

  • Search ‘Google+ API’.
  • Enable the API.
  • Similarly, enable the 'Google Photos API'.

    GooglePhotosUpdate33.png

  • To use Google Login in your store, you may need credentials. Click ‘Credentials' to get started.
  • GoogleLoginAnd Photos13.png

  • Click on ‘Create Credentials’.
  • Setup Google LoginPhotos1.png

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.
  • Google Photos and Login14.png

Step – 4 Set up OAuth Consent Screen and App Registration

  • In the pop-up click on ‘Set Up Consent Screen’
  • Google Photos and Login15.png

  • Next, choose the user type for your API i.e. External, and click on create.
  • Google Photos and Login16.png

  • This will start the ‘App Registration Process’.
  • Google Photos and Login17.png

  • Fill up the consent screen, enter your Application Name, Application Logo, and User Support Email.
  • Google Business Reviews15.png

  • Enter the website domain for domain authorization, such as the website domain, homepage link, privacy policy page link, and terms of services link.
  • Google Photos and Login19.png

  • Enter developer contact information. This email address is entirely for Google to notify you about the changes to your project.
  • Google Photos and Login20.png

  • When finished click on the Save and Continue.
  • The next step is to define the Scopes.
  • Google Photos and Login21.png

  • 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.
  • Google Photos and Login22.png

  • This scope will be listed in ‘Your Sensitive Scopes’.
  • Google Photos and Login23.png

  • 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.
  • Google Photos and Login24.png

  • Complete the App Registration process.
  • On the OAuth Consent Screen publish your app.
  • Google Photos and Login25.png

Step – 5 Get Credentials

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

    Setup Google Drive9.png

  • 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

GooglePhotosUpdate34.png

  • 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.
  • Google Photos and Login26.png

  • 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.
  • Google Photos and Login27.png

  • Copy the Client ID and Client Secret key to configure into Admin Panel.
  • Google Photos and Login28.png

    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.

      Google Photos and Login29.png

    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
    • Google Photos and Login30.png

    • 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.
    • Google Photos and Login31.png

    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.
    • Google Photos and Login32.png

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

    Setup Google Drive12.png

    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.