EzDevInfo.com

Javascript library for multiple OAuth 2.0

Are there any popular javascript libraries that provide as a wrapper for multiple oauth2.0 authentication api(s) like Facebook, twitter, Google, & LinkedIn ? I want to allow users on my app to login with these oauth providers & allow me to get me some information about them from these providers.

I did come across a library called hello.js but not sure if it is well tested & widely used. Also there are not many related questions here on Stack Overflow what looks not-too-good to me.

hello.js library for tiwtter,google+ logout error

Hi I have problem with logout with twitter and Google+ with hello.js library with auth authentication I have write logout code it is not working for twitter and Google+ but working with Facebook perfectly code here

hello("google").logout({force:true},function(){
    alert("Signed out");
});

please help me how can i solve this problem asap.

How do client-side JS libraries for OAuth2 maintain secure authentication?

I'm new to OAuth2 and there's a problem I've been struggling with and despite research still can't grasp.

The difficulty in having a JS client for OAuth2 is that you can't store the client secret, because it will be widely accessible in the browser. I.e. in this SO question the highest-rated comment says:

"I think tokenSecret and consumerSekret parameters are supposed to be secret! How could they remain secret when downloaded to browser?!!!"

Therefore how do client-side OAuth2 frameworks like hello.js or oauth.io overcome this problem? I know they use a server-side proxy (which knows the ID and secret) for their requests, but the client JS code still needs to somehow tell the proxy who it is. So what prevents anyone from taking the JS code from my website and talking to the proxy on my behalf?

I've also found the Google APIs Client Library for JavaScript. AFAIK there the client code does not pass a secret. Do I understand correctly that they manage this by having a predefined OAuth response address? (so that the tokens are always returned via a predefined HTTP address). So even if somebody tries to impersonate my website by using my ID, the tokens will still get returned to my website?

Maybe I'm confusing a few different topics here, any light on the subject would be appreciated.

Hello.js Demo Twitter Error

hellojs twitter error

When i run the twitter demo from demo folder and clicked on twitter button it give me following error

url is undefind in hello.js file on this line if(url.indexOf(x)>-1){

how to fix this error

thanks

How do I setup hello.js to access Twitter?

I'm trying to write a simple Javascript page for sending a tweet with a picture using Hello.js. I've used this demo as a starting point but a lot isn't really explained. My init looks like this:

hello.init({
    'twitter' : '****'
});

It says here that I need to "Register your client_id + client_secret at the OAuth Proxy service". But how do I do this? The Twitter page for my app shows:

1. Consumer Key.
2. Consumer Secret.
3. Access Token.
4. Access Token Secret.

The registration at https://auth-server.herokuapp.com/ asks for:

1. reference.
2. domain.
3. client_id.
4. client_secret.

What do I set these to? Do the reference and domain have to match something in my code? Are the client_id and client_secret the Consumer or Access Token parameters?

How does hello.js avoid storing the client_secret?

I'm currently on a mission to figure out how to adequately utilize an OAuth 2.0 provider strictly from client-side javascript and have concerns about exposing the application's client_secret. Which is essentially the "password" of the OAuth client.

How does hello.js avoid the client_secret all together?

Do these providers rely on the referrer and application domain to validate (identify) client requests?

Hello.js Successful Login but Cannot get data

I am trying to get contacts from google account and windows live using Hello.js, I did copy paste hello.js examples. The popup login is done successfully with no problem in OAuth, but I can't get any data back. I explored a lot about this and realized that auth.login is not triggered:

hello.on('auth.login', function(auth){
    document.getElementById('result').innerHTML = 'LogIn Success';
});

I tried several demos from Hello.js page but nothing worked for me: https://github.com/MrSwitch/hello.js/tree/master/demos

Here is the setup that I used:

<script>
hello.init({ 
    facebook : FACEBOOK_CLIENT_ID,
    windows  : WINDOWS_CLIENT_ID,
    google   : GOOGLE_CLIENT_ID
},{redirect_uri:'https://www.example/back.php'});
</script>

Redirect url is just an empty page.

Excluding specific mimeType from Google Drive API results

I'm using hello.js and retrieving a list of the users files via javascript, but I want to be able to exclude specific mimetypes from the results that are sent back.

https://www.googleapis.com/drive/v2/files?q=%22root%22+in+parents+and+trashed=false&maxResults=100&access_token=<access_token>

Is there a query param that can be added to exclude results like Maps?

Thanks in advance!

Facbook oauth login not returning email

I am using this plugin for oauth login, here is my FB response while doing aouth login:

{"state":"","access_token":"XYZ","expires_in":5110943,"client_id":"CLIENT ID","network":"facebook","display":"popup","redirect_uri":"http://localhost/XYZ123/www/callback.html","scope":"email,basic","expires":1439628780.389}}

The problem is i am not getting email of user. As per other SO solutions :

I have verified email so that should not be a matter. I am not getting FB message regrading verifying email.

Here is output of CLIENT ID/permissions

