I'm experimenting with these 2 technologies to make a secure web app [Currently learning React (60%) and Django (<50%). This is intended to be like a medical database, so doctors and nurses enters their patients' information. They need to login obviously. I wanted to implement React-based UI (And not using the classic method to create views from django), so I've found many tutorials just like this one:
https://www.digitalocean.com/community/tutorials/build-a-to-do-application-using-django-and-react
It basically turns Django into a restAPI, and then the React frontend uses axios to retrieve data from the endpoint. Sounds not bad at all (comparing to the native method of rendering data in a webpage from Django), but the problem is that I have no idea on how to make this secure, you know, Django provides an auth system, which is pretty good and secure, I have to say, but in a project with this structure, the auth needs to be done in React, so there many questions appear:
To start with, is it a good idea to make a project of this structure? (If no, then what could be a good one)
If it's a yes, how can I protect the API so only logged in users can interact with it? (What mechanisms to ensure protection)
Yes, this is absolutely a good idea to separate the client application and the backend server application.
You can access the backend through the rest api basically with any frontend framework/app/script.
Customers are able to extend their own applications with the abilities of your backend service.
You can create multiple different frontends that use the same backend or different parts of the same backend via the rest api (multi-branding, reselling). Or you can just swap the frontend framework every second year to a new one.
It's also easier to create different automations by using the rest api.
And the list goes on.
For django rest api auth I would recommend Token Authentication which is already included in the Django REST Framework and for React use this tutorial for implementing the login and the token handling.
And don't forget to use TLS on your servers, and create API documentation. (Example)
Related
I am developing a React app that needs to be connected to a backend server so that the user can login using Google OAuth, and then once that access token is granted, they are able to see the rest of the app. However, I am having a difficult time understanding just how to connect the front-end app to the backend. If someone could enlighten me on this, using SpringBoot MVC and PostgreSQL, that would be great. Thanks!
You have several ways to communicate your FE(React) and your BE(SpringBoot MVC).
You can have REST endpoint on your Backend, and then try to communicate from your react application, you can use [axios][1], request or the native fetch.
Then you can just make calls to the BE, and try to read, update, delete or create information, you should read about CRUD.
The most common this days is build something like this:
(FE) <---> (BE) <---> (DB)
But I strongly recommend you to read more about:
- React SPA.
- REST, you can also read about SOAP or even GraphQL.
- CRUD.
You will found a lot of tutorials with very good examples of how to do it.
Hope this helps you to understand a little more what approach to use.
I have set up a Symfony based API which is being used by an Angular front end which is totally dependent of it (User registration included)
I have read multiple threads recommending using WSSE or FOSOAuthServerBundle but I'm not sure about the best method ?
If I understood correctly, WSSE has to send for each API request x-wsse headers which make me think it is not the best suited for performance.
About the FOSAuthServerBundle I have never used it and looks a bit complicated to me compared to WSSE, thus that's why I'm asking there before trying to implement it.
I have 2 simple groups of user (basic and admin), what would be the best way to secure my API, additionally providing an easy way to keep user persistence (I mean accesses through the different pages)?
How should it be in the Angular front side ?
Thanks for your help.
Refs: http://blog.tankist.de/blog/2013/07/16/oauth2-explained-part-1-principles-and-terminology/
http://obtao.com/blog/2013/06/configure-wsse-on-symfony-with-fosrestbundle/
It all depends on what your requirements are.
First of all, OAuth 2 is an authentication mechanism/spec which you can use in combination with sessions/bearer tokens/... This also applies for local accounts (since you want to do user registration).
FOSAuthServerBundle is a bundle to implement the server-side of the OAuth2 specification. This basically means you can expose your OAuth2 side of the API to other applications and allow them to use your accounts to authenticate. Think google login, twitter login, etc but for your own app.
This all has nothing to do with the way you validate / authorize your requests after the initial login has taken place.
Do you want to implement stateless authentication? Then I would recommend using the new JSON Web Token (JWT) specification.
See Symfony Bundle (LexikJWTAuthenticationBundle) and JWT description (JWT.io)
There are many resources on it from the angular side of things and the API part is pretty straightforward.
WSSE does not seem suited to implement in a RESTful API and I have no experience using/implementing it so I cannot comment on it too much.
So, I've been fiddle:ing with some isomorphic React + Flux lately and have found some concepts quite confusing to be honest. I've been looking into best practices about how to structure isomorphic apps and are looking for advice.
Suppose you are creating a webapp as well as a mobile app backed by the same REST API. Do you bundle your REST API together with the webapp? I've seen people advocating both bundling and having a separate codebase for the REST API.
Any advice or suggested reading is appreciated!
Fluxible (atleast from the examples) does advocate using the service layer inside the application calling it directly from the server and via xhr from the client without duplicating the code
https://github.com/gpbl/isomorphic500/blob/master/src/app.js
This is an example I followed religiously while building the isomorphic app
The idea is very simple. Let's assume you have SPA and a backend wich provides REST API.
SPA (in browser) <====> Backend REST API
in isomorphic case, it is absolutely the same, except you will run your SPA on the server too.
So, it will work like that:
SPA (in browser) <====> Backend REST API
SPA (on server) <====> Backend REST API
If you have a mobile app then it will be:
SPA (in browser) <====> Backend REST API
SPA (on server) <====> Backend REST API
Mobile app <====> Backend REST API
Here is a real isomorphic production application opened by us to the community - https://github.com/WebbyLab/itsquiz-wall . You can just clone it and run.
Here is my post which describes all the ideas behind the app in details.
Let's see if I can help you.
Please keep in mind that Isomorphic Javascript is quite new and it is hard to find clear definitions for every use case.
By definition, if you create a RESTful application you should have a clear separation between server and client:
"A uniform interface separates clients from servers. This separation
of concerns means that, for example, clients are not concerned with
data storage, which remains internal to each server, so that the
portability of client code is improved. Servers are not concerned with
the user interface or user state, so that servers can be simpler and
more scalable. Servers and clients may also be replaced and developed
independently, as long as the interface between them is not altered."
Regarding isomorphic applications, the main benefits are:
Not having a blank page when the user first enter the site (points for UX)
Therefore it is SEO friendly
And you can share one logic between server/client (for example regarding React Components)
This means you should deliver rendered React Components from the server to the client when the user first enters a URL. After that you will keep using your REST API as usual, rendering everything on the client.
If you can, share more details about your case and it will be easier help.
I wouldn't recommend you to bundle the REST API in the browser, as you are limited to using browser-compatible modules in your API, and you won't be able to make any direct database calls.
There's a library that makes it so you can build your APIs in an isomorphic fashion, and re-use it in the client and server without bloating or breaking the bundle. This is what we're currently using in a big single-page application.
It's called Isomorphine, and you can find it here: https://github.com/d-oliveros/isomorphine.
Disclaimer: I'm the author of this library.
Context: I'm a beginner programmer, self taught in the hope of making a SPA. I've started with JavaScript, Jquery, PHP and MySQL, and now feel pretty confident with all. I've started with Ember, and am now moving away from having a PHP API to Node. Which has then brought me closer to Meteor... I'm aware I'll need to use Mongo instead, but having an integrated front and back seems to be sensible and have some advantages.
So my question is what are the advantages of having a separate REST backend API (eg Express) rather than an integrated front/back (eg Meteor).
One that springs to mind is that my app will be tablet/pc based, but in future I'll want a different mobile version, so I'd be able to use just use the same API. I'm conscious that the above question is the main concern with this stack question, but perhaps if a meteor developer could clarify whether this is indeed a concern.
Thanks in advance!
well for me you'll get a lot of advantages using a rest API, they are lightweight, extensible and overall reusable.
today it's a trend to use a vertical architecture that means having a RestFul service with a single responsibility, why because it scale better and it's easier to assign a team to an api, so that way you'll be able to manage several teams and apis in a very ordered way. This is probably how Twitter, wunderlist and other companies works, because it's a solution to scale better.
take a look to this talk by Raffi Krikorian he was the head of architecture of Twitter for a while is a little bit old but it worth every minute and to illustrate some of the advantages.
Also you can look at the diagram below, I did while ago it explains the differences between the MVC and API first type of architecture.
I've authored one rest app using angular and rest services and it has been a very nice experience to me there's no way back.
good luck
Meteor doesn't really "integrate" the front (client) and backend (server) as you describe. It still maintains them as two separate layers. The beauty of meteor (aside from the insanely awesome reactivity) is that it uses Javascript everywhere, instead of using JS on the client and some other language on the server, so you can use the same APIs on both the front and backend. Although Meteor does snazzy things like let you write client and server code in the same file, it still requires you to distinguish between the two, and server code is still stored only on the server and client-side code is still served down to the client.
Meteor is still young, but the developers and community are very active, and everything you described can be achieved with it at this point. I've been working with Meteor for about 6 months now, and it hasn't let me down yet. I'm working on a production-level application that also requires exposing a REST API for consumption in mobile apps, which I'm doing quite successfully with Meteor (I just updated a user profile using a REST endpoint from an Android device and watched it change in the Meteor app in realtime. So cool!).
I was using this great package, RestStop2, for building REST APIs in meteor, but it was unfortunately deprecated, so I released an updated version. Check it out for an example of building REST APIs in Meteor. It's available through the Meteor package manager: https://atmospherejs.com/nimble/restivus
So to answer your question, you always want to separate the REST API into it's own layer, but that is entirely possible with Meteor. To make it clear, you would never consume this REST API from within your Meteor app. Meteor uses DDP (not HTTP), which gives you a much more direct connection with your server, so you're doing something wrong if you're accessing data on your Meteor server from a Meteor client via HTTP. Of course, with Meteor, you have the advantage of being able to use existing code from your REST API.
There's a really good write-up that explains some of the considerations of writing a REST API in Meteor: http://www.meteorpedia.com/read/REST_API.
The design of a architecture separated in layers like frontend, backend (Rest Api) and DB, is for obtain a better a scalability, reusability and logic separator of features of the application. For example:
Today make a web applications separated in 3 layer (frontend, backend,
and databases), if tomorrow you wanna do a mobile application you can
develop the application like a extra project in the frontend layer,
but use all the features developed in backend. Then the frontend
application not need servers why run inside every device, but maybe
the load in the backend servers increase, and you only need add 1 more
server in the backend layer.
Its a little example, but is the most common case in this new era of mobile applications.
Remember always this in MVC architectures:
Frontend: Always call services from the backend, render the view, and capture data. Sometimes make a litle logic.
Backend: Receive the request, apply all the business logic, read and write operations in databases, and return a response preferred in json format.
Model: store data, backups, slaves, etc.
PD: If you use meteor in this example you gonna need to make a api Rest to develop the mobile application.
I've picked up Angular and am now developing two separate applications, the frontend, Angular app, and the backend, the Laravel app.
As of now my backend app is just an API endpoint that handles requests, database interaction, logic, validation, etc.
However, what stops someone from requesting /api/users/1 and getting that data?
Right now there is nothing in place that prevents this from occurring.
What's the best way to prevent this from occurring and verify the request is sent through the application and not through something like http://hurl.it from some random user?
You should first evaluate what routes need to be protected, and who should have access. Sometimes it might be fine to leave them open to the public.
Once you've figured that out you have a few options. I personally lean towards the oAuth 2.0 protocol. Some people find it to be over kill. Then there is also WSSE, I personally feel like today there is far better resources explaining the use of oAuth and would probably be easier to follow.
You can google around for oAuth server libraries for laravel. One such is: https://github.com/lucadegasperi/oauth2-server-laravel
You will also probably want to enable CORS if your angular app is on a different domain from your api. IE: api.example.com (holds api). And example.com is where your app lives.
For CORS laravel also has some packages, one such being: https://github.com/barryvdh/laravel-cors