OpenID login (steam) with AngularJS, socket.io and node.js using JWT - javascript

I am wondering what is the safe way to login using OpenID in my AngularJS app, with a Node.js backend and socket.io for the real-time.
The thing is that OpenID forces me to use a new window for the redirection dance, so my setup is:
Angularjs renders a view with a button. (this remains open)
The button opens a new window and loads my backend, /auth/openid/
where I set the afterlogin url and redirect to openid site
The openid site redirects to my afterlogin backend
/auth/afteropenid/ where I handle the user data and create a
JsonWebToken.
My problem is that I dont really know what is the best way to continue.
I have to send somehow the JWT to the AngularJS.
One of the ways I see is passing in the query to AngularJS, here I could do everything in the same window, angular > openidsite > angular(with token in querystring). I would configure AngularJS to handle a route and work with the token. I dont know how safe if this, putting the JWT in the querystring seems like a bad idea.
The other way I see is using socket.io, my app already uses this, I am not including it just for the openID login.
When I open the new window, I put the ID of the open socket,
/auth/openid?socketID=XXXXXX
Then, after the openID site redirects back to the backend,
/auth/afteropenid?socketID=XXXXXX , I create the JWT and I send it
using the socket.io to the AngularJS open socket.
In similar questions I see that there is way of doing this by setting a cookie with the token and then making a redirect to the angularJS.
I think my approach would work and has less redirects but I am new to this and maybe I am not thinking in everything, I dont know how could this be exploited since the server only pass user info using the socket. The caveat is that the original angularJS window should remain open but that is acceptable in my situation.

Related

Best way to protect frontend pages with Json Web token?

I'm working on a website where the user needs to log in to view the content. I'm working with react for the frontend and i'm using node to develop the API. I'm trying to protect my pages with a json web token, this way once the user logs into, the server gives a jwt which the frontend asks for to let the user to continue navigating or otherwise redirecting him to the login.
I know the server needs to verify the token, and i know i can create a middleware and implementing it to my API routes to achieve this. But my question is, if in the page i want to display i don't need to call any API route how can i verify the token?
I mean, should i create a route only to verify the token? or there is better way to do it?
Any suggestion or code example is welcome.
I suggest to use backend for token verification it is easier to manage in long run and safer. For example , if you use hmacsha256 signature , you have to leak your private key to client side for token verification. For client side identity verification, i suggest work with server side rendering instead to limit access to the protected part of website.

How can I use OpenID with my own RESTful API?

I'm currently creating an EmberJS application,
So obviously my front end is done in EmberJS, and I've decided to go with Go (Golang) as my API service.
I've gotten the back end authentication working using Steams OpenID service
The problem I'm currently facing is, my API runs on localhost:3000 and my front end runs on localhost:4200.
So how can I make a request to my API service which will require human intervention part way through (to be able to type in the username / password on steams website before redirecting back) from my client side.
Right now
localhost:3000/auth/login is to initiate the OpenID request which redirects to steams website
and then
localhost:3000/auth/return is the callback on returning from steams website
I need to be able to some how use this authentication from the client side via some how to be able to authenticate users, e.g.:
$.get("localhost:3000/auth/login").then(() => {
// How the hell am I supposed to login on steams website from here
});
any information would be great as this is really stumping me. If you'd like to see any code feel free to ask, I'm not sure what to provide as everything is working as intended, but I just can't figure out how to connect the API to the client and make OpenID work the way I need to. Thanks!
Side Note: I know some websites will have a popup which the authentication in there (like a twitter or facebook popup) and then refresh the main site after the authentication has been processed I don't know how I might achieve something like that.

OAuth 2.0 Implicit Grant Type with AngularJS frontend

I'm currently building a frontend client for my own Apigility API.
The API uses OAuth 2.0 Authentication which is working fine.
I want to create an AngularJS Landingpage to let the users authenticate by entering their credentials. Because the Client is created with JavaScript,
I shouldn't save the client_secret in the Client, correct?
I have read a lot of posts, but still haven't the right solution.
Is it correct to use the implicit grant type for this scenario?
This procedure is working, I'm being redirected to the authentication server,
after the client authorization and entering credentials, I get back to the client (authenticated).
But I don't want to get redirected to another authentication page.
Is it also possible to authenticate directly and secure on the angularJS frontend?
Thanks,
Simon
You should take a look at this post i made:
https://stackoverflow.com/a/42443878/2963703
It details how to do this using the Spotify API. Your page won't get redirected, instead a popup window will open in which the user authorizes themselves. Once they're authorized the window will close itself and in your main page you will have the access token you need.

Facebook API in Single Page App handling of tokens and security

Goal: A single page application that uses Facebook authentication to login, but does nothing with Facebook after that.
Tech: Facebook Javascript SDK, AngularJS, angular-ui, .Net Web Api
I'm creating a Single Page Application (SPA) in Javascript using AngularJS. I'm using the Facebook SDK which is working to authenticate the user; it returns me a facebook user id, an access token, token expiry time, a signed request, and some other stuff, all on the client side. I then pass this information to my service, mostly because I feel I should. After this I don't really care about Facebook. But I want to make calls to the server to load the user's data.
I could just make all requests using the facebook user id, but there would be no security because any client could just call that endpoint and pass any user id until they found a valid one.
I could use the access token on each request as well, but I still think this is a security failure; when the user first logs in and I pass it to the server, well that endpoint could also be called by any client... "LoginServer('myfakeaccesstoken', $knownUserId)
I get the feeling that I should validate the token on the server side back with facebook, and then I can safely rely on teh token on future API calls, but I'm wondering if there are any other approaches?
The Facebook documentation seems to focus too much on me wanting to make follow up calls to their graph API when I really don't care after my user is authenticated.

Single page application with login and search robots

In my work with a Javascript single page application, i have recently run into a problem.
The whole idea behind this project, is to avoid page reload. When the user comes to my application they won't need to make any reloads. This is done with jQuery and Backbone.js and PHP as service.
I have this static index.html file, where i hide my login container and application container. Then i show the login container, if the user is not recognize by my application, and if they have auth i show the application.
if auth:
application.show()
elif not auth:
login.show() // like Gmail or Facebook etc.: Information + login-form
I wan't to show users who aren't authenticated, both login-form and general info. Very important is also that the site can be found by robots as Google etc.
Can this only be done with 2 different files, giving me reload? A site.com and login.site.com. That solution irritates me, because my login, as it is by now, is quite instant.
Not sure I get the question completely but if you want to check if a user in authenticated, try to do an ajax call. If it fails with "401 unauthorized" the user needs to login...
You can achieve what you want by using ajax calls to authenticate (Although this is not a recommended approach, and people usually prefer the two page solution you have outlined).
What you can do, is have very skinny controllers that just exist to provide data to rich client UI.
Your gateway controller(A separate controller, with no model that acts as an entry point in the application) will just render the basic application structure to the client (without any user specific data, you dont know if the user is logged in, you dont need to know at this point). Then the client will query the UserController for identity of currently logged in user, if user is logged in server returns a json response containing information related to user and if not, server returns a response saying that user is not logged in. Then you can fetch a partial for the login form and then submit it again through ajax. As you see, creating the UI once and communicating with the server with lightweight ajax calls can solve your issue easily.

Categories

Resources