website logo
Getting Started
User Manual
FAQs
Video Tutorials
Add-On Modules
Integrations
Latest Releases
Navigate through spaces
Getting Started
User Manual
FAQs
Video Tutorials
Add-On Modules
Integrations
Latest Releases
⌘K
👨‍💼Introduction
✔️Important Configurations
🎨Designer Studio
📷Social Logins and Sharing
📧Email Marketing
📤Mailing List Services
💬SMS Notification
🗣️Reviews
👥Accounting
💰Tax API
☁️Cloud Storage
🖼️Third-Party Images
WhatsApp Business API
🔌Others
Docs powered by archbee 
24min

Setup Google Drive

Overview & Purpose

Get business and IT benefits with Google Drive. Google drive reduces infrastructure cost and management and allows your end customers to easily upload large files directly in the drive. It is highly recommended for businesses to integrate the best storage solution offered by Google.

How to integrate

Read the below systematic guide to integrate Google Drive into your website.

1. Create New Project

  • Visit Google's Developer Console.
  • Login with your Google Account.
  • After successful login, create a New Project from the NEW PROJECT Button:

  • Enter name and location for your new project.
  • Click on the CREATE button.
  • After creating the project, you will be redirected to your project dashboard. Click on the Go To APIs Overview.

2. Enable APIs and create credentials

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

  • Click on the ENABLE APIS AND SERVICES button.
  • Enter "Google Drive" in the search box.
  • Click on the Google Drive API and then, click on the Enable.
  • To use Google Drive API in your store, you may need credentials. Click on CREATE CREDENTIALS to get started:


3. Add Credentials to your project

  • As soon as you click on the CREATE CREDENTIALS button, you will be redirected to the Credentials page:

  • Select the suitable options for the fields:
    • Which API are you using: select Google Drive API from the drop-down.
    • What data will you be accessing: select the User Data radio button.
  • Now, click on the NEXT button and set up an OAuth consent screen.

  • Enter the details as explained below:
    • Application Name: enter the name of your application.
    • User support email: enter the support email address.
    • App logo: upload the logo for your application.
    • Developer contact information: enter the email address of the developer.
  • Now, click on the SAVE AND CONTINUE to create the OAUTH Client ID:

  • Mention the details as below:
    • Application type: select the Web Application radio button.
    • Name: enter the name of your client.
    • Authorized JavaScripts origins: enter your store domain in Authorized JavaScript Origin.
    • Authorized redirect URIs: enter the URL in the following manner:
      • Redirect URI for External Service Action: http://www.<yourdomainname>.com/admin/configuration_external_service_action.php
      • 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 Login and Google Photos on the same screen i.e. under the same project, all you have to do is enter the redirect URIs for both APIs and enable Google Photos 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.

  • Click on the CREATE button. The Client ID and Client Secret will be generated:

  • Click on the DOWNLOAD button to download the Client ID and Client Secret Key.
  • Once saving the keys, click on the DONE button. This will take you to the Credentials page.
  • From the OAuth 2.0 Client IDs, click on the Edit icon:

  • Copy the Client ID and Client Secret key for further configuration into the Admin Panel.

4. Apply for verification

  • To start with the verification, click on the OAuth consent screen from the left-hand side navigation pane.
Edit App
Edit App

  • From the above screen, click on the EDIT APP. The below screen for verification will appear:
Apply for verification
Apply for verification

  • Check the Application details and Submit for verification. In the next pop-up enter your application details, and provide a contact email address. Next, click on the SUBMIT button.
  • Google will verify your business and application details, thus allowing you to use Google Apps on your website without any hassle or verification error. Your application verification status will change to ‘Being Verified’:
  • 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.

5. Admin Panel Configuration

  • In Admin Panel, go to Admin >> Store Configuration >> External Service Settings >> Cloud Storage Tab >> Enable Google Drive >> Action menu >> Edit option:

  • Enter the Client ID and Client Secret key and click on the Generate link.
  • In the next screen, click on ‘Connect Me’ and give required permissions to google drive.
  • This will generate the Access Token:

  • Next, enter the folder name where all the files uploaded by a customer while placing an order will be saved.
  • Click on Save and back.

Note: If you have entered the redirect URIs for Google Login and Photos as shown in Step 6 then, to enable Google Login at your website and enable Google Photos in Designer Studio, you can enter these Client ID and Client secret key in External Service Settings >> Social Sharing >> Google.

6. Enable Cloud File Upload

To enable customers to upload files directly into your Google Drive storage you will have to Allow Cloud File Upload for a product from the Product section.

Where to enable?

Go to Admin > Products > Products > ‘Action’ dropdown of a particular product > Settings > 'Upload' Tab:



Locate Allow Cloud File Upload field, select the 'Both' radio button and click on the Save button.

Front Store – The above setting will show Click here to upload large files -> button on the Upload Design page which will allow your customers to upload Cloud File:





Did this page help you?
Yes
No
UP NEXT
Third-Party Images
Docs powered by archbee 
TABLE OF CONTENTS
Overview & Purpose
How to integrate
1. Create New Project
2. Enable APIs and create credentials
3. Add Credentials to your project
4. Apply for verification
5. Admin Panel Configuration
6. Enable Cloud File Upload