Using PHP login along side OAuth2 - javascript

So I am creating a website to learn some PHP/Javascript/HTML/CSS and so on and I ran into a problem to which I can't come up with a solution. So basically I have regular login form using PHP which uses POST to send the data and authenticate. I also want to integrate external Twitch.tv OAuth2 authentication.
By using normal PHP login I store my information inside PostgreSQL database using php. I want to do something similar using OAuth2. For example store Twitch.tv name as a username inside the database and token as a password.
The problem is that the external authentication I am using is based on their Javascript API and it stores the information inside the DOM storage which I found is unable to be access by using PHP. The redirect_uri with a token is also a fragment which can't be retrieved by PHP.
Should I just scrap the JS part and try doing it entirely in PHP?
Side question: I checked other website which also uses Twitch authentication and it uses these callback links "https://api.nightbot.tv/auth/twitch/callback?code=****". What exactly are these callbacks?

You should use redirects as you implied with JS frameworks. It works the same with Facebook.
The redirects are used with a token. Usually you generate on your side a random token that you store in the session.
Once the user logs in using the JS API, the API will redirect to a callback page (PHP in your case).
In that page, you verify the token once (that you had passed and got back, must be the same), and also you get another token from the API to use with the API.
At this point you can get the user information by querying the API using the API token.
You get the user info from the API and then you can query your down DB at this point to log the user in etc.
I hope this helps..

Related

How to secure web pages with token based authentication?

I'm building a website using ruby on rails which is hosted separately which makes requests to another backend api rails app which is again hosted separately. Obviously i've setup the backend api with token based oauth authentication.
Now since im not dealing with sessions, and it being stateless n all, How can I stop users from accessing certain view pages in my front end web app? For example, I have a consumer/booking page. I don't want the user to access this page without being logged in. But anyone can just enter the url and open any page they want right now.
On user login (ajax call from .js.erb files), im getting the token and storing it in localStorage variable for every future request to the api. I know I should use this token somehow to stop users from access restricted pages. But I just dont know how.
Now as you have stored the token in the localStorage, you will need to pass this token with the request to the page where you want to restrict access and check if the user is authorized to access the page or not.
TL;DR: there is no standard method or library for this; you must implement such functionality as you see fit.
I'm assuming you're using some sort of front end framework like react; if so, then any request to change the current view should be terminated if there is no valid token in localStorage. Check out this post regarding conditional rendering in React; if you're using something else, the methodology is still pretty much the same.
Otherwise, I would build a small script to include in the beginning of every page that checks whether or not there is a valid token and if there isn't, calls window.history.back() to return the user to the previous page.
(Another way of doing it is to intercept every call to a static HTML file on the server, check if there's a token, and send the file if there is. Otherwise, you can send a custom error page or whatever).

Website hold user details

Using angularjs in the client , and c# in the server side.
I want to learn how can i create a website with users.
I know how to store the data in the db.
My real question is how the site remember the user session
After refreshing.
So the user dont need to login again.
Thanks guys.
Microsoft created a JWT (JSON Web Token) package for .NET Web API projects specifically for this purpose. And since you're using Angular.js, working with JSON is perfect.
There are plenty of tutorials for understanding how JWT works and securely saves a user's session like this one: https://scotch.io/tutorials/the-anatomy-of-a-json-web-token.
The idea is that your server sends your client/user a long encrypted string. The client saves it in their cookies and sends it to your server whenever you want to verify the user.
Most of the complicated details regarding encryption you don't need to worry about. Just follow the tutorials for setting up the exchange of the JWT tokens.
Back in the days, we use cookies to do this.
In the Restful html5 world of today, we can use several other options.
Websql, Localstorage, IndexedDB.
Probably you are using something like JWT to store an authentication token you use to make authenticated api calls.
The way to go, or as i do is store that token in localStorage and then, inject in every call to the api.
Then in the angular run section i check if the user is authenticated checking if i have the token stored, and if is not, send to the login page.
angular.module('Scope', ['ui.router', 'ngStorage'])
.run(function($localStorage, $state){
if (!$localStorage.authenticationToken) {
$state.go('login');
}
}
});
In this example, every time the app reloads, angular execute the run function, and checking if we have stored the token, if is not, send the user to the login webpage.

