[SOLVED] How to use Google's OpenID connect provider with CORS?

How to use Google's OpenID connect provider with CORS?

I've written a JavaScript app to use Google's OpenID-Connect provider for authentication. I've registered the app at Google's developer console.

I'm using the oidc-client-js library to handle the interactions with Google and also passed my app's client_id to the configuration, so that it is passed to Google to authenticate my app.

My configuration:

{
  client_id: 'secret',
  redirect_uri: `${window.location.protocol}//${window.location.hostname}:${window.location.port}/callback`,
  response_type: 'token id_token',
  scope: 'openid profile',
  authority: 'https://accounts.google.com/',
  silent_redirect_uri: `${window.location.protocol}//${window.location.hostname}:${window.location.port}/silent_renew.html`,
  automaticSilentRenew: true,
  filterProtocolClaims: true,
  loadUserInfo: true
};

My dev server runs on https://localhost:8080 (with a self-signed dev certificate). I've registered this URL & redirect URI at Google as an authorized host for my app, so Google knows about my dev server. When I try to access Google's OpenID-Provider I get the following error:

XMLHttpRequest cannot load https://accounts.google.com/.well-known/openid-configuration. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://localhost:8080' is therefore not allowed access.

EDIT: I've narrowed the issue down to Google's endpoint not having any CORS headers set in its response. Authentication works if I disable Chrome's CORS security settings. This is not desireable by any means, but it also means that CORS is the real culprit here.

Is there any way for me to use CORS with Google's OpenID discovery document? Do I have to register a CORS origin for my server at Google?

Solution

It appears that Google's OpenID discovery document does not have CORS support, so no JavaScript app can access it (which should propably be fixed on Google's side).

In order to get it to work with oidc-client-js you will have to set the information obtained from the discovery document manually as described in the wiki.

EDIT (07/20/16): Thanks to mengcheng for his answer. Google's discovery document now has fully fledged CORS support. The step of manually setting the information from the discovery document is no longer necessary.