{
  "data": [
    {
      "permission": "email", 
      "status": "granted"
    }, 
    {
      "permission": "public_profile", 
      "status": "granted"
    }
  ]
}

hello.js, get access token (or anything at all)

I'm trying to use hello.js to allow users to login using their social media accounts. I seem to be successfully getting the allow page to show, and a redirect is happening but I don't understand how my system is supposed to know who that person is. I'm assuming it's via the access token but I can't seem to print it to the console at any point of the login process.

$('#facebookLogin').on('click', function(e){
    e.preventDefault();
    hello('facebook').login({display:'page'});
    return false;
});

This "works" as in, I see the app connected in my Facebook apps. I've tried to follow the instructions here in order to show the object after login but I see nothing with console.log(token).

$('#facebookLogin').on('click', function(e){
    e.preventDefault();
    hello( 'facebook' ).login({display: 'page'} function() {
       var token = hello( 'facebook' ).getAuthResponse().access_token;
       console.log(token);
    });
    return false;
});

I humbly request that if you have answer to post working code. There's a lot of text trying to explain this and I really don't understand it. I need to see something that works.

HelloJS /me API does not return complete results

I'm quite new to HelloJS.

When I tried HelloJS '/me' API on the website. It returns

http://adodson.com/hello.js/#helloapi

base url: http://graph.facebook.com/v2.3/me?
{
 id: "1234",
 email: "test@gmail.com",
 first_name: "R",
 gender: "male",
 last_name: "D",
 link: "http://www.facebook.com/1234",
 locale: "en_US",
 middle_name: "Kumar",
 name: "Demo",
 timezone: -7,
 updated_time: "2015-08-12T22:21:57+0000",
 verified: true,
 picture: "https://graph.facebook.com/1234/picture",
 thumbnail: "https://graph.facebook.com/1234/picture"
}

But when I call /me, I just get name and id. Why?

This is my code snippet.

