I'm in the process of building a website and want to include a component that lists the three next upcoming calendar events from a public Google Calendar. I'm building the site using GatsbyJS, and so will be using Node.js to process the data and display it correctly on the page.
What I'm not quite sure how to do, however, is interface with the Google Calendar API in the first place; I'm building a static site with no backend, so will need to interact with the API clientside instead.
I've done a bit of reading and found the documentation for Googles Node.js Client. It lists three different ways of interacting with the API but I'm not sure which is more appropriate for my situation? I think I've rules out OAuth2 since it sounds like individual users would need to sign in with their Google accounts in order for the calendar event pulling to work correctly (which is hardly a good solution). Which of the other two options do you think I should be using?
Also, are there any security concerns I should be taking into account, given it's likely the website might be storing API keys and/or client IDs in a publicly accessible way?
The API key method stores your API key and is no different than including it in plaintext in the query string when loading e.g.
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
When you create the key, you can then restrict its usage to certain HTTP referers etc.
Related
I have created an opensource project that I have been working on slowly for a couple of weeks. I started looking into APIs that could be used and was interested in using WikiArt Api but was not sure how to go about using the API keys which are supposed to remain secret.
My initial thought was to create a config file and have the keys in there but then they would still be publicly available.
These two questions:
how to opensource a project that uses API keys
How to protect Google API Keys in an open source project github
suggested creating Secret ENV Variables and storing the keys in an encrypted format.
My question is how do I then access or include that hidden key within my HTML and also in my JavaScript code. It needs to be included here:
<link rel="prefetch" href="https://www.wikiart.org/en/Api/2/login?accessCode=[]&secretCode=[]"/>
and possibly a few other places in my HTML or JavaScript.
I'm not 100% sure a prefetch link was the right place to include this, but since the API will be grabbing image data, that was my first thought of where to initialize it. Is this the wrong approach?
As a secondary question, the documentation for the wikiart API isn't very good and it doesn't give any example code.
Can anyone explain a little bit better by what it means in the following
Create session when your application starts:
https://www.wikiart.org/en/Api/2/login?accessCode=[accessCode]&secretCode=[secretcode]
Add session key to your request url, e.g. &authSessionKey=sessionKey
How does it mean to create a session? I'm only familiar with php sessions, not API sessions. Is this done in the HTML or JavaScript?
This is the first time I've ever tried to use any APIs, after watching a few of Traversy Medias Tutorial so if anyone could give some code examples it would be greatly appreciated, his tutorial on fetch() API only grabs a text file, not an external url.
If you're using GitHub Pages, then that provides hosting for static sites only. In other words, a GitHub Pages site hosts only HTML and JavaScript and doesn't provide any backend (server-side) support.
As for how to securely use secrets in a static site, you cannot. Since all of the content in a static site is sent to the browser with no server-side components, there is no place you can put a secret that isn't sent to the client. In order to securely use secrets, you need some sort of backend server to hold them so that clients cannot see them.
If you need to hold secret API keys or other secrets, you need to create a non-static site and therefore to host it somewhere other than GitHub Pages.
Like the title, I'd like to gather information about geolocation of users from my existing snippet of Google Analytics, otherwise I'll have to use some extra js library that deal with it.
You have to use an extra library.
Google resolves user location on the server, so you cannot get it from the client side tracking code. And retrieving it via the API fails for a number of reasons, to start with that this would work only after the first hit and that it would be more work than using a specialized service.
I am working on a search engine that needs to have access to results from google. Here are my options:
Using the custom search API
Using a proxy to make my server send searches and return the data
I am not sure about some things though:
Is the custom search API limited? I may need a really big amount of queries, so if the use is limited it will be a problem.
Is it "authorized" to use a proxy in node that would send search queries to google and intercept the result to show to my users? If I do so, wouldn't I run to some limitations?
The inspiration here is gizoogle which managed to plug into google API (they have the same results as google) while still not using custom search (custom search displays adds, and there aren't any on this website). So I assume they have some sort of proxy, but how come google let them run those queries?
Edit: It turns out that the custom search API is also limited. So, how did gizoogle do ?
Ok here is how I solved this problem:
It turns out that google has a lost API (probably deprecated so be aware of this) for client-side ajax search. It looks like that:
http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=test&rsz=large
Just go to that url to see what results it gives.
So basically here is the process:
The user types a search
It is sent to your server in ajax
The server might modify the search depending on your application (filtering forbidden words or whatever)
Your server polls the ajax web service from google - don't forget to add the getparameter userIp which is needed to avoid limitations (google limits incoming queries from each user, so your server has to tell google that it is making a request on behalf of this userIp
You send back the results to the client, and then use javascript to display them
The only drawback is that the search must be made in ajax, meaning that the page is empty at load and filled later. But you could actually use get parameters in URL to preload the search and fill the page before sending it to the client though.
Google Custom Search (GCS) has a free mode and a paid ("enterprise") mode.
Both modes are regulated by a terms of service (Custom Search Terms of Service) - make sure you read carefully.
From what I understand, you can use the free mode and search as much as you'd like. Because google is returning the results, they also return ads, so they get paid that way.
The paid mode gives you access to the API, and let's you turn off the ads and do other things. But it comes at a cost.
I've been combing through the documentation and terms and the like -- it's really not Google's best effort. But if you are using it exactly as they describe, it's pretty standard, really.
Depends on your project size and funds available but you could get a GSA http://www.google.com/enterprise/search/products/gsa.html
The Dr Oz webite uses this to index and pull in results from partnered sites, you would have the ability to include Google results as well. Highly customizable with the works from source weight ranking, filtering options to custom output.
I'm looking for a way to use Google Drive to share data between a Android app and a web page hosted on my server. The web page should use JavaScript to retrieve and store data in Google Drive.
The data should only be exchanged between the browser of the user and Google Drive.
According to the documentation of accessing Google Drive from JavaScript you must first create a application using the Google Cloud Console, register it and get a client ID before you can use JavaScript to access the data.
I don't want to have to maintain a Google hosted application. Is this possible?
The only point of apis console is to register your applicaiton or in your case script with google. Its baslcy just there way of keeping track of whos accessing what i think. Once you have it registered you normaly would use a clientid and stuff as well as Oauth2 to allow users to access there google drive with your script. But you wont need to go into that becouse its your application thats storing its data there and not a user.
You will probably want to look into a service account.
https://google-developers.appspot.com/drive/service-accounts
If you want to use private spreadsheet then you have to use authentication, in this case google project is easiest one. If you don't want to use private then you can publish your spreadsheet and then make ajax call without authentication/goole project.
You're not the first person we've heard this complaint from. People want to be able to log in and create an API key without having to deal with extraneous cloud services. We're working on some things to make life easier for customers like you.
Unfortunately there is no way to do this at the present time. That said, you don't have to actually maintain a separate application. You can create a project and only use it to manage APIs.
I have a browser extension (google chrome) that fetches and displays some public tweets, based on user input.
I've been using the Search API just fine, but according to the API changes, I have to migrate to API v1.1 where authenticated requests via oauth is required.
I have no previous experience with oauth, but it seems like a bad idea to implement it in pure client-side javascript, as the consumer key/secret will be exposed.
If I implement the authentication via a browser npapi/ppapi plugin, will it provide the needed security ? or does this mean that I have to dump this project and simply move on ?
Thanks.
You need to obtain an access token so that you can read data on behalf of your users. This involves implementing Twitter's 3-legged auth, which is very similar to implementing Twitter sign in (which thankfully is well documented).
The link below will take you to Twitter's overview of the differences between the two approaches to authenticating. From there you can get to the code samples that you'll need to implement this securely yourself.
https://dev.twitter.com/docs/auth/3-legged-authorization