Get exchange calendar events in javascript webapp?

I find the documentation provided by microsoft confusing(Link).
How can I for example get an authentication token and where can I download the javascript libraries? I couldn't find any information on this.
Basically I want to know how to get the calendar of an user in my javascript webapp.
I did try sending an request to
"https://outlook.office365.com/api/v1.0/me/calendarview?startDateTime="+begin+"&endDateTime="+end"
This shows me an authentication popup but after submitting the correct username/mail and password, it doesn't do anything. There is no response back.
To get an access token, you need to use the OAuth2 Authorization Code Grant flow. https://dev.outlook.com/RestGettingStarted walks through the process. Basically you need to register your app to get a client ID and secret, then use those to go through the process.

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.

Securely Passing UserID from ASP.Net to Javascript

In the application I am currently developing we are using ASP.Net forms authentication to grant the user further access to the site. This site is targeted towards mobile users and as such we are attempting to be as hands off from the server as possible and make use of KnockoutJS to make the web service call and load the data so that the user can view it.
Right now the webservice (REST service using GET method) requires the username in order to load the data specific to that user. I have this information on the server side (ASP.net) and I can easily access either User.Identity.Name or access the forms authentication cookie directly and pull the information.
My problem is that I need to get the username from the server to the client so that the service call can be made. I have looked into doing this securely but so far have come up blank. Currently I am passing the username as a url parameter and parsing it out using JavaScript, with a check on the Page_Load method to verify the username in the url matches the logged in user.
I need a way to secure pass a username from ASP.Net that has authenticated the user using form to the client side JavaScript so I can make a REST webservice call.
EDIT: So after googling and meeting with my team lead I think we will be using an OAuth implementation similar to this example:
http://www.c-sharpcorner.com/UploadFile/surya_bg2000/secure-wcf-restful-service-using-oauth/
Also for anything else looking for the same answer I found this question very helpful in understanding OAuth:
What's the point of a timestamp in OAuth if a Nonce can only be used one time?
Assuming everything is implemented correctly would it be more secure (totally secure, secure, or more insecure?) to instead pass the generated signature via an ASP tag as mentioned below?
EDIT 2: After some more review and some more searching we finally decided on a framework and method of making this work. As it turns out OAuth isn't necessarily the answer here, this questions:
But Seriously.... Example of ASP.NET WebAPI implementation including OAuth
was a lot of help as well in figuring out how to make this work. What we are going to end up doing is generating the signature and putting in on the javascript and making the call like that. The signatures are going to be time sensitive and regenerated each time the user loads the page so very OAuth like but we arent implementing the full spec.
TL:DR Final solution was to generate a hash signature and put it on the page via ASP server tag <% aspvar_here %> and use it to validate the service call
Simplest way would be to render this javascript in your page:
<script type="text/javascript">
window.UserID = '<%=HttpUtility.JavaScriptStringEncode(this.User.Identity.Name)%>';
</script>
Now you can reference it in your JS.
But, more importantly, if this user id is not used just as a default parameter but instead to authenticate the user, this is a security hole. Normally the REST service should also be able to look at User.Identity.Name instead of receiving it as a argument.
Normally the username is provided by the client to begin with. It is then verified on the server-side (using whatever authentication is necessary, such as a password).
If it has been verified on the server side (in your case, this must be from a WCF web service as ASMX does not cope well with REST), then you can be sure that it is correct - plus you already have the username on the client-side.
EDIT:
As Knaģis pointed out, you can get it using an ASPX tag, presuming the page is an ASPX page and not HTML.
If you just want to have the username in the client side, the other answers explain how to do this.
But as you stated, this IS a security risk. Someone can modify the data on the client and impersonate another user.
The correct way to do this:
After a user successfully logs in, a Guid is issued which uniquely identifies this user.
The Guid is the token which is saved on the client and passed to the server not the username.
All webservices receive the Guid not the username.
Server has a dictionary which converts the Guid to the original username.
Another option can be to encrypt the username and pass the encrypted value to the webservice. The webservice will need to decrypt the value in order to get the username .

Categories

Resources