Firebase hosting with url dynamic paramaters? - javascript

I'm new to firebase and I'm trying to understand the limits of Firebase hosting.
I've created a static webpage that adjusts the content via the url paramaters.
For example the following url will provide me with the data I need to populate my webpage. http://example.com/recipe?name=pizza&time=30&lang=en
The url itself it obviously dynamic (values may change)
My question is can I do that with firebase hosting?
It seems you can redirect urls, but not to set a route.

Firebase definitely provides the domain. I don't think it will automagically handle the query parameters for you. For that you will need some sort of front-end routing mechanism. Check out this article on building a VanillaJS router and how to take advantage of the HTML5 History API.
For instance, I write VueJS apps and I use their vue-router package to handle app routing. It works flawlessly on Firebase apps.
That said, Firebase now has Cloud Functions which, I heard, allow you to run server-side code, like a NodeJS. So maybe you can use that feature to handle your params and build your static page accordingly before serving it to your visitor.
I hope it helps.

Related

Web only for authenticated users Firebase

I am developing an HTML webpage using Firebase, my working tree is:
css: folder with CSS style files
js: folder with Javascript files
login.html: logging in page
signup.html: signing up page
app.html: main application page
I would like to restrict the app.html access only for logged users. I have implemented in Javascript some scripts to authenticate users via email and password using the login.html and signup.html pages. For the project, I use the hosting tool that offers Firebase. However, I'm not sure whether I need to apply this capability with the hosting tools or the real time database or other. Maybe the solution is to upload my web as a real time database resource and then, control the access to some paths modifying the database.rules.json file, but I don't know how to implement it.
Thanks for your help :)
All content on Firebase Hosting is publicly available. There is no way to restrict access to your HTML or JavaScript or any of the other resources you host on Firebase Hosting.
Also see:
Can Firebase hosting restrict access to resources?
As one of the answers there says, you can control access with Cloud Functions, but at that point it's not a static resource anymore.
It's pretty common indeed to leave the resources on Hosting unprotected, and then restrict access to the data that you show in the page, which may be loaded from one of Firebase's databases. In that case you can control access to the data with the security rules, which are fully documented here. If you're using Firestore, there's also a codelab making it easier to get started.

Is Firebase Storage Connection possible for TypeScript/HTML/CSS Project WITHOUT Angular or React

My goal for the project portion is to be able to have a functioning login and register page using TypeScript.
Currently my code works without a database, but I wanted to use Firebase to register user's usernames and passwords, so they can login with ease.
The only tutorial I have found only use Firebase with Angular or React, and I was wondering if there was a way to use Firebase storage without it?
The IDE I am using is Intellij.
For now Firebase would be saving the username and password, but later my plan is to use Firebase Storage to save some text data to the account.
Firebase can be used without any specific framework. While there may be binding libraries to make it easier to integrate with common frameworks (such as Angular and React), the base Firebase JavaScript SDK for the web is completely framework-agnostic.
The Firebase documentation doesn't assume any specific web framework, so I recommend starting there: https://firebase.google.com/docs/storage/web/start.
I also recommend taking the Firebase codelab for web developers, which also doesn't require any specific web framework: https://codelabs.developers.google.com/codelabs/firebase-web/

How do I hide database connection information for a vanilla HTML/CSS/JS GitHub Pages project?

I'm working on a school project using vanilla HTML, CSS, and JS. When compete, we're expected to have the repo working via GitHub Pages. It's above and beyond the scope of the assignment, but I wanted to connect to a Firebase Firestore database.
The question is, how do I hide the API key/information, using only vanilla HTML, CSS, and JS (no frameworks), and have a working GitHub Pages demo for the instructor to mark?
I've looked at a number of websites and YouTube videos, but every tutorial I've come across is either using a framework or some stack of packages that would go against the 'rules' of the assignment. I can use a .env file, but to my understanding, because the repo is public the key would be public.
Any advice would be greatly appreciated.
The answer is .env files (sort of).
If you're building a frontend project and you're connecting the front end directly to your database, your credentials will be visible.
The correct way to handle keys is to put them in your backend API. Of course, when I asked this question, I wasn't "there yet".
Your backend API can have a public endpoint that listens to incoming requests. You don't need to include your database credentials in the request coming from your frontend app. It hits your backend api at its public endoint where your backend code then handles the incoming request. On your backend you have the connection to your database with the necessary credentials. This is how you are supposed to build it.
For beginners, you might want to try Google Firebase. With Firebase you can create Firebase Functions. With these, you can create a simplified API endpoint to target with your front-end requests. It triggers the Firebase Function to run, and inside this function, you can store your private keys/credentials. Because your Firebase Functions run on your own secure backend, the client never sees the keys.
If you're learning or familiar with Vue3, here's a good article to check out: https://www.bezkoder.com/vue-3-firebase/#more-9260

