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

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