So I'm currently building a really small app to prove a concept using Node, passport, and angular.
I'm having trouble trying to get the users information from the server to my front end because of the way that twitter authentication works. And I thought I'd reach out to see if any of you can help me understand.
Basically my problem is that I call my backend localhost:8000/auth/twitter and that redirects to the twitter auth page, and then calls a callback which is in my backend. At that point I have user data, and all is good. However I can't just send that to my frond end as I have to do a redirect.
If I redirect to my front end: localhost:4200/ I no longer have the session data that is included on the request from the backend. So I can't redirect to the front end.
I can redirect to a page in the backend, and I have all the data available to be, but that doesn't really help me as I need to send it down to my angular app.
What would be a good way of doing this?
Is it possible?
How can I make sure that the user that is using my site is authenticated when calling backend routes to do things?
Any help would be greatly appreciated.
If you'd like to see my code, I can show it but I'm not sure if it would help, as I'm just trying to understand a concept.
Related
I'm fairly new to the webdev. I have a React frontend built with Vite, and a Node.js backend that uses MongoDB. I finished my little project and when It came to deploy it to my Linux server, I got confused about how to handle API calls.
Is there any way to hide API URL's on frontend apps? Because everything is done in client side, and frontend is basically an interface between user and backend, that should be impossible. But how does for example, big companies like Facebook handle this? If I go to Facebook and inspect the code, can I find the exact IP and API address that facebook backend serves me the posts? Or are there any tricks to make this more secure? What are the industry standards are on this topic?
The interface between your web application in the browser and your backend service is HTTP(s). There are HTTP verbs such as GET, POST, DELETE, etc. You can pass argument or information to your backend services via query parameters which are visible in the URL, or you can send it in the body of a request. An HTTP POST, for example would have a body that is not seen or viewable unless the end user made specific effort to view it.
I'm relatively new to react and wanted to create an app that uses the Bigcommerce API to change product data submitted by the user through a form. My idea is to have a simple form for the user to input a quantity, for example. Once the user submits the quantity the want to change, the new number will be reflected on the product page on Bigcommerce Admin pages.
I have already created the same kind of app with Node with no front end. The app I made reads a csv file and calls the proper APIs to update their quantities. I wanted to create sort of the same app but in React with no csv reading abilities. I am having trouble with CORS errors now for some reason. I tried creating a backend with Node for this React app but I still get the same error.
I tried some other API. one that does not require authentication and that worked fine. I was able to see results when I do the console.log(data).
It seems that this Bigcommerce API won't work because it requires authentication, which I already have made on their backend several times to double check my work. I'm confused and not convinced that there is no way for a react app to fetch data from a remote server with credentials.
I figured it out, but I'm still convinced that I can do this with only a front end application in React. Without Node, However.
What I did was create an endpoint with Express using Node as the backend. Installed cors modules, then allowed requests coming from the front end URL address. Also, pay attention to whether you are using localhost:PORT# or 127.0.0.1:PORT#
to the browser these are different. Make sure they're the same when you open up the browser.
So i am making a social media like site where i use react for frontend and expressjs for backend...
I was using public api till now but now i need private api to control some login info. So, i cannot understand how to do it. Because the link where it will request can be viewed by doing Ctrl+Shift+I and can be used by anyone
I still have methods to do but just wondering, if any way to know where does the request comming from
Let assume that the api site is api.some.site and the main site is some.site, so the request should only come from some.site else send 404 response and i need to do it with expressjs...
I don't know how to do it but I wanted to give you some information to think about. If you want people to be able to log in, on your site. That api end point has to be unprotected, because a logged out person does not have any credentials yet. When logged in the user would be able to access protected end points right? End points like password change of viewing specific pages. So all the data an user should or should not have access to should be handled by the server. You website is only a mechanism to make your data look pretty and easy to handle. So in a way you shouldn't care about people using your open end points from another location because their open anyways.
Authentication should never be handled client side. It should always be handled by a server.
This is my opinion, hope it helps. Sorry if it's not what you are looking for
A novice javascript developer here!
A have a basic question on whats the best and secured way to make HTTP calls from a front application to a backend service that needs an authentication. My application is a SPA (using Vue.js) & getting data from Java services. Java services need authentication details and return sensitive user data.
I see there are a few options and I wanted to understand a better approach amongst all 3-
Making direct HTTP calls from javascript code- Concern for using this approach is, as Javascript code can also be viewed via dev tools in browser, wont it be easier for anyone to do an inspect and view all critical authentication details hence making overall integration less secure?
Making an HTTP call using Axios via Vue framework- Seems like Axios is Promise based HTTP client for the browser that lets you easily make HTTP calls without much code overhead. but is this secure? is Javascript code loaded in the browser? Or the front end code sends the request and axios makes the request from backend server where the application is hosted?
Using Node- If front end application has unique routes configured for each API call and in my application if I have a route mapping to use request module and node js backend code to make those HTTP calls, is that going to be a robust and secure way of integration?
Please let me know your thoughts and apologies if this is a dumb question!
Not dumb at all. You're just learning.
My first question to your answer 😅 will be: is your application server-side rendered or it's sap + backend?
If it's server-side rendered then I would say it's secured since Node will be sending pages with all required data. On the dev tool, you will only see static files being loaded.
However, if it's SAP, I am not sure whether there is a way to hide whatsoever you send to the server from the dev tool. The only one thing you will need to do is to make sure you encrypt whatever is sensitive to your application.
I am implementing google reCaptcha. In the Google documentation, they say the way to do it. The documentation suggests server side validation of captcha. I wanted to know why we need to verify it in the server side as it is already verified in the UI side from the google server. Is it a suggested to implement captcha in the UI side alone with no validation in the server? What are the problems(if any) if done in UI alone.
a example would be: you're creating a register form and want to prevent bots to create a account on your site, you need to verify it serverside, because in the background you're sending a request which will look something like this:
POST /register 1.1 HTTP
Host: www.example.com
{"username":"example","email:"hey#gmail.de","captcha-token":"123984f729340fmu2q34f9"}
and if you dont send the captcha-token with the request or the server doesnt validate it, this bot could just spam this request without loading the frontend page. Please mind in head, that bots dont visit your "UI" (frontend page). Just verify everything serverside like text length, bad characters, rate limits...