How do I Implement twitter Oauth into my Google chrome extension

Question

I figured out how to get the sign in button and redirect through php code. BUT, Chrome Dev only allows client side code. How do I get the log in with twitter with client side code for my Chrome app?

is there a way to run php code for a chrome app?

Answer 1

Here is another alternative to CodeBird for authenticating a twitter user in a Chrome extension.

The key with this approach is to provide Twitter with a legitimate domain for the callback URL for your app. Then, use content scripts to inject a script onto that same domain. That script will parse the query string of the URL to get the tokens and send those tokens in a message to your extension's background script. Your background script will take the tokens and then perform the third leg of the oauth process, which will finally get you the oauth token and oauth token secret.

Here is a brief example:

1. in your manifest.json, make sure your content script matches the same domain that you put in your twitter app settings callback URL:

   "content_scripts": [{
        "matches": ["https://andyjiang.com/*"],
       "js": ["js/session.js"]
   }]
   

2. Then, in your js/session.js file, have this sort of logic:

   chrome.runtime.sendMessage({type: 'auth', session: 
   window.location.search.substr(1)}, function(response) {
       window.open('', '_self', '');
       window.close();
   });
   

3. In your background script, have some logic that listens for the message, gets the token, and uses Twitter's API for the third leg of the oauth process to finally get the oauth token and oauth token secret, which you can then save in localStorage or chrome.storage.

Here is sample code of the logic:

https://github.com/lambtron/chrome-extension-twitter-oauth-example

Hope that helps!

Answer 2

You can use the Chrome Identity API for this. Check out Non-Google account authentication for simple instructions on making a request using the launchWebAuthFlow API function.

Previously, there were client side libraries for implementing the OAuth flow, such as oauth2-extensions described here, but thankfully this is not required anymore .

Update

I've been playing around trying to get an example working for Twitter, but haven't quite got there. It appears that Twitter doesn't have an API endpoint that matches the OAuth2 URL that is expected. I think in the case of Twitter, you may have to use OAuth 1.0a instead, which would require a library after all. I found one called CodeBird. I will try and investigate further though.

Example using Chrome Identity API to Authorise Instagram

You need to register the client to your provider with https://abcdefghijklmnopqrstuvwxyzabcdef.chromiumapp.org/intagram_cb, where 'abcdefghijklmnopqrstuvwxyzabcdef' is replaced with your extension ID and intagram_cb is name for a path to be able to distinguish between other providers you wish to authenticate with within the extension. If you only have one, then you can omit it.

Add provider to the permissions property in the manifest.json file:

"permissions": [
   "*://*.instagram.com/*"
]

Get access token. You obtain the client_id token from your provider account:

var redirect_uri = chrome.identity.getRedirectURL("intagram_cb");
var client_id = "123456789012345";
var auth_url = "https://instagram.com/oauth/authorize/?" +
    "client_id=" + client_id + "&" +
    "response_type=token&" +
    "redirect_uri=" + encodeURIComponent(redirect_uri);

chrome.identity.launchWebAuthFlow({'url':auth_url, 'interactive': true},
     function(redirect_url) {
         // extract the token from this url and use it for future requests
         var accessToken = redirect_url.substring(redirect_url.indexOf("=") + 1);
     }
});