How to Create Individual YouTube API Keys for Users in a React Website - reactjs

I have a website that uses the YouTube API, and I am looking for a solution to generate unique API keys for each individual user upon login, so as to prevent multiple users from utilizing a single key. Is there a feasible way to achieve this, or is there a more effective approach to consider?
I am not sure how to approach this issue as I do not have enough information or context about the problem.

Creating additional api keys is not the solution to your issue.
Each application you create should have two projects on google cloud console.
Development
Production
You should then create a single api key used by your application, and Oauth2 client credentials if you need them.
If you run out of quota you should simply fill out the YouTube API Services - Audit and Quota Extension Form and request additional quota.

Related

Securing user data on strapi or firebase

I’m planning to make an app where a user can add content (like tweets) and I’m just curious what are usually the practices in storing these kinds of data. I wouldn’t prefer seeing what my user posts as an admin so should I encrypt it?
I’m also planning on using either Strapi or Firebase for my app.
Any references or some articles to get me started and better understand how to handle data would be a huge help.

How do I authenticate users of a web-app to access GCP data relevant only to them?

I have spent 3 days researching this problem and cannot find a solution or similar use case that shows how to solve the problem, so any pointers would be greatly appreciated.
I am creating a web-app that uses Google Cloud Storage and Bigquery. A user registers on the web app and then can upload data to Cloud Storage and Big Query. Two users could be from the same company and therefore should be able to view the same data - i.e. Jack and Jill work for company A and if Jack uploads a massive dataset via this app, Jill should also be able to view it later.
Another scenario will be I have two completely separate clients with users using this web-app. If users from Company A upload data, users from Company B should not be able to view Company A's data, and vice versa. But users from the same company should be able to view the data within their company.
Currently, I have an app that works for a single company. This has a React front-end that uses Firebase for authentication. Once the user is logged in, they can use the app which sends off API calls to a Flask back-end that does some error checking and authentication checking and then fires off an API call to GCP. This uses a service account and the key is loaded as an environment variable in the environment in which the Flask app is running.
However, if Company B want to use the app now, both Company A and Company B will be able to see each other's data and visualize it through the app. In addition, they will be sharing a project (I would like to change this to allocate billing more easily to have each client have their own project).
I ultimately want to get this app onto Kubernetes and ensure that each company is independent of each other, however, do not want to have to have separate URL's for every company using the app. Also, I want to abstract GCP away from the client. I would prefer to authenticate a user based on their login credentials and then they will be given access to their GCP project (via my front-end) accordingly.
I thought about perhaps having separate service keys for each client and then storing the service key info in Firebase, while using the respective keys for API calls but not sure this is best practice. It is however the only strategy I can think of.
If anyone could provide some help or guidance it would be very much appreciated. This is my first GCP project and have not been able to find any answers on GCP, SO, Google Groups, Slack or Medium.
Thanks,
TJ
First if all, welcome on GCP! It's an awesome platform, very powerful and flexible. But not magic.
Indeed, the use case that you describe is specific to your business logic. GCP provides told for securing access for user and VM(through service account) but not for customer. Here you have to implement your own custom and authorisation logic, with a database (I don't recommend bigquery for website, the latency is too high) to list three users, the companies where they work, the blobs of each company...
Nothing is magic and your use case specific.
If you want to discuss more about which component to use and to start, no problem. Let a comment.

How to secure third party API keys in firebase hosting?

I am using different third party API keys in my reactjs-firestore project. But I can't find a way to secure them in firebase hosting. How can I hide these API keys in firebase hosting?
For example, in Netlify hosting services they provide environment variables feature which can be used to secure the API keys.
that is I can just store the API keys in the variables in netlify and it will be retrieved from there which will be secured.
But in firebase how do I do this?
I can't seem to find a similar setting wherein I can store the keys as environment variables in the hosting services.
if there is no such feature is there another way to secure these API keys?
and for the firebase API keys,
I have already read some answers and understood that firebase API keys will not be hidden.
is there at least some way to secure these firebase API keys to just one secured URL at least? (I know that writing security rules is the best approach but am trying to find other options as well).
I can't seem to find a way to secure firebase project API key usage to one secured URL.
I have tried to find ways to secure the API key but I haven't been successful.
below is how I retrieve data in reactjs code
axios.post(`https://data.retrieval.com/1/data?key=API_KEY`, data)
I am trying to hide the API_KEY in the production code
I want to secure third party API keys in my hosted website.
and also restrict my firebase project API key to just one secure URL.
am not able to do this now.
any suggestions or solutions?
Thank you for trying to help.
and thank you for your time
If you're using the API key in client-side code, there is always the chance that a malicious user can find the key and abuse it. The only way to protect against this is to not use the API key in client-side code, or to have a backend system that can protect access based on something else (such as Firebase's server-side security rules).
Since your backend system likely doesn't have such a security model, you'll typically have to wrap their API in your own middleware that you host in a trusted environment such a server you control, or Cloud Functions. That's then where you ensure all access to the API is authorized, for example by setting up your own security system.
Not sure if this help, but my Firebase Cloud Function use this.
Create your secret by
firebase functions:config:set secret.API_KEY="THE API KEY"
Access your secret by using functions.config().secret.API_KEY
Note: This should only use for server use case, not in the client code. For server I meant Firebase Cloud Function or your backend.
The safe way I've found to store your third-party keys is using the Google Secrets Manager. It is now baked into the Firebase Functions SDK and works very well. You can find the information here, under the section titled "Store and access sensitive configuration information".
Two things worth mentioning:
There is a small bug in the syntax example, they forgot to add the https before onCall.
You'll need to give the service account which runs the cloud function when deployed access to the secrets. Here are the official docs on how to do that. If you are deploying through Firebase, you'll want to look for the service account whose address is [project-name]#appspot.gserviceaccount.com. If you have any doubts about which service account is running the Cloud Function, look under the Details tab in the Cloud Functions section of Google Cloud Platform and it will show you that information. Also, under the Variables tab, you can see what secrets your Cloud Function has access to.
This process makes it really easy to manage third-party keys as you can manage them at your project level and not have to worry about them being stored else where or needing to manage .env files. It also works with the Firebase Emulators and uses the credentials of the user running the emulators for access.

