How to set my url only available for a period of time? React - html

I am working on my react project and I need one page of my website only available for like 5 minutes.
For an instance, I will send user an email which contain an url, user can visited the webpage by clicking url. However, after a certain period of time (like 5 minute), user cannot access the webpage by clicking url anymore (which means the url is useless.)
How should I create such webpage with url in my React project?

You're going to want to do this on your server. Say you have a route that looks like this, /verification/:id and you send an email to the user with a link routing them to https://my-site/verification/cd5d00c4-ff6c-11e8-8eb2-f2801f1b9fd1. When the email is sent you can store that string, cd5d00c4-ff6c-11e8-8eb2-f2801f1b9fd1 in your database and set a timer to remove it from the database after a specified amount of time if it's still there. When someone navigates to /verification/:id you take the id and see if it exists in your database. If it does, let them verify and then remove it from the database.

Related

Structure of a Node.js Application

My name is Alex.
Sorry for my rather bad Englisch because i come from Germany.
I just started programming with Node.js.
Previously i made some small static HTML and CSS websites.
I have some beginner questions (which might be dump).
I think these questions are very general for now and have therefore not included any code examples.
So far I have written a static HTML website which I host locally on my computer using Node.js and Express.
My Questions are:
Which actions within a web application should take place on the client side and which on the server side. For example, I have several buttons on the start page. With the help of which predefined users can log in. When clicking on a button, the user should be redirected to the login page. The user name of the respective user should be entered directly into the username field on the login page.
How do I implement such a transition?
The username would probably have to be passed to the server using a post call. How does the user get to the next page? Should this be a simple link or should I send the new HTML document to the user via app.sendFile()?
For example, how do I change tags in an HTML document using Node.js. The same example as before a user is logged in and redirected to the next page. Now he should be greeted with his name. The name can be read from a database using the UUID.
How do I get this name into a tag?
Do I need a template engine or are there other ways to change a static HTML page.
Thank you in advance for your help.
In my opinion, security-critical parts logic be placed on the server (logging in, checking balance, authorization, etc.).
Traditionally, no code on the client side is required. You click a link/submit a form, which sends a request to a server, the server responds, the client displays the new page.
Using client side code, however, can make your app smoother and reduce the load of the server. For example: the user clicks on the shopping cart button. Instead of reloading the whole page, the user sends an ajax request, and the server responds with the cart data. Then the client updates the document, displaying the formatted cart data.
You can't "change html tags" from nodejs. You can send a response. If you send a html response, you decide how to produce the response. You can just concatenate html strings, but using a template engine is a better solution.

Is it good idea to authenticate every page of my website?

I am currently using JSON Web Token to authenticate every page of my website except homepage. The idea is to generate token on login/registration with the user's MongoDB id and save that into cookies. Then whenever user tries to open any page, first token will be decoded and then id will be matched with the database records to verify that the correct user is trying to access page.
I haven't launched the website yet. My question is, is it a good practice to access database before every page loads for user or will it slow down my website once more users start coming on website?

How to save a web-application state dynamically?

I would like to create a web application where a user can drag and drop images and text onto a div or similar container. Then, when the user clicks a save button, the application would be able to save the content of the dropped items, as well as the positional information for those items.
Ultimately the user should be able to come back, open then application, and have the images and text back in the exact same places as when they were saved.
If anyone knows a methodology or framework that could assist in accomplishing this, it would be appreciated.
When the user hits the save button, you will need to collect the dynamic state of the current web page (which sounds like images and positions) and send that to your server with some sort of user id that uniquely and securely identifies this user. The next time that user loads this web page, you can either put the state into the web page as it is retrieved from the server or you can use client-side javascript to retrieve that user's state from the server and then dynamically modify the page to match the desired state.
You can save the state to the server with either an ajax call or a post. You can retrieve the state from the server from the client javascript using an ajax call or if the state was already put into the web page by the server, you can just refer to it there.

How does Facebook detect when a user receives a new message & make changes to the html?

I'm new to AJAX and PHP but I know that PHP is a server-side scripting language and so there will not be any changes to the html unless the user refreshes the page or the user submits a form. Therefore I suppose the change of the number in <span id="mercurymessagesCountValue"> when a facebook user receives a message
is AJAX-related.
And this is my guess:
The change of the number is triggered when it is detected that another user [the sender] has inserted a new row into a particular table and each column contains different data: the time, the message, the sender id and the receiver id.
So here's my question... In this case, how is the changes in the database detected and how does it trigger a javscript [or something else] to make changes to the html? Or if I'm wrong... can I know how Facebook does that? Thanks very much!!
If I got the question right, you should check out about pull and push models. Facebook works under the push model: facebook server knows when new message is received and it pushes the notification to the client (website open in the browser).
Let me clear a few things up for you here,
AJAX is simply a type of request being sent by the browser to go grab data from another page dynamically. In facebook's case, they actually have a special type of connection to the client computer to keep the page 'alive'. This way, they can push dynamic updates to the client without the need to constantly poll/refresh a single page on the server (would make large amounts of load).
So, let's just pretend, they are constantly refreshing the page on the server to determine how many notifications are unread -
Client -> Ajax Call -> Server PHP Page -> Ajax Return -> Client
So, in order, the client sends a request for the page to be generated by the server.
The server's php page will then count the number of 'unread' notification rows in the database for that particular user. It will then output the number of unread rows in plain html.
The client then recieves this plain HTML from the Ajax call, and simply updates the DOM with the new number of unread notifications
PLEASE NOTE: This is not how facebook works, but it's a good example of how to set up your own basic notification system if you are new to dynamic coding.
My guess is that requests are sent frequently from the client via Javascript, to the host, asking "has anything new happend since last time i asked?". The answer is responded by the server, with PHP, if it is yes, the new data is delivered in the respond and JavaScript updates the DOM (HTML) with the new data, like showing the red flag or something.
javascript:location.load(t);
(t=time interval)
i guess ,, refreshing a page in every several seconds will pop up the notifications recieved..!!

Facebook connect database transaction help

I am trying to implement a simple login system with facebook, but I need users to pick a username. What I was thinking was to get all the information I need from facebook, request permissions, then add the information to the database, redirect to a form asking for a username and then add that to the database, to the same entry.
I think a transaction is needed so I don't end up with any half completed database entries. But I've only ever used them on the same page, so I'm wondering if this is safe? If it fails then there is no point where I would be telling the database to roll back the changes and it would be with a transaction open.
Is this right or will it be ok?
I think you made it more complicated than it should be :)
No need to enter facebook id into database before username as you can always grab it later.
Forward user to login screen (or better just open login popup using javascript FB API)
Once user is logged in forward them to username picking page (or better do javascript popup without page redirect)
When user is entered username request the current user id from facebook on server side (by either using graph api or fql) and then if everything is ok enter this record to database.