#Example #OAuth #GoogleSheets #GoogleAPIs #WebModules #ServerSide #backend #ServerSide #3rdPartyServices #PackageManager #ExternalCode #NPM

Demonstrates
Using External Code Libraries in Wix Code using the NPM Package Manager
Using OAuth 2.0 to Access Google APIsWeb modules - server-side (backend) code
Accessing 3rd Party Services (using backend function)
Calling Server-side Code from the Front-end with Web Modules
Required for this example
You will need a Google account for a Google Sheet.
Links for this example
Open the Example template in the Wix Editor
About this example
This example uses the Google APIs Node.js Client package included in the Wix Package Manager to access a Google Sheet. Using built-in code packages is easier and more convenient than having to write your own interface code.
You will need a Google Account where you can create a Sheet to be used as the “target" of the app. The Home page of this app is a form on which the user can enter data that will be saved to the Google Sheet. Before the Home page form can be used, you will need to configure the app to access the Sheet.
Google APIs use the OAuth 2.0 protocol for authentication and authorization. The Configuration page provides a step-by-step process for you to configure the app to access a Google Sheet. At the end of the configuration process, the form on the Home page can be filled in and the data saved to the Sheet.
Thanks to my Wix colleague Gal who provided the original POC.
Amazing!!! Does it work both ways?
The authorization scope in this example is read/write https://developers.google.com/sheets/api/guides/authorizing
So you can also read from google spread sheet, you just need to use the correct api call. as described here: https://developers.google.com/sheets/api/reference/rest/v4/spreadsheets.values
@Gal Morad Please can you give me a light how is possible have a database that are automatically synchronized by from WIX and google. I think that a trigger as the clickbutton or something can UPDATE a data in google and not only send a NEW data...
I would like that my database in wix have their data fully updated with google spreedsheet... is possible by Yisrael approach??? Thanks
@Daniel Andrada db replication is a complicated issue, even more complex if one side is not a db but a spresdsheet. I don't think googlesheet supports an update of existing single line, at least not out of the box, this is a DB action. You can update lines at wix db. if your db is very very small you can delete and insert the whole data to the spreadsheet each time. obviously this is not scalable.
Yisrael,
Honestly, you are the best. I can't thank you enough. For more than 8 months I was trying to get my head around 'how to send data to Google Sheet'
I tried it in so many different ways but every time I gave up because I couldn't figure my head around. If we ever meet, the beer is on me !!
Thank you so much 🍻
-Shan
Awesome code! I think it will take me few days to understand this lol
Hi guys! The get code button doesn't seem to be working for me. I must be doing something wrong! I've enabled the Google Sheets API and downloaded the configuration file. Then copied the text code into the text box and pressed enter. The enter doesn't seem to be doing anything- it just moves the text cursor to the line below, as you would expect on any word document.
I then create a new Sheet in Google docs and copy it's URL into the second text box and hit enter. Nothing really happens here either. After this the 'Get Code' button still doesn't seem to work for me. Could anyone enlighten me on what I'm doing wrong?
Heres a link to the page: https://leopoldtaylor.wixsite.com/mysite/configuration
And a screenshot of the code I've entered:
I tried your site and it works fine for me. I entered in the text for the client configuration, hit enter, and I get a check mark showing that it was accepted. I then do the same for the Google sheet URL and get a check mark for that as well:
Your site appears to be working OK for me. Do you get the checkmarks as well?
@Yisrael (Wix) Woah- what a quick response! Thanks man. But nope, no checkmarks for me.
@leopoldtaylor Something fishy going on. As you can see:
Hi everyone,
Is there a way to copy the elements in your example site (@Yisrael) into another Wix site without having to rebuild and redefine all the elements from scratch to connect to the page code?
I have installed the googleapis node module and copied and pasted the code for config and googleSheet jsw files to the into the backend site structure. Is adding new web modules to the backend and copy pasting the code the most effective way to do this?
I know zero JavaScript so am sure I'm missing something crucial! Just to be clear, all I need to do is to get this system to work on another Wix site.
Thanks in advance everybody!
The configuration phase is done once and it's result is a table with all the needed configurations for the google api.
If you look at it that way you do not need to copy this page to your site, you can crate site from the example, do the configuration phase, and create a table in you site with the same name, permissions, data and fields.
then you need to copy only the home page and backend files to your site.
Nevertheless you will need some minimal coding skills in order to customize the form to your own needs.
@Gal Morad thanks for the reply. Apologies for my complete ignorance but what are you talking about when you refer to 'configuration phase'? And when you say copy the home page and backend files are you talking about copying the JS page code on the home page, and the JS code for the config and googleSheet backend files?
Really appreciate the help Gal.
This example has two parts,
1) The configuration page - lets you configure your application to work with google.
2) The home page - this is the form you use at your site.
Using it at your site will have two phases: 1) Follow the instructions in the configuration page (what I called the configuration phase). this is done only once, before you expose the form in the home page to your users.
After this phase the configuration page is no longer needed. And the page should not be exposed to users in anyway.
2) Expose the form in the homepage to your users, where they can submit data to the google sheet configured at the first phase.
By copying I meant copying the js code from the homepage and back end as you described well, you need to set UI components on the stage with the same events and names as the example page.
you will also need to add the googleapi npm package , you do that by selecting node modules --> install new package --> googleapi
This is amazing, got the example to work perfectly and just what I needed for my site but.............
Would anyone that fully understands how to take this example and implement it on a site be willing to do a video tutorial?
I have a site that already has a multistage form and database but am struggling on the transfer even with @Gal Morad @Yisrael (Wix) great work and explanations.
Sorry but being stupid!
@ctjcoleman Yes great idea! Still having a bunch of trouble myself. If @Yisrael (Wix) or @Gal Morad might be able to make a video or screencast on this, that would be amazing! It'll defo help other people out down the line.
Really appreciate the support guys.
Does the same procedure work for big-query?
it is a different API
@Gal Morad anyone made that one work? I have no clue how I should Set up authentication with a service account in WIX
Not that i know of
Hello, I am having some problems with the "Get Code" button on the form, similarly to @leopoldtaylor , with the Developer console I have witnessed on submitting the Google Sheet URL this error:
I have already tried changing Permission and trying in Live and Preview Mode. Does anyone have any ideas?
This is the site link: https://cogestione2019.wixsite.com/test
Thank you in advance!
Your client configuration field is not correct, you only copied the Client ID. You need to download the Client Configuration and copy the entire contents of the downloaded file into the Client Configuration field.
@Yisrael (Wix) Thank you very much! I was opening the client configuration file with Firefox, but when I tried with Chrome the entire code showed up. Sorted everything out!
Thanks for this instructive example. I have two questions:
1. Why did you choose Other instead of Web Application for the app type.
2. How is the token refreshed if it expires.
Sorry, but the Google APIs are not a part of the Wix Code product (which is what this forum is about). You'll have to review the Google API documentation to go beyond this simple example.
hi,
thanks for great example.
how i can add timestamp for every submit?
I have tried find solution, i tried to write in google script, but this is not working, working only manual input in google sheets.
I be extra thankful, when you find time to help me.
Why not just add a type stamp field to the Sheet and save that field along with the other fields, when saving to the spreadsheet.
@Yisrael (Wix) I found script from stackoverflow made by Sandy Good:
function addTimeStamp(e) { var typeOfChange = e.changeType; //Logger.log('typeOfChange: ' + typeOfChange); //Logger.log('typeof typeOfChange: ' + typeof typeOfChange); if (typeOfChange === "INSERT_ROW") { var timeStamp = Utilities.formatDate(new Date(), "GMT", "yyyy-MM-dd'T'HH:mm:ss'Z'"); var activeRangeIs = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet().getActiveRange(); //Logger.log(activeRangeIs); var whatRow = activeRangeIs.getRow(); SpreadsheetApp.getActiveSpreadsheet().getActiveSheet().getRange(whatRow, 3).setValue(timeStamp); }; };
Then use an installable trigger.
I hope this script help other like me and thanks again @Yisrael (Wix) for great post.
R
try this
function insertRow(values, authClient, ssID) { values.push(new Date().toString());
@Yisrael (Wix) I was able to successfully utilize your example to connect to Google Drive. Thank you!
I have ran into a slight issue though. This may be more Google API related but I thought I would ask.
I have the following code that creates a folder. The folder is created successfully, however, the file.id is always null.
I would be grateful for your thoughts on why this may be happening.
export async function createFolder(folderName) { const authorizedAuthClient = await createAuthorizedClient(); const drive = google.drive({version: 'v3', auth: authorizedAuthClient }); let fileMetadata = { 'name': folderName, 'mimeType': 'application/vnd.google-apps.folder', parents: ['redacted'] }; let toCreate = { resource: fileMetadata, fields: 'id, name' }; drive.files.create(toCreate, (err, file) => { if (err) { // Handle error console.error(err); } else { console.log('Folder ID: ', file.id); } }); }
Thanks,
Peter
Hi Peter I find your Solved question on the Net. I would push it here for the people with the same problem.
Answer:
file.id —->. file.data.id
https://stackoverflow.com/questions/54645196/google-drive-v3-folder-creation
Hi @Yisrael (Wix) I tried your example template and it works of course. Could you explain better how does it work please ? Also in block diagram, it could be really motivating for who like me it's trying to learn.
I would learn how import a CSV file into a Wix collection via code in order to refresh and update the old data in Wix dbase, so I thought to get it via Google sheet. Thx in advance Mauro
For the newbies like me: actually I found a good reference via node-googleapis-installation in Wix, the following link, where all is really well explained:
https://github.com/googleapis/google-api-nodejs-client#readme
or better
https://apis-nodejs.firebaseapp.com/oauth2/index.html#typescript
https://developers.google.com/identity/protocols/OpenIDConnect
https://developers.google.com/oauthplayground/
More, I found also that you could realize an automatic Service-Service Authentication !!
It looks like you found your way to get the information. this example is an adaptation to corvid of google sheet nodejs quick start. https://developers.google.com/sheets/api/quickstart/nodejs
As mentioned above in this example the configuration and usage were separated.
the configuration form generates the needed tokens for authentication and communication with google sheet api. It saves these token to the db.
At the home page you can find the user's form. this form is using the authentication tokens when
entering data to the sheet.
@Gal Morad thanks so much ! I am trying to learn and practice, with difficulty, but my goal is import via code a csv file in a Wix collection. I thought of import a csv file in a Google Sheet and then import via Json in Wix.
How do you see this ?
@Mauro Vento Avyno I am not sure I understand what you are trying to achieve.
you can import and export csv using the db manager.
https://support.wix.com/en/article/importing-data-to-a-database-collection
you also have example for doing it with code. https://support.wix.com/en/article/corvid-tutorial-importing-and-exporting-collection-data-with-code
Can someone help a total beginner to get started, here? I am technically savvy, but brand new to Corvid and Wix automation, and lacking context for this post. How does one access the "Google Sheet NPM" form, in the OP?
This example demonstrates how to implement google sheet integration from scratch at your site. Begin by clicking "Example Template" it will open editor with a code and DB, if you publish it and follow the configurations step, you will have a standalone form that enters rows into a google sheet.
you can learn from this code how to implement it at your site.
One question, is possible update on a Google sheet a collection of 500 or 1000 records with this method ?
Looks like this is Google API question, you can check it here:
https://developers.google.com/sheets/api/reference/rest/v4/spreadsheets.values/append.
from corvid point of view, there is no limitation for 500 or 1000 rows.
I am new to Wix and i am not a coder. I did the example - it worked GREAT. I do have a question though. How do i use this example in my website? I am using Wix to build an APP that will collect data from the user. This data is saving in the Database collection i created inside Wix. How do i make my submit button - connect to my google sheet instead of using the database collection?
Would be really useful to see another great example like this for the Google Calendar API! Thanks
Hi dear @Yisrael (Wix) ,
Thanks for the great code. It saves lots of time. :-) But still I have a question. After added the data to the google sheet (using your code) , is there any way to update it through the website..?
I mean using a dropdown menu, select & retrieve the data and update the selected data field.
Thanks in advance.
Chathuranga.
Everything you need is in Google's Sheets API. You'll just need to develop the desired interface (dropdowns, text fields, checkboxes, etc) and then add the appropriate API interface queries.
@Yisrael (Wix)
Thanks for your quick response. Highly appreciated.
Can you describe more.,
If you can attach links, that would be great.
Thanks again.
Chathuranga.
@user user Refer to the Google Sheets API web services.
Thank you Yisrael! Sounds great!
How safe is this?
We are dealing with patients' information (ePEI) and using GSuite.
Could someone reach out the data during transfer from Wix to Gsuite?
We should be HIPAA compliant.
Thanks,
Everything is handled in backend code. As long as you conform to "best practices" and make sure that all sensitive information is in backend code and is not exposed in frontend you should be OK.
@Yisrael (Wix) thank you.
The example worked great with my GSuite.
Is there any edit necessary in the backend files? or just copy/paste works? (assuming all items IDs are identical)
I created a simple site identical to the example.
The configuration page works fine and I have all the values in the db. But, nothing happens when I press Save in Home page.
At the beginning, the form detected the non-configured db and showed the proper message as expected.
All items' ID, permissions, page codes, backend files, installed googleapis, and Guite settings are identical.
The only thing I can think about is any required edit in the form page codes or any backend files.
Thanks,
Ali
Hey guys,
Just thought you guys should know that the 'refreshAccessToken' is being deprecated now. Following is the message relayed during a call.
(node:1) [google-auth-library:DEP007] DeprecationWarning: The `refreshAccessToken` method has been deprecated, and will be removed in the 3.0 release of google-auth-library. Please use the `getRequestHeaders` method instead.
Thank you
@Gal Morad After this depreciation, will your current code still work?
@shan The example has been updated.