Oauth 2.0 token based authentication


#8

nope jsonp can only “fake” get requests

start your chrome with the --disabled-web-security flag

or use chrome plugins like


#9

Hello bengtler ,

this is what I have for now in the Login Controller . I’m still getting unauthorized 401 error. Am I doing everything correct ?

.controller('LoginController', function($scope, $http, $location) {
 
    $http.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
 
    $scope.login = function() {
     
                $http.post(OAuthUrl, {
                  'client_id': clientId,
                  'client_secret': clientSecret,
                  'grant_type': password,
                  'username': username.trim(),
                  'password': password.trim(),
                  
                  withCredentials: true,
                  headers: {
                    'Content-Type': 'application/json; charset=utf-8'
                    }
                })              
                   .success(function(data) {
                         accessToken = data.access_token;
                        $location.path("/secure");
                    })
                    .error(function(data, status) {
                        alert("ERROR: " + data);
                    });
    })
})

#10

maybe your credentials are wrong?


#11

no, I’m hardcoding the credentials for a test user. I crosschecked those things, it’s not wrong.


#12

okay but if it is your api … you should check how you have to set headers and so on.

sry.


#13

Where should I be using the Authorization : Access Token signature ?


#14

you can set this as a header

headers: {
  'Content-Type': 'application/json; charset=utf-8',
  'Authorization': 'XXXXXXX XXXXX'
}

#15

Trust me and try with get method.
Set this in your app.js in config function:

$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];

Delete withCredentials option and delete your content type header too.


#16

Some resources:


#17

i suggest you to implement it using interceptors and ui router events rather than simply use controllers because interceptors and ui router events let you catch an unauthorized http status or bad request in whole app in case of refresh token is expired.


#18

@ebreo I have updated my code and added an interceptor. It is working but let me know if you have answer to my question of how to send my clientID and secret to the server.


#19

@bengtler thanks for the follow up . I have updated my code and added an interceptor. It is working but let me know how to send my clientID and secret to the server.


#20

yeah how i said… it depends how the API-works you are using… if it needs this parameters as query parameter or in the request body… or if the API needs them in the request header.


#21

And: http://robferguson.org/2015/07/27/authentication-for-ionic-apps/


#22

send it via query string


#23

Could you help me to solve this problem?

Thanks before


#24

Hi everyone, i know that this is a old topic, but i was working with some similar issue, but the the real problem is that implement the request for token with client_id and secret_id credentials from angular (or other client side method) is a bad practice. This exposing the app’s oauth credentials and will available from local source (browser console and JS source).

Then the best practice is make that request in server side and implement basic authentication form in your angular app (of course provide a SSL certificate for user send their data is safe way).

On server side depend of your favorite language (PHP, Python, Perl, Ruby, …) and response the token to the angular app with other data that you required.

The basic flow is:

  • Angular app send user credentials to server “username and password” (Post Method over HTTPS)
  • Server app get the user credentials and OAuth credentials of your app (ex. twitter app) that are stored in a safe place (not public)
  • Server app request the token to the authentication system (OAuth provider) and get de Token data.
  • Server Response to Angular app the user token.
  • Angular app save the token on localStorage, cookies and use it in Headers request.

Other aspect to consider is that OAuth provider response with a refresh_token, that will be use for renovate a token that is expiring. You should implement a safe method to store that token and use it to refresh the user token.

Is someone need a full example working code, please write me and i will provide the source.


#25

Please provide the source as that would help all of us. I am trying to implement oauth on ionic2.


#26

Alright this case works, how would a refresh token work, what if a user logs into the application after 3 days and both token and refresh tokens are expired by that, they would want to login again? This never happens to Facebook or Twitter apps so i wonder how they manage refreshing tokens.


#27

@aryan7 Can u please share ur correct code with interceptor …