I am building a web page for bookings.
This page needs to check one of my public agendas to see if a trailer is available:
Example event
I want to use the google calendar API for this purpose, the API needs to give me a list of the dates in the google calendar. For this purpose I made a page based on the google calendar API javascript quickstart.
The only problem is that it loads the calendar of the current user (for example freddi#gmail.com) but I want it to open my calendar (thomas.leflere#gmail.com). How do I modify the google API calendar javascript quickstart code to achieve this goal?
Google Calendar API Javascript quickstart
The references you've seen involve non-REST APIs. Getting this programatically is possible using a service account. Details on how to create a service account are on Google's page about two-legged OAuth, a snippet is
Typically, an application uses a service account when the application
uses Google APIs to work with its own data rather than a user's data.
For example, an application that uses Google Cloud Datastore for data
persistence would use a service account to authenticate its calls to
the Google Cloud Datastore API.
Since this method involves putting a private key on machine initiating the API call, it seems that doing it directly from the browser in JavaScript is not going to be viable. An intermediate server would be needed.
The better alternative for JavaScript would be to invoke an Ajax REST API of a public calendar which is now in version 3. You can find documentation on the API at https://developers.google.com/google-apps/calendar/v3/reference/
Related
I'm creating an application using React and Laravel.
I integrated successfuly Google Analytics using this react-ga so when I check my Analytics dashboard the statistics of the pages of my project are there.
Now I want to display those data in my application to the users.
I've searched alot and I found that I need to use Embed API. The problem here is that it request an authentification each time a user want to access to the data. Searched some more and the solution was apparently to setup a service account as a user in Google Analytics.
Now that I have the account set, the API key generated, I don't know how to call the data from the server to my application.
There is this guide for javascript but I had a hard time implementing in React.
I'm trying to develop a react native application that won't require a user to sign into a bunch of different services every time. For now I'm trying to get the google side of things setup where a user can click a button which will allow me to link my application to there Google user account so that when they next visit the app the don't need to log into google for the functionality to continue to work.
I'm having a hard time finding documentation about how this link can be set up but I have found this page on Google which suggests it's possible.
https://myaccount.google.com/accountlinking?hl=en-GB&pli=1
The idea would be a bit like last.fm handles Spotify. a simple login and approve the service will mean that last.fm can listen to the Spotify account without requiring further auth every time its doing said functionality.
I can't find much in terms of tutorials or documentation on this specific thing.
Google OAuth and Scopes
It sounds like you're looking to implement Google identity federation in your app - specifically, OAuth 2.0. Google gives you quite a few options depending on the complexity of your authenticated user experience.
As for permissions, the Google API documentation calls these scopes. Here's a list of all the available scopes for every Google API. Setting scopes can take a few additional steps depending on which Google apps/information your app needs access to. By default, the Google API scopes for a new project are email, profile, and openid. Here's a video explaining how to view and modify the scopes in the Google API console(mentioned below).
1. Google Sign-in Button with scopes
The simplest method would be to follow this guide from Google which explains how to set up Google Auth on the frontend.
In short, you first set up a project within the Google API Console. Create a new project and take a look at your project scopes by clicking the Credentials tab, then the OAuth Consent Screen tab. Then back in your frontend code, include a script tag to call the Google API related to authentication functionality. Next, include a meta tag containing the client key found in the Google API Console. Then just create a sign in button with a certain class and data attribute(mentioned in the guide) and users should be able to sign in. This will return a small amount of user data in your code which you can use for validation within your app.
2. Firebase with scopes
A more complex solution would be Firebase authentication which returns even more user data, the use of a database to save and retrieve data related to the user and their session, and many other handy features that would normally be time consuming to develop. As such, Firebase is often called a backend as a service(BaaS).
To get the same level of granularity of scopes as the standard OAuth scenario outlined above, you may need to use a combination of the two as described in this article from Fireship.io.
I'm using Mobirise to build our club's website, and they want to show some of our events at the top of the page.
I thought I could make something like this, with the outer blue being where the calendar frame would end (very rough drawing, don't judge too hard).
Tockify had something pretty close, but I figured there's a way to code something like this, or perhaps another service that's free that can do this. I would prefer not to use PHP, but embed some JavaScript into the HTML that can do this.
Thanks!
To retrieve events from an account's calendar, you need to connect to the Google Calendar API using authorized credentials.
For this you need to create a project in Google Cloud Platform, and enable the calendar API for that project. You will also need to create credentials for your app to use when making calls to the API.
After you have a project, credentials and you have enabled the Calendar API, it is time to code a script that uses the credentials to get the data you want from the Calendar API.
There are several language client libraries for each developer's need. You could use JavaScript for your application.
Here is a quickstart that should get you up and running to make those Calendar API calls you are looking for.
Calendar API Quickstart
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.
I'm new to Google Calendar APIs and what I'm trying to do is to display today's events from a public Google Calendar using JavaScript.
I've found this resource(dead link), but I can't figure it out how to modify it so that it will output only today's events.
Any help will be appreciated.
Take a look at the API: https://developers.google.com/calendar/quickstart/apps-script
You can set the start-min and start-max parameters.
AuthSub proxy authentication is used by web applications which need to authenticate their users to Google accounts. The website operator does not need access to the username and password for the calendar user - only special AuthSub tokens are required. Please see the AuthSub documentation for more detailed information.
When a user first visits your application, they have not yet been authenticated. In this case, you need to print some text and a link directing the user to Google to authenticate your request for access to their calendar. The Python Google Data API client library provides a function to generate this URL from the CalendarService class. The code below sets up a link to the AuthSubRequest page.