How to structure websockets in large admin project - websocket

We have one global admin for all our projects in our company. The global admin talks to projects through a proxy api that send the request forward to the projects api.
Example: User X in admin listing users for project Y
GET https://api.adminproject.com/call/{projectY}/users
And the response is coming from
GET https://api.projectY.com/users
The frontend is built with Nuxt and the Proxy API with PHP Laravel. All projects API's can be different languages and frameworks.
Some projects is in need of real-time data and are today received by polling. We need to implement websockets but due to lack of experience I would need som guidance.
What would be a good and secure way to accomplish that each project can use websockets to read/provide data?

Related

How to set up authorization using js-SSR and SPA?

I want to develop my own single page web application (SPA) to get to grips with the modern and highly fluid world of web development. At the same time, I would like to use the page rendering technology (SSR) with built in data into html. However, there is an authorization problem.
Suppose that the user has already logged into the account before, as I imagine re-opening the site:
First request: the client makes a request to the frontend server along with identification and authorization data (for example, user id and token; the only option is to save them in cookies), the frontend server makes a request to the api server, transferring these service data, then the api server gives the information about the user and the content of the current page (in the same json), the frontend server renders this into a finished page and delivers it to the client.
Subsequent requests: the client directly addresses the api server, transferring the same (or updated after the first request) authorization data, receives json and processes it independently.
Actually, I want to move on to the question. Do I understand this interaction correctly? Can you do it differently / better? Are there tools that allow, for example, to use the components of the frontend framework as components of the MVC backend framework, so that one server does the rendering without unnecessary requests? Or a unified tool that includes the same coding for the frontend and backend to solve these problems? I will say right away that I would not like to write a backend in JS.
I can roughly imagine how you can get by with one request when using AngularJS (with a module for single page applications) and any backend MVC framework; although there will not be a full-fledged render, but search robots will not have to wait for my first fetch, since the data will be delivered initially, for example, through the data attribute. But in this case, I plan to choose Svelte (Sapper) and Ruby on Rails as the stack, although I think this is not important.
Thank you for your attention to the question!
Are there tools that allow, for example, to use the components of the frontend framework as components of the MVC backend framework, so that one server does the rendering without unnecessary requests?
If that's what you want you can install a frontend framework in Rails using webpacker. After that you will have a folder in your rails project that will contain your Svelte components. Then you import Svelte components in erb templates and pass data as props.
I have tried that approach but personally I prefer a separate frontend and backend talking through API calls. Then in your frontend you need something like Sapper if you need SSR. With webpacker you don't(assuming you mostly use Rails for routing).
If you are worried about authorization it's not really hard to implement. And after login you can store user info on local storage for instance for subsequent requests. But of course if you install with webpacker it's all done within Rails hence it's easier.
From my experience, using webpacker it's easy and quick in the beginning but you are more likely to get headaches in the future. With separate backend and frontend takes a bit more work, especially in the beginning, but it's smoother in the long run.
This helped me set the authentication between rails api and vue frontend.
So, if you wish to separate them, just install Rails as API only and I suggest you to use Jbuilder to build your jsons and serve them to the frontend as you need them.

Laravel separate backend and frontend

while building with Laravel probably you may have faced the same situation where you have a RESTful service with JSON replies and, at the same time, you need to have a frontend able to consume those APIs to offer a web interface.
Now, the most obvious solution would be to use Laravel Blade template engine and to diversify routes according to the address (/resource or /api/resource). However, this approach brings in an additional burden, directly reflected in controllers, where are you have to consider not only the reply itself but also whether it comes from a device or from the web interface and reply accordingly.
I have also seen a lot of frontends actually detached from the backend and built using serverless technologies such as Angular or React, so that both the web interface and the mobile app consume the same APIs and the backend can be much simplified.
Let's take as an example a "Uber for..." service consisting of a native app, a PWA and an admin interface (web), which approach would be the most advisable and why?

How to bulk update "Authorized JavaScript Origins" in Google API Console?