hello.on('auth.login', function(auth) {
    var authNetwork = auth.network;
var getHelloApi = function(path){
    var deferred = $.Deferred();
    hello(authNetwork).api(path).then(function(json){
        deferred.resolve(json);
    });
    return deferred.promise();
}

// parse social data after we finish trying to get from hellojs api
$.when(getHelloApi('/me?'), getHelloApi('/me/friends')
).then(function(me, meFriends){
    var socialData = {};
    if(!$.isEmptyObject(me)){
        var basicProfileDataList = ["name", "email", "gender", "timezone", "locale"];
        $.each(basicProfileDataList, function() {
            if (me[this] != null) {
                suffix = this.charAt(0).toUpperCase() + this.slice(1);
                socialData["social" + authNetwork.charAt(0).toUpperCase() + authNetwork.slice(1) + suffix] = me[this];
            }
        });
    }

I want to collect name, email,gender, timezone. Calling /me will give me all these in one API call on their website but not when I call it from my application.

Should I set some permission in the APP? What Am I missing?

Thanks, R

OAuth 1.0, javascript and server-to-server authentication

We are trying to integrate a "sign in with twitter" function in our application and for this purpose we are using javascript (hello.js).

Unfortunately, twitter is using oauth 1.0 so we can't have only a javascript solution but we need to implement a server-to-server communication to sign the request. The hello.js author provided an auth-server implementation for demo purposes based on node.js.

In our application for the backend part we are using java and I was wondering if a java solution exists for this purpose. Could I use for instance signpost or similar to do the job of auth-server ?

[UPDATE] I tried to set the proxy used by hello.js to a mine servlet (so, instead of herokuap now I'm using a localhost servlet with oauth in the buildpath).

This servlet is doing the following:

            OAuthConsumer consumer = new DefaultOAuthConsumer(
                "xxxx",
                "yyyyyyyyyyy");

        OAuthProvider provider = new DefaultOAuthProvider(
                "https://api.twitter.com/oauth/request_token",
                "https://api.twitter.com/oauth/access_token",
                "https://api.twitter.com/oauth/authorize");

        System.out.println("Fetching request token from Twitter...");

        // we do not support callbacks, thus pass OOB
        String authUrl = provider.retrieveRequestToken(consumer, "http://localhost:8080/oauth1/twitter/response_server");


        URL url = new URL(authUrl);
        HttpURLConnection req = (HttpURLConnection) url.openConnection();
        req.setRequestMethod("GET");

        req.connect();
        BufferedReader rd = new BufferedReader(new InputStreamReader(req.getInputStream()));
        StringBuilder d = new StringBuilder();
        String line = null;
        while ((line = rd.readLine()) != null){
            d.append(line + '\n');
        }
        System.out.println(d);

        PrintWriter out = response.getWriter();
        out.println(d);

and it prints the twitter login page in the hello.js popup. In this way I got some encoding error but it is quite working.

Anyway the callback url is mapped to another servlet where I should simply "sign" the request but I think I am missing something because sometimes I got the error "The server understand the request but it is still refusing it" but if I close all browser window it works.

However the response servlet is similar to this one

            OAuthConsumer consumer = new AbstractOAuthConsumer(
                "xxxxx",
                "yyyyyyyyyyy"){

            @Override
            protected HttpRequest wrap(Object arg0) {
                  return (HttpRequest)arg0;
            }

        };


    consumer.sign(request);

But this code does not work because I don't know how to sign a tomcat request. In oauth homepage is explained how to sign jetty and apache common http request but not the tomcat one. However, is it correct my approach ?

Twitter Authentication Using hello.js and Cordova

I modified the Cordova example provided on the hello.js homepage (https://github.com/MrSwitch/hellojs-phonegap-demo) to login using twitter but I cannot make it work. Basically, when I try the original code provided in the twitter hello.js example it works fine and it connects to the twitter page for the usual permissions! when I tried my modified code it opens up the localhost page which is very weird

The code I use is pretty standard and a simple modification of the original one

This is the code I use:

        // Initate the library
        hello.init({
            google : ' ... ',
            facebook : ' ... ',
            twitter : 'mkjOc4ESXs5ZVFan5l0hTfSFc',
            windows : ' ... ',
        }, {
            //
            // Define the OAuth2 return URL
            // This can be anything you like, providing its the callback which you have registered with the providers for OAuth2
            // It could even be localhost, e.g. http://localhost/somepath as phonegap is not run from a domain so SameOrigin breaks, instead we take advantage of being able to read the popups URL in PhoneGap
            // redirect_uri : 'http://adodson.com/hello.js/redirect.html'
            redirect_uri : 'http://localhost'
        });

and this is the button

    <button onclick="hello('twitter').login(loginHandler)">Twitter</button>

Symfony2 Oauth2 Server with authorization code grant, Symfony2 APIRest and Angular JS client

What I have:

-API Rest in Symfony2 using friendsofsymfony/rest-bundle exposing some resources.

-Oauth2 server in Symfony2 using FOSOAuthServerBundle.

-Client in Angular.js doing requests to the API Rest. This client currently gets to login via the authorization code grant (using Hello.js with a custom module), and gets the access token effectively.

I want these API resources secured, so:

-On API Rest app: I implemented the AuthenticationEntryPointInterface which I set as the entry_point in security.yml, to return 401 code and application/json content-type on rejected.

-Client intercepts 401 responses and sends the user to the login form.

-Client sends api rest requests with X-Access-Token set on header.

My current issues:

1) I'm not sure whether I should be setting X-Access-Token on client for requests, I understand this is the right way? Or should I leave it all to hello.js api methods?

2) I have no idea how to make the API Rest app "ask" the oauth server "is this token ok? who does it belong to?" Is this already solved in Symfony?

Thanks a lot for any answer or guideline. Feel free to require any further information or code for what I describe.

Javascript Client for FOSOAuthServerBundle

I have some difficulties to get the authentification workflow working. I tried JSO https://github.com/andreassolberg/jso/blob/master/README-getting-started.md

here is my test code (ignore the login fields)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>Login</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" rel='nofollow' href="{{ asset('favicon.ico') }}"/>
    <script type="text/javascript" src="/vendor/jso/build/jso.js"></script>
</head>
<body>
<form action="" name="login" method="post">
    login: <input type="text" name="user"><br>
    password: <input type="password" name="password">
    <input type="submit" value="Submit" id="submit">
</form>
<input type="button" value="Get Token" id="get_token">
<input type="button" value="Clear Token" id="clear_token">
<input type="button" value="Dump" id="dump">
<input type="button" value="Fetch" id="fetch">
<input type="button" value="Callback" id="callback">
<script type="text/javascript" src="/vendor/jquery/dist/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        var jso;
        $.getJSON('parameters.json', function (data) {
            jso = new JSO({
                providerID: "movieApp",
                client_id: data['backend-api']['client_id'],
                redirect_uri: window.location.href,
                authorization: "http://" + data['backend-api']['host'] + "/oauth/v2/auth",
                scopes: {request: ["https://www.googleapis.com/auth/userinfo.profile"]}
            });
            console.log(data['backend-api']['host']);
        });

        JSO.enablejQuery($);

        $('#get_token').click(function () {
            jso.getToken(function (token) {

                console.log("I got the token: ", token);

            });
        });
        $('#clear_token').click(function () {
            jso.wipeTokens()
        });
        $('#callback').click(function () {
            jso.callback()
        });
        $('#dump').click(function () {
            alert(jso.dump());
        });
        $('#fetch').click(function () {
            jso.ajax({
                url: "http://movie-app.localhost/app_dev.php/showtimes/2014-09-27",
                dataType: 'json',
                //crossDomain: true,
                success: function (data) {
                    console.log("Response (google):");
                    console.log(data);
                }
            });

        });
    });
</script>
</body>
</html>

I'm not sure if I've got the workflow right as every time I want to fetch data from the URL I need to give the authorisation to use api.
I thought the first time I try to fetch data I need to authorize, but then I use token but it doesn't work this way with my code.
Can somebody please give a good example how to use JSO, Hello.js or any other Javascript Client Code with FosOAuthServerBundle