Oauth with Angular and Node

Question

I am having trouble to get oauth working on angular. when I enter the link directly to the browser

http://localhost:8080/auth/twiter

I am able to connect using oauth and get a respond However when I try to do that in angular with the following code

    login_twitter : function login_twitter(){
    var deferred = $q.defer();

    $http.get('auth/twitter')
      .success(function (data,status){
        if(status === 200 && data.state=='success'){
          user = data.user.name;
          defered.resolve();
        }
        else{
          deferred.reject();
        }
      })
      .error(function (data){
        deferred.reject();
      });
    return deferred.promise;

I am getting an error from the browser

XMLHttpRequest cannot load ....link... No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

In my server I tried with (res.header and res.setHeader)

app.use(function (req, res, next) {

    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8080');
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
    res.setHeader('Access-Control-Allow-Credentials', true);

    next();
});

Can any one please help me out? I've been stuck for a while. Or is there any examples that can use Oauth to login with angular and node , because most of tutorials are with node and ejs/jade

idbehold · Accepted Answer · 2015-12-03 17:03:45Z

1

The Twitter auth strategy requires that the user be signed into Twitter and has allowed your "app" permission to access your Twitter account information. This cannot be done with a XHR because how would the user enter their Twitter credentials to log into Twitter if the user wasn't already signed in? How would the user approve the permissions your Twitter "app" is requesting if the request is sent via XHR?

This applies to all of the Passport strategies that utilize OAuth or OpenID. The user's browser has to go directly to the auth provider's site so that they can either A) login to the auth provider or B) approve the permissions you're requesting in your application. Once the user has done that the auth provider (in your case Twitter) will then redirect the user's browser back to your application's endpoint with some kind of token which your application will then use to request information from the auth provider (such as email address, full name, etc.)

answered Dec 3, 2015 at 17:03

idbehold

17.2k5 gold badges49 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

leungc70 Over a year ago

thanks, I was able to get a respond by directly entering the link localhost:8080/auth/twiter. However, the return type is an object {status, user}, and it printed out on the front-end of the page. Is there any way that I can read of from the object? I am try to read the object then reidrect to other pages in the angular side

idbehold Over a year ago

@user3423482 you'll have to change your server side application to store that information in the user's session and then redirect back to the page where your angular application exists. On that page you'll either want to put the information from the user's session directly into a top-level JavaScript object and have angular read from it or have your angular application make an ajax request to your server to get the user's session data.

Collectives™ on Stack Overflow

Oauth with Angular and Node

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related