Currently, I have been tasked to utilize the Google People API to ask for a user's basic Google information along with their public phone numbers. So far the results have been positive.
The solution my team and I have incorporated the Google People API integration in has the capacity to be utilized across thousands of domains. As a result, my question is simply, How can my team members and I ensure that any our clients that utilize our solution with their own particular domain get our new functionality built with the Google People API?
Keep in mind, our clients have the flexibility to have http/https and any subdomain on their site. Entering each domain possibility for our client base one by one would not be an easy task. I'm seriously hoping there is a solution around the single, explicit origin entries.
Thank you for your time and help.
Warning:
You must remember that if this is source code you are giving your clients that you are not allowed to release your client id and client secret. This includes plugins and scripts.
On November 5th 2014 Google made some changes to the APIs terms of Service.
Asking developers to make reasonable efforts to keep their private
keys private and not embed them in open source projects.
So if your clients could view the code of your application and see your client id and secret you should not be giving it to them.
Read more about this issue Can I really not ship open source with Client ID?
Recommendation:
The best solution for you will be to instruct your users now to create there own project on Google Developer Console and create their own JS origins.
You may just have to provide your own wrapper around the target API where you authorize the client request yourself and then do the request from Google using your own credentials.

Building A Social Network

So, I'm starting out building a social network web app. I'm looking into how to fit the parts of my stack together and I'm looking for some guidance about what various frameworks will allow me to do. My current stack idea is to have:
Firebase JSON API: serving user, post, comment, and all the other data
EmberFire: to plug that API into EmberJS
EmberJS: my front-end MVC (because I'm new to MVC and Ember seems the most accessible)
What I'm stumbling on at the moment is how I'm going to implement users with this stack. I've looked at basic authentication stuff but I haven't found anything that would allow me to allow certain actions and views for certain users and not others - the basics of a social network really.
Is it sensible to be doing this stuff in front-end MVC? If so what should I be using to do authentication/personalisation? If not, should I just be doing a PHP/SQL setup? I'd rather avoid that because my skills are all front-end.
If you are just getting started, Firebase is a great service to learn on due to their 'back end as a service' model - you will spend more time building/modeling your data and less time running/installing. Not that you won't want to learn more about that later, but it lets you focus on one piece at a time.
From an access perspective, JS/NoSQL vs PHP/MySQL isn't going to be the issue. They each have their own security requirements - it's more that PHP/MySQL has had more time to establish those rules. Additionally, Firebase being a hosted service has it's own set of requirements.
Firebase security rules are a little weird when you first look at them, but they begin to make some sense after you sit with them for a bit. The Firebase docs are actually a pretty great resource. https://www.firebase.com/docs/security/
Basically, if you use a Firebase 'login provider' it makes Firebase act as both a database and a authentication manager, and the combo helps keep users 'fenced' to where you want them. You can use data from other paths, variables, validation rules, etc. You can even make a 'custom login provider' if you need to integrate with an existing one.
Finally, on the client end, your view can respond to whatever Firebase returns - if a user does 'hack' their way through to a page they shouldn't be on client side, no data is returned anyways and no submitted information would be allowed because of the rules.

Api and consumer flow

I am developing an API for a social network website. This API will basically get all the requests from the users (get friend list, post a status update etc) and reply back if necessary.
We will implement OAuth 2.0 protocol for authentication. Consumer (our php project) has API id and secret.
Basic scenario:
Client wants to log in
API Consumer (php web project) takes this request, directs user to API
User send his/her user credentials to the api, gets the token.
User comes back to our website, pass token to the consumer.
Consumer goes to the api server, gets the access token.
Now consumer (php project) has access to user's private information.
Since this is a social network website, we want app developers to be able to use our API in the future.
I am not experienced in API-design. Does that flow make sense? I guess the simplest authentication would be accessing user information through php project. But we don't want to access database in php code. We will use ajax in client side and send a request to the API. And I believe there should be a better solution, what would you suggest?
Sure, API design is basically point where you need to choose technology.
Either it can be PHP or .net or Java.
I would prefer either PHP or .Net as we get lot of flexibility in it.
API will return XML or Json depending upon the request.
There are lot of CMS in php which can be helped.
.net we have Service Stack to help you.
API's had to be fully independent from other world as well as within API method as well.
If you are able to achieve this, then you will surely create a good architecture.

Resources