1

I am creating a chrome extension, rather a chrome webapp. This application just contains the html, js, image and css files. The application connects to a server to fetch data. I chose to do this as it would reduce the amount of files downloaded by the user. Using Backbone.js I have an MVC architecture in my application. Thus the application just sends json.

Now having said this, I need a session management. I plan to use Google authentication as the organization has Google Apps. I need a method that once the user has logged in using google auth the server get the user name every time the application makes a request.

Is it a good idea to add the user name in request header, if possible. Or should I use cookies? Can any one tell me how I could go about using cookies in this case?

serg
  • 109,619
  • 77
  • 317
  • 330
satran
  • 1,222
  • 4
  • 16
  • 27

2 Answers2

3

This might be a late response but I want to present a more elegant solution to you given that the user has cookies enabled in their browser. First read my answer on another question.

Now that you can send cross origin xhr from your content scripts all you need to do is store all your authentication and session management at server only. That is right, you just need to display whether the user is logged in or not and a logout button at client based on server response.

Just follow these steps.

  1. At client Whenever user accesses your chrome web app, blindly make XmlHttpRequests to your server without worrying about authentication, just keep a tab on response from server which I describe below.

  2. At server whenever you receive a request check for valid sessions or session cookie. If session is valid send proper response, if not send error, 401 or any other response to communicate to your client that session is not valid. It is better if you send an error code like 401 since then you can put a generic script at client to inform them that they are not logged in.

  3. At Client If response from server is proper, display it, else display login link to your website.

  4. IMPORTANT: Display logout button if user is logged in.

Check out my implementation of this in my extension

Community
  • 1
  • 1
Juzer Ali
  • 4,109
  • 3
  • 35
  • 62
  • `At server whenever you receive a request check for valid sessions or session cookie.` I don't understand this. How the extension will be able to send session cookie? – avi Jul 09 '14 at 13:22
  • Chrome stores cookies per domain in its internal database. Whenever you send request from the browser (except from incognito mode), chrome will send all the cookies associated with the domain. – Juzer Ali Jul 10 '14 at 05:50
  • are these cookies secure and inaccessible to anyone? – avi Jul 10 '14 at 06:04
  • It depends on the server. If you make it an `HTTPOnly` cookie it cannot be accessed in javascript execution environment. It makes no difference between your webpage and extension. – Juzer Ali Jul 10 '14 at 09:04
  • @JuzerAli - I'm trying to make an XHR request to my local server in my `background.js`. I've logged in to my local server. Whenever I hit my webservice via the browser address bar, the session is maintained (ie it sends the cookie details). However, when a request is made by `background.js` file of my extension, it does not send the cookie in the headers. Why? – Praful Bagai May 29 '19 at 19:38
1

For help using Google authentication in your app take a look at Google's OAuth tutorial which comes with all you need (took me no time to set it up using this).

As for session management. The implementation of OAuth used by Google stores the tokens in localStorage. Also, as briefly mentioned in the extensions overview we are expected to use localStorage to store data. Thus, I suggest you store the users name here as it will be accessible throughout the app's lifetime (until it is uninstalled). However, you may need to manage the name stored here and consider what should happen when users log in and out. That said; I'm not sure if sessionStorage would be a better option as I've never used it before, let alone in an extension.

Note

localStorage and its counterparts only store strings so I suggest using a wrapper which uses JSON to parse and stringify to get and set your values respectively.

neocotic
  • 2,131
  • 18
  • 18
  • Also see http://code.google.com/chrome/extensions/trunk/experimental.settings.html, which is a new (but experimental) way of storing settings in a sync-friendly manner. – Boris Smus Aug 17 '11 at 22:55
  • I have to admit that API doesn't appeal to me at all as the use of callback functions to get/set settings would make, at least for me, code less attractive and untidy. Simple getters/setters should be used for settings in my opinion. Hopefully this will be changed but due to the usage of callback functions in the existing API I'm guessing they use this approach for a reason. – neocotic Aug 18 '11 at 07:21