Twitter authentication in Codebird JS

Question

I am very new to integrating social sites into a website. I somewhat managed to integrate Facebook, but I have no idea how to integrate Twitter.

I want to login through a Twitter account, then get the username and some other data from Twitter. I have a consumer key and consumer secret. I'm not sure how to proceed from here, and my Google searches haven't helped so far.

I am trying with codebird js:

$(function() {
    $('#twitter').click(function(e) {
        e.preventDefault();
        var cb = new Codebird;
        cb.setConsumerKey("redacted", "redacted");
        cb.__call(
            "oauth_requestToken",
            { oauth_callback: "http://127.0.0.1:49479/" },
            function (reply, rate, err) {
                if (err) {
                    console.log("error response or timeout exceeded" + err.error);
                }
                if (reply) {
                    // stores it
                    cb.setToken(reply.oauth_token, reply.oauth_token_secret);

                    // gets the authorize screen URL
                    cb.__call(
                        "oauth_authorize",
                        {},
                        function (auth_url) {
                            window.codebird_auth = window.open(auth_url);
                        }
                    );
                }
            }
        );
        cb.__call(
            "account_verifyCredentials",
            {},
            function(reply) {
                console.log(reply);
            }
        );                 
    })
});

But I get

Your credentials do not allow access to this resource

How can I resolve this and get the user data? I am open to using an alternate Twitter implementation.

Answer 1

You cannot call cb._call( "account_verifyCredentials"... there.

The code only has a request token, NOT an access token, which you will only receive after the user authorizes your app (on the Twitter auth popup).

You are using the "callback URL without PIN" method, as documented on the README. So you'll need to implement that example code on your http://127.0.0.1:49479/ page.

Also, this essentially requires that you store the oauth credentials somewhere. In my example below, I've used localStorage.

$(function () {
  $('#twitter').click(function (e) {
    e.preventDefault();
    var cb = new Codebird;
    cb.setConsumerKey("CeDhZjVa0d8W02gWuflPWQmmo", "YO4RI2UoinJ95sonHGnxtYt4XFtlAhIEyt89oJ8ZajClOyZhka");

    var oauth_token = localStorage.getItem("oauth_token");
    var oauth_token_secret = localStorage.getItem("oauth_token_secret");
    if (oauth_token && oauth_token_secret) {
      cb.setToken(oauth_token, oauth_token_secret);
    } else {
      cb.__call(
        "oauth_requestToken", {
          oauth_callback: "http://127.0.0.1:49479/"
        },
        function (reply, rate, err) {
          if (err) {
            console.log("error response or timeout exceeded" + err.error);
          }
          if (reply) {
            console.log("reply", reply)
              // stores it
            cb.setToken(reply.oauth_token, reply.oauth_token_secret);

            // save the token for the redirect (after user authorizes)
            // we'll want to compare these values 
            localStorage.setItem("oauth_token", reply.oauth_token);
            localStorage.setItem("oauth_token_secret", reply.oauth_token_secret);

            // gets the authorize screen URL
            cb.__call(
              "oauth_authorize", {},
              function (auth_url) {
                console.log("auth_url", auth_url);
                // JSFiddle doesn't open windows:
                // window.open(auth_url);
                $("#authorize").attr("href", auth_url);

                // after user authorizes, user will be redirected to
                // http://127.0.0.1:49479/?oauth_token=[some_token]&oauth_verifier=[some_verifier]
                // then follow this section for coding that page:
                // https://github.com/jublonet/codebird-js#authenticating-using-a-callback-url-without-pin
              });
          }
        });
    }
  })
});

Also made a JSFiddle