Showing Google Analytics Data in real time

I would like to show number of visitors on a site since beginning of the month, number of users on the current day and currently on site.
I have Google Analytics installed, I tried to solve this issue with Embed API by enabling Google Analytics API from developer console - but I requires user authorization, etc.
What would be the easiest way to show analytics on-site without user authentication and accepting access by Embeded API, etc. Application is written in Angular, so Javascript API is the one I look for.
Thank you for any suggestion.
Authorization has to happen in order to get the data you want. Either you can let visitors to your site authorize themselves, or you'll have to authorize server-side on their behalf.
Once authorized, you can do something similar to what the Third Party Visualization Embed API demo shows. It uses a custom ActiveUsers Embed API component and includes the source code to show how it works.
Whether you use the ActiveUsers component or not, the basic gist is that once the users is authenticated via the Embed API, you have access to the method gapi.client.analytics.data.realtime.get, which you can use to query this data.
Here's where that happens in the source code for the ActiveUsers component:
https://github.com/googleanalytics/ga-dev-tools/blob/master/src/javascript/embed-api/components/active-users.js#L69-L87
Authentication with the Analytics service is mandatory. But the OAuth 2.0 Service Accounts (for Server to Server Applications) can be used to automate it in many cases.
It's unclear to me (from a quick scan) if the Auth options of the Embeed API would work with the automated authentication scheme, you may want to go through the details.
You should be able to use the Analytics Core Reporting API and maybe the Analytics Real Time Reporting API (beta) which work with the automated authentication according to their guides (look for the Authorisation sections on the left frames of the respective guides).
Donno if this qualifies as easy, tho, YMMV :)

Allowing users to login via other networks

I'm currently in the process of dating the data from other networks by the use of Gigya to allow users to login to my site and then post the data with php to my database.
I don't know if this is the best option available as they aren't precise on installing it to post the data etc; they put everything in sub sections on how to do individual things.
I'm curious if there is a custom tutorial on using a different service or making it myself. I've read the API's and developements of some of the site, and facebook using JSON apparently, which I'm not familiar with.
You have two elements in your question.
First, authentication. There are several services offering you multiple networks authentication, but using several of them for a single user is not as common: you will most likely have to do it yourself. To handle multiple identities in parallel, your server will have to store them and manage the session on its own. Gigya is one authentication solution, there is also two other good ones:
http://www.janrain.com/products/engage/social-login
www.clickpass.com/docs (still under development)
Then, using api. To do that, you will have to decide what to do and then call the API yourself using Javascript SDKs or server-side ones. Notice the authentication will need to provide you with oauth (most common authentication method) keys to post messages or fetch data. More here:
developers.facebook.com/docs/api
developer.twitter.com/doc
One thing worth noting about Gigya. The have a function called "showAddConnectionUI" which basically lets users establish simultaneous connections with multiple social networks. For example, once a user authenticates to your site w/ Facebook, they can also connect with Twitter and Google if you want to allow this. The nice thing is that Gigya manages these identities for you so you technically don't have to implement anything on your side... just call their getUserInfo function and they'll return a collection of identities.
Not sure if that helps... we use this functionality on our site and it works well. Here's the link to showAddConnectionsUI:
http://wiki.gigya.com/030_API_reference/010_Client_API/020_Methods/socialize.showAddConnectionsUI

Resources