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
- 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.
- From the above screen, click on the EDIT APP. The below screen for verification will appear:
- 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:
