Google Calendar API key embedded in JS? - javascript

I'm writing an app in JS that fetches Google Calendar events using Google Calendar API. I've already generated an API Key and Client ID - do I have to do something to try and 'secure' them? Their tutorial puts them directly in the JS file (https://developers.google.com/calendar/quickstart/js), but then I dig further into the dev docs (https://cloud.google.com/docs/authentication/api-keys#securing_an_api_key) and it says not to embed the API key into the code...but that could just be for paid API keys?
I'm writing this mini webapp for a class so I only need it to work for like 6 weeks. I'm hosting it via GitHub Pages, and it was the one that alerted me about the API Key when I pushed the code.
Bottom line - is it safe for me to embed the API key into the JS code that gets pushed to github and made publicly available (so I can have just a frontend and use GitHub Pages)? Or do I need to take some kind of preventative measures?
Thanks in advance!

Api key is only used for accessing public data. For example you could use it to access the Google Calendar public holiday calendars. That being said yes you should keep your api key secrete and not share it but google is aware that this is not possible with client side languages like JavaScript so i have never heard of anyone getting in trouble for leaking their api key by having it in a JavaScript application.
This warning is mainly means that you should not put it in a GitHub open source repository that anyone can download and then run. You must instruct people how to create their own.
That being said if you are trying to access private user data then you should be using Oauth2 to authenticate your users and this you can lock down to only your domain due to the need for a redirect uri. As you say you have created a client id i suspect that you have already done that. Apikey in the javascript code isnt strictly needed if you have added the client id for oauth2.

Related

How do I prevent the Google API from being used by others?

I'm going to make a project using the Google translate api and I'm thinking of uploading this project to a server and just sharing it with my friends. But unfortunately the Api Key that I will use in the project can be accessed clearly in the JavaScript file. This is a very bad situation. To prevent this, I have limited the Google Cloud Api and as far as I understand it is only allowed to be used on the links I allow. It cannot be used on other links. Now my main question is, is this method enough to protect Api from malicious people? Do I need to do anything else? Thank you in advance for your answers.
Best practice in these cases is to use .env files to keep data like API keys private.
You have to create a server for that which will perform OAuth and then send an API request to google.
You can get help about how to implement OAuth from this topic provided by google: https://developers.google.com/identity/protocols/oauth2/javascript-implicit-flow
If you send/attach your API key in frontend like javascript which is basically a frontend language then it can be used to:
Send fake requests which will use all of the bandwidth etc.
You should also consult the TOS.
On November 5th 2014 Google made some changes to the APIs terms of Service.
Like you I had an issue with the following line.
Asking developers to make reasonable efforts to keep their private
keys private and not embed them in open source projects.
That is however really only an issue if you are releasing the source code of your app as an Open source project for example.
If your just hosting this on a server then what you shoudl do is set up limitations for the api key adding_application_restrictions you can limit it so that the api key can only be used from your server and no where else.

Publishing data from an array to a google spread sheet

I am working on a project where I run a web page from a local server using Xampp. In the web page I have a button which when clicked produces an array of 24 elements. I want this array to be written to my online google sheet.
My Question:
1)Can I post data from a web page running on a local server like Xampp to an online server like google sheet?
2)If yes, then is it possible to do it with php and javascript without any jquery?
3)If it is possible please show me the right path.
I am new to web development. Please help me. Thank you in advance for helping.
Yes it is possible to post data from your localhost as long as you have an internet connection.
to do such things I recommend you to read Sheets API Guides
You will also find there a sample code to write data to a spreadsheet on this page
Still an API key is required for public spreadsheets for other requests you need to use OAuth 2.0 as told here
If the request requires authorization (such as a request for an individual's private data), then the application must provide an OAuth
2.0 token with the request. The application may also provide the API key, but it doesn't have to.
If the request doesn't require authorization (such as a request for public data), then the application must provide either the API key
or an OAuth 2.0 token, or both—whatever option is most convenient for
you.
also as an advice and if you know javascript you could use Google App Script to get Started, after validating the implementation of the library into your project and console you will find built-in functions.

Getting feedback from a JavaScript application without a registering for a centralized service

I created a Chrome extension which is just HTML/CSS/JavaScript. When the user clicks on a button, I have it send a message to me. But the problem is I don't want to include any API keys or server information where the app can POST to as it can be used for abuse if someone was to extract this information from my Chrome app. Is there a method of getting a response from a web app with a public service where anyone can post to? I was thinking pastebin, but even that requires an API key.
You could ask the user to create their own key. For example, many GitHub extensions require an API key to make requests to the GitHub API, so what they do is they send you to a GitHub settings page where you can create a personal API key.

Is it possible to grant a JavaScript app, r/w permission to a Google Sheets file, without the need for the app user to log in/have a Google account?

I have a Google Spreadsheet file and a JavaScript application, hosted using Google Firebase free plan – if that changes anything. I would like to grant my application a read/write permission to the file so that when a user, posts something using my app, it will be written to the SpreadSheet as a new line. I thought that should be a simple scenario but…
While I got the read part running, using the API_KEY, the writing part seems to require OAuth authentication - even if the file itself is 100% public…
In my scenario the application itself should be the one, authenticating to the Sheet API - not the user of that application.
So, is there any way around this? Or to somehow log-in using OAuth on the application level?
Please note: I know I could use Firebase here, but let’s just assume that for now, it is not an option.
My final solution was to use Google Apps Script instead of Google Sheets API, as described here:
https://stackoverflow.com/a/49459945/2384366
After publishing the scrip with the ‘Who has access to the app’ = ‘Anyone, even anonymous’ – I was able to use the doPost function to do exactly what I wanted.
Perhaps it’s not the best solutions – but it works (and frankly, gives us much more control).

Using a server to send/receive information between a mobile phone and web page

I am trying to set up a simple set up as follows:
Have a mobile app with a page consisting of 4 lines (4 html paragraph lines (I am using phonegap)).
I want to use a web page from which I will input the data for those 4 lines. This information is sent to a server and that server transfers this information to that app on that mobile phone. Now, those 4 lines on the mobile phone is filled with the new information.
Similarly user inputs information on another page consisting of 10 lines of li (list). This information is again sent to the server and to the web page where the information is displayed.
I can almost feel the "internet police guys" getting all hyped and ready to vote this question down. But please understand that I have been on this site and various forums desperate to find a tutorial to guide me to do this and not able to find.
I am trying to use ajax to perform this setup. Confused how I would be using the php file. Information such as password n username is going to go in that php file to connect to the server. But php is a server side script thus needs to sit at the public_html folder. How do I use the php file from my desktop? Write a separate javascript to access it?
It is the concept that is confusing me. I am familiar with html,js,php.
I would appreciate any guidance or maybe a link to a tutorial which would help me to do the concept I mentioned. Thanks for listening.
You will need to create an API using PHP. This API is uploaded to your server and is considered "RESTful". Google a tutorial for what fits your needs. You can set all sorts of rules in this API such as requiring any requests to have an ID or access token.
Since you are using PhoneGap, your HTML and JS files rest on the device, so you will need to allow permissions to your API from anywhere. For this you will have to speak to your host provider about unless you know how to configure it yourself (some providers restrict what you want to do by default as an extra security precaution against XSS attacks).
Next, you can either use jQuery, or you can write some AJAX calls by writing the JavaScript yourself.
The most efficient way for this to work is to send JSON objects to and from the API. You will include a "command" in the JSON when you are sending from your app. On the PHP side, you will retrieve this command and use the rest of the data included in your JSON object to process the request. Your API will need to encode a JSON object for return (such as a user's profile information).
Here is a basic PHP API tutorial to get you going that explains some of the features of a RESTful API: PHP API
Here is a simple AJAX function (you will probably want to make this much more modular): AJAX
As broad as your question is, it seems like the best/easiest thing for you to do will be for you to first create a PHP webpage that will access a SQL database to perform the record updating. Actually, this should serve all of your needs for your mobile users assuming you don't need push notifications for live data updates.
I am assuming, since you are using phone gap, that you are more comfortable with web languages. After you get the webpage fully operational, then you should start building your app based on that exact same SQL database. With mobile app development there are a lot more "what if's" (what if the phone rings, what if the app is running in the background, what if there is no cellular service, etc...)
It is always easier to start with what you know and build on that, rather than starting with a new development platform and troubleshooting as problems arise.

Categories

Resources