Integrating a wordpress site with a meteor members area

I have
a wordpress landing site/blog on example.com
a meteor app member area on members.example.com
This has worked very well so far - both technologies are very suited for each part.
I'd like to add some client-side functionality to the wordpress site that communicates with the meteor app. At the very least it should be able to retrieve log in status and username from the meteor app. Additionally I'd like to add some forms that interact with meteor data.
Is there a best practice for this?
I would suggest adding a REST API to your Meteor app which exposes the data you want via HTTP Methods. GET for things like getting the user login state or username. POST to create the forms you would like. I cannot describe how to do this any better than what was said on Meteorpedia, so I will just refer you there:
http://www.meteorpedia.com/read/REST_API
From there you would call the REST API from WordPress. I am by no means a WordPress expert but I do imagine there are probably a number of plugins and there is probably built in functionality in WordPress to call a REST API from the client side. If not, you could make AJAX calls using custom JavaScript or jQuery or whatnot.
I have a very similar setting for my app!
I also thought of ways to interact between my two sites. Basically, you would have to set up an access between Wordpress and your app's MongoDB database, and I am sorry to say, it does not seem very likely to happen in a near future...
Best thing you could have is actually going the other way (accessing Wordpress's MySQL through your Meteor app), using a package like meteor-mysql, and even that would only allow you to read the data in your wordpress database... but reactively! Wooo!
To my knowledge, that is the best "interaction" I can think of that you can get (without extensive hacking) so far.
Then if you are ready and willing to code your way through, you can implement calls to your meteor server using the meteor-ddp-php client in your WordPress site. Just make sure your Meteor methods are safe to call.
If you want to load your meteor application into you wordpress blog then you could just load it in as an iFrame.
To communicate with the meteor application just build some endpoints onto the meteor application which can be used on the wordpress blog. Because meteor is reactive the changes you do with the endpoints (Probably rest since is the simples option imo) will be directly shown in the iframe.
My 2 cents

Best practice for communication between app and server when using PhoneGap/Cordova

I'm working on a PhoneGap project using Ionic. It's basically a chat app, so I need the user to be able to register, login and send messages using a backend API on my server. Naturally this needs to be secure, so I'm wondering what the best way to securely communicate with an API endpoint is, when using a AngularJS and PhoneGap.
Ideally, it should not require a server cert, as currently I don't have the funds to purchase one. In previous projects, I used a method where each account was assigned an ID, and a hash consisting of a secret + their ID, which had to be included with each request to ensure that the user couldn't forge requests from another ID, however I don't know how secure this method is.
Any tips, suggestions or read material would be really appreciated. I understand this question sounds subjective, so if possible please answer based on facts, security disclosures and any documentation on methods.
I know the solution to all your needs and it is called Firebase.
How your requirements will be met by firebase:
1. You are using Ionic to build your hybrid app(you are cool!) and that means AngularJS.. Firebase has the perfect library called AngularFire, that uses AngularJS to interact with the firebase servers.
You are building a chat app, awesome! Firebase has real time syncing between your app and database. That is a lot of work saved for you by Firebase (Claps).
You need to register users, Firebase has super easy user register management(both OAuth and manual registration)
Security! It is super important and Firebase has you covered even here. Implementing user level security is super simple using some simple json format security rules. I will quote this from the site "The safety and security of your data is our top priority. Firebase requires 2048-bit SSL encryption for all data transfer and allows you to restrict reading and writing via granular access controls and custom authentication.
All data is replicated and backed up to multiple secure locations."
It is free(upto some level. Do some research about it, I am not sure).
Your basic id + hash security measure is not bad at the same time not perfect or dependable. Firebase has you covered here through simple login and read/write rules and as well as some closed sourced security.

Categories