Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Chrome Extension example of oAuth 2.0

The chrome developer extension tutorials use an outdated oAuth 1 that will be phased out in April 2015: https://developer.chrome.com/extensions/tut_oauth

Is there a tutorial of implementing oAuth 2.0 inside a chrome extension?

like image 668
Dmitry Sadakov Avatar asked Feb 04 '15 20:02

Dmitry Sadakov


People also ask

Why can't I use OAuth2 with Chrome extensions?

Also, today's OAuth 2 implementations diverge from the spec in varying degrees, adding to the developer pain. The reason this library needs to be chrome extension-specific is that unfortunately Chrome extensions can't directly use the OAuth 2.0 server-side or client-side flows because they live at chrome-extension:// URLs.

How do I create an OAuth client ID for Chrome extensions?

On the Create client ID page, select Chrome App. Fill out the name of the extension and place the extension ID at the end of the URL in the Application ID field. Finish by clicking create. The console will provide an OAuth client ID. Include the "oauth2" field in the extension manifest. Place the generated OAuth client ID under "client_id".

What is OAuth and how does it work?

Applications that access online services often need to access a user's private data. Chrome Extensions are no different. OAuth has emerged as the standard way of letting users share their private resources across sites without having to hand out their usernames and passwords.

How to mitigate the differences between OAuth2 and OAuth 2?

To mitigate differences between OAuth 2.0 implementations, I implemented the Adapter pattern. Doing this encapsulates protocol differences in a separate adapter module for each server implementation.


1 Answers

I've written an example of how to integrate any OAuth2 system into a Chrome extension. My extension uses AngularJS as the framework, but you could do it in plain old JavaScript or some other framework if you so choose by following the same patterns.

The trick is to use the chrome.identity.launchWebAuthFlow() method.

My example is actually configured to use Google, but that's merely because it is convenient. You can use your own OAuth2 provider, as I do at my company. The important distinctions are that launchWebAuthFlow() doesn't require the browser to be logged into Google the way the chrome.identity.getAuthToken() method would, and that you can use it with non-Google OAuth2 systems.

like image 77
Michael Oryl Avatar answered Sep 23 '22 18:09

Michael Oryl