How to connect html to a node.js/express backend? - html

I've been searching around and couldn't find a good solution to this.
I'm working on a school project that built upon HTML (Making a bunch of pages) -> CSS (Styling the pages) -> JS (Adding some functionality) and finally backend using whatever we want.
I've used mongodb and node/express to have a functional sign up and login and it works via POSTMAN, but I'm not sure how to connect that to my existing html file that was made for a prototype sign up/login.
Any advice?

There's several things you need to consider.
If the goal is to authenticate users through your backend you need a way for your front end to communicate to the backend and check whether or not the user is logged in. To do this you'll need the express server to validate the user's login information and send a token back to the user. The user can then use this token to access protected routes on the server.
You can send a POST request to your server containing the login information with the axios library, and have the server redirect the user to a protected url upon a successful request.
I couldn't explain how to do this in this post alone, but here's an excellent tutorial on how to get started.
authentication tutorial

It sounds like you already know what to use for backend, but not frontend.
You need to choose frontend such as React, Angular or Vue.js etc.
and connect your backend to the Server if it makes sense to you.
I recommend to look up React tutorial ( Or any other Frontend ) and move your HTML, CSS and JS to the project first.

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.

authentication from mobile to backend django

Good day everyone. I am stumped at the moment and would appreciate some guidance. I feel like I am a great googler to usually find my answers or resources but for the life of me I can't seem to find any good learning material on JSON requests and responses.
So I took a course that builds a 3 part app. Web app with Django, and 2 mobile apps that make API calls to it. The instructor uses Facebook authentication from the mobile apps and I am trying to set up the apps for username and login and a registration page as well.
I have django models setup and and can make users from the web app but I can't seem to wrap my head around how to make JSON calls from app to Django. When I search for possible terms like authenticate django I get results that talk about only django usage.
Does anyone have some tips or links to resources that would help me understand the login process better. I realize that almost every app has a login which is why I'm surprised that I can't find any good learning material on how its done. Or I'm just searching for wrong keywords.
Any help would be great thanks.
It's really a general question, But i give you a brief on how mobile and django server should interact with each other:
First of all, in your situation I really suggest to use django rest framework, Because of it's rich modules and functionallity like serializers, routers and ...
read more about it from origin documentation here.
For authentication system, You should use a token based system (or session). I suggest use one of django suggested token based solutions for that. In my case i really suggest to use django-restframework-jwt library
(JSON Web Token Authentication support for Django REST Framework).
so whenever you want to send a request to mobile you should provide that token (based on token authentication backend you choose) in your headers of request.
And for login and register you should create APIViews that takes user input, then register or authenticated it with backend and then gives user the generated token for future requests.
And for social auth system like facebook, the main concept is to redirect user from app to facebook oauth links, which if the user authenticate in his facebook will redirect you redirect url of your backend server, then you should capture that request in callback, fetch data and create or get the user and generate the token for that user and return it. so that for furture requests, by sending token to server, server will know that which user is sending this request and handle response properly for that.
And if you want to create a login with mobile, then you need to setup APIs for login, register with django rest which is really easy and you can learn from it here.

Is it possible to build web Api application using dotnet core, MySQL with Authentication and Authorization?

I am trying to work out an application using
Dotnet Core 1.0
MySQL as the data store
Authetication and Authorization
Entity Framework
Ubuntu 16 machine
I have succeeded in creating a sample API to fetch data from MySQL database using entity framework. Now I want to introduce Authentication using email as username and Password.
I tried several method from different blogs but unable to achieve this.
What I am trying to achieve is Custom Authentication for the api where user will send username and password to login Api. The login Api will return an access token and refresh token. Using this access token, the user can call other APIs.
Later on I want to add Google and Facebook Authentication too.
Is there a way to do this?
Everything you want to achieve is possible. However there are some caveats.
Yes you can do this. You will need to use the resource owner grant which is turned off in identityserver 4 by default. I suspect the reason for this is because passing user credentials into an application is an anti-pattern, it is there to typically support legacy systems, also it does not authenticate users in the explicit sense because the credentials could come from an un-trusted source (as an example). You can read up about the grant's generic value here. You can find samples here.
The safer pattern is to use something like Implicit Flow which is good practice if you cannot guarantee trust between clients and your API.
As for social logins this is possible. There are tonnes of samples online but here are the official docs.
There is a project on github, https://github.com/diogodamiani/IdentityServer4.MongoDB and a corresponding nuget package that will send you in the right direction. It's obviously MongoDb, but the same premise applies.

Node.js security

I am building a basic app using node.js and mysql and just getting a hang of it, I would like to secure the api,like only allow certain people to access the data, maybe by passing a certain token each time a user requests for some information, I tried searching for certain tutorials which used node.js and mysql database and security, I am confused as to which security measure to use, I even read about Json Web Tokens but din't find a proper tutorial for that.Please point me in the right direction.
EDIT
What I meant to say was, only authenticated users are allowed to get access to data in the api, when a random visitor tries to access a URL he shouldnt be alowed to without proper authentication,what I am mostly looking for now is when a user is authenticated the user should be a sent a token of some sort so then gets access to private data,I don't exactly know how to go about this whole thing.Would be glad if you could clear it up for me.
I would look at implementing Oauth2 server in your app. I found this article useful:
http://blog.papersapp.com/oauth-server-in-node-js/
No sure what your exact question is about, but I think the below will help:
Node.js security tips: http://blog.risingstack.com/node-js-security-tips/
Secure Express apps with various HTTP headers: https://github.com/helmetjs/helmet
Go on an educational Web security adventure: https://github.com/toolness/security-adventure
Node.js Security presentation: http://www.slideshare.net/d0cent/nodejs-security?qid=c450507b-e491-4e9a-9b05-89d0c82ea10b&v=default&b=&from_search=6
Take a look at http://passportjs.org/ . Passport has support for alot of authentication methods, however, for your API, you will probably want to use OAuth (http://passportjs.org/docs/oauth2-api). OAuth is what most popular APIs use to authenticate consumers.
For simple projects, You can also use basic authentication, which is what you see when you see the browser prompt asking for username and password. This authentication information can be sent in the header when API consumers makes requests.

Using a completely decoupled frontend with user authentication

I'm playing with the idea of having a completely decoupled HTML5 frontend, but still user authentication for a web app. Is this possible or will I run into some heavy browser security issues?
The idea is to have all static content delivered through a CDN on like example.com, and having it fetch dynamic data (and user authentication) through a separate subdomain, like api.example.com.
This would speed up the loading time of the site, and I could keep the frontend stuff in a completely separate repo so that the developers don't have to worry about setting up the backend to develop and test new features.
Is this already possible in some JS framework perhaps, backbone.js, angular.js, ember.js, knockout.js ?
It definitely is, but I think it is more about approach rather than technology. I have implemented what you describe for a project (it's online but don't want to do a shameless plug here, if interested to check it out I can post the link). My stack is java in the backend exposing a REST api for both autentication and business logic. The client is a backbone.js application. I explicitely decided NOT to use sessions at all. It is completely stateless. This of course means that the user must be re-authenticated at every request.
When the user logs in through a slightly modified OAuth endpoint, it gets a token that must be passed at every request. Cookie works in this case as they are handled automatically by the browser. If not passed as cookie, the backend expect it as a parameter. The frontend communicates using the REST endpoints. It's a single-page application, full client side, this means that the backend serves a page that is basically empty, that include few JS files that are the application itself. No other pageload occurs. Logout is done by simply deleting the cookie or not sending the authToken, the server cannot and doesn't have to "forget" about the user. Token are nice as they can be invalidated, both expilcitely or by changing the password. I've chosen this approach as it made it easy to develop desktop app and browser plugin for my webapp without touching a single line of backend code.