Automatically access my Google Analytics and display chart publicly on my website - javascript

I'm having some difficulties in figuring out the best way to do this:
Using Google Analytics API, or similar Google API, I would like to track a user's activity from the moment they access the page until they reach an end page, which is gonna show them back some charts with THEIR activity on my website. (Nothing too detailed, just how long they've been on each page, how many session etc.)
So far, I've managed follow the Embed API example to access THE USER's Google Analytics account and draw a chart by asking for permission, however when it comes to showing data from MY account I just can't seem to figure it out.
I want my website to automatically use my account (or service account) and draw some charts from my google analytics data and show it to every user.
What would be the best way to approach this? I've read something about access tokens but I don't know if that's the solution. Moreover, my hosting is a shared host and I don't think it allows installing Python Modules like in this example.
Cheers for the help!

If you want to show the user your data, you will have to perform the authentication on the server side. There is no way around this. It is after all, your account's data that they are accessing.
If you are unable to install Google's client library, you need to:
Get an access token using cURL (see how here)
Use that access token to perform server side authentication for the user (see how here)
The user should now be able to access your site without logging in, and see YOUR data.

Related

I need a way to get updated oauth tokens for google photos

I'm currently working on an application for myself in which I need access to my own photos/albums on Google Photos. I have gotten by using the oauth 2.0 token generated in the playground, but I'd like to get a more permanent solution that does not require me manually regenerating the token. Is this possible with Google Cloud? The app is meant to run in daemon, so this makes any option with consent pages unusable. The scopes I'm using are:
https://www.googleapis.com/auth/photoslibrary.sharing
https://www.googleapis.com/auth/photoslibrary.readonly.appcreateddata
https://www.googleapis.com/auth/photoslibrary.readonly
I have tried using the https://accounts.google.com/o/oauth2/token and https://accounts.google.com/o/oauth2/auth endpoints to generate one programatically, but the only minor success I had was /auth sending me to a consent screen. I've also looked at using the refresh token given by Google Oauth playground with no luck there either.
Just looking to see if there is anything that I am missing.. This is my first post on stackoverflow, so please let me know if you need any more information.
I was unable to make it an internal app as it was for personal use and not for an organization.
Solved this by first using the google api package to create my own access/refresh token for my oauth client, then calling the https://oauth2.googleapis.com/token endpoint each time to generate a valid access token. I hope this can be helpful to someone else!
According to the setup documentation, as long as your app is marked as internal, you should not need to verify the app and can use it without the consent screen.

Seeking decent documentation on creating a way to link a Google account with my app

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.

Google Calendar API key embedded in JS?

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.

Implementing Facebook's Graph API without user authentication

I'm newbie to Facebook Graph API and Facebook JavaScript SDK but I'd like to know some things:
Is there any way to put my Access Token in a Open Source application without actually showing it? I'm using GitHub and for security purposes I'd like to make it private.
Can I show my user information without asking the users to Authenticate themselves?
Where in Facebook Developers App can I allow more "scopes" to share publicly? For example, user_photos, user_posts, user_likes, user_status, etc...
These "scopes" that Facebook allows by default are actually the information I'm getting from the user while I'm Authenticating them right?
Just to clarify what I'm trying to do, I want to share things about my Facebook Account through the Facebook Graph API in the gh-pages branch on GitHub, but I don't like the idea of having to authenticate every single user that has access to the page.
I'd like to make my user information public, but don't want to show my access token, because it's Open Source and it can get dangerous eventually.
If you'd like to see my repository and have a better understanding of the project. You can access https://github.com/iszwnc/rye
If I recap:
you don't want to share your app access token (good!),
you don't want your users to authenticate.
Basically, you can't hide your token and let your users query Facebook directly. You need some server-side code on a machine that would be the only one reaching Facebook. Your server would play the role of an interface between Facebook and your users. So you will have to:
do the API calls from a server using server-side code (i.e. Node.js),
save the information you want in a database. This is optional but better to avoid the same information to be retrieved multiple times, thus avoiding your future 100 users to (voluntarily or not) reach your app API limit.
let the users query your server using some client-side code (i.e. AngularJS) in order to retrieve what you and only you know (remember, you own the token).
About Github, don't share your token on it. People can generate their own token if they want to run your app. Here are several suggestions:
Add your token to an environment variable which you can set just before launching the app (don't forget to mention that in your README),
Add your token to a file:
Create a credentials.js file that contains an empty token:
// Please use your own token
var APP_TOKEN = '';
Commit the file to Github,
Have a .gitignore file that contains the credentials.js,
var APP_TOKEN = 'now-you-can-put-your-token-here';
Good luck with your project, it looks exciting :-)

Can I make Google Drive Spreadsheets act like a MySQL database?

Can I use a Google Drive spreadsheet as if it were (similar to) a MySQL database?
I'm thinking of using it as a player database for an HTML/JavaScript web game. The player's username, password, and score among other things would be saved in the database. It would be really interesting if it could actually work, however it of course has to be secure and private so that no player (or anyone on the internet for that matter) can access it except the owner of the spreadsheet which would be me for example.
I know that Google Apps Script allows a user to access their own spreadsheet and read/write to it, but is there a way that I could allow other users to "save their score" to MY spreadsheet WITHOUT giving them permission to view/edit the spreadsheet directly?
Also, i'm assuming PHP/Python/some other server-side language would have to be used in order to hide my account info which I also assume would be needed to open and close the connection with my spreadsheet.
Anyways, I'm just wondering if this is feasible.. literally turning a Google Drive spreadsheet into a database that players can update their score to but not have direct access to it.
This may be a stupid idea, so your opinions are welcome!
Thanks in advance!
This is the right way to do it.
Another post explaining the same idea.
Essentially, we publish the spreadsheet and query it using a "select"-like syntax. For instance:
this query which reads something like:
https://spreadsheets.google.com/tq?tqx=out:html&tq=select+B,C,I&key=phNtm3LmDZEObQ2itmSqHIA
This is for querying data (reading). For inserting, you can use google forms (create a form, see its html and submit using a http post request). I have not explored update yet.
And yes, this has to be done server side.
Answers saying you need an extra server or oauth are incorrect.
Just publish an appscript (anonymous public) service using your permissions. For all operations always pass the username and password thus you validate users on every call. Call the service from client js using ajax.
Store it in scriptdb [update: scriptDb is deprecated now]. If you use spreadsheet for storage it will get slow with many rows.
In any case it will be slow if you use appscript.
Without a server-side service that implements another authentication layer for client libraries and use Google auth to talk to Drive, this is not possible.

Categories

Resources