Build Implicit Flow with Google OpenID Connect

Q

How to implement the OpenID Implicit Flow with Google OpenID Connect service?

✍: FYIcenter.com

A

If you want to implement the OpenID Implicit Flow in your Web application to use Google OpenID Connect service, you should follow these steps:

1. Building the Google OpenID Connect Sign-on authentication request:

  • Register your Web application to the Azure Active Directory where your end users have login credentials. For example, your company's Active Directory hosted in Azure.
  • Add the URL where your server script is located to the above registration as a "Reply URL". This URL will be used as the "redirect_uri" in the authentication request.
  • Take the "Client ID" from above registration and use it as the "client_id" in the authentication request.
  • Set "scope=openid email", and "response_type=id_token" in the authentication request.
  • Set "nonce" to a random number and cache it in your application. So you can use it to validate the "id_token" value later.
  • Set "state" to another random number. So you can use it to validate the response later.

2. Triggering the end user browser to fire the authentication request to https://accounts.google.com/o/oauth2/v2/auth.

  • Create a login page, login.html, to display a login button.
  • When the button is click, invoke a JavaScript in the browser to fire AJAX call to https://accounts.google.com/o/oauth2/v2/auth?... containing all request parameters in the URL as the query string.

3. Letting the end user sign on to a Google account - This is controlled by the Google OpenID Connect service. Your application is not involved in this step.

4. Validating the authentication response:

  • Then the JavaScript in the browser received the authentication response from Google OpenID Connect service, take all parameters in the "anchor" part after the "#" sign of the redirect URL, which should have the "id_token" value and "state" value.
  • Verify "state" value, it must be the same value you provided in the authentication request. Otherwise, display some error message page back to the end user.
  • Decode "id_token" and perform validation. See next tutorial on how to validate "id_token".

4. Letting the end user to use your application:

  • Take the email address and other user information decoded from the "id_token" as trusted information.
  • Let the end user to use your application.

 

Decode Google OpenID Connect id_token

Capture Google OpenID Connect Authentication Response

Google OpenID Connect Integration

⇑⇑ OpenID Tutorials

2019-02-10, 452👍, 0💬