Real world example to understand OIDC Implicit flow

This is similar to the Implicit Grant from the OAuth2 spec, but it actually extends the OIDC Authorization Code Flow. It returns the ID Token and access token directly to the user agent as part of the authentication response to the Authorization Endpoint. RPs that use the Implicit Flow can only be public clients (there is no client secret)

The return_type query parameter to the Authorization Endpoint can have one of two values: “id_token” and “id_token token”. The first value corresponds to an end user authentication scenario; the second value supports end-user authentication to an RP and the RP accessing a Resource Server. I am going to explain the second scenario in this blog using the example of login to the medium using Google.

Login to Medium using Google

1. In a new window, go to https://medium.com/, click on sing in. You will get the following options to log in to medium

Login_options

2. Click on Sign in with Google

Now medium wants to log in through google. Once logged in, the medium has to access Google's user details like email, photo and at the same time medium may need to access Google’s API on behalf of the user. But in order to get the user details or invoke the Google’s API, the medium needs a user token since medium tries to get user’s details.

Let’s see how the flow happens.

(i) As the initial step, once you have chosen Sign in with Google, the medium will send a request to authorization URL of google to get the access token and id_token. (Authorization URL of google : https://accounts.google.com/o/oauth2/auth). If you check your address bar you could see similar to the following request.

According to specification[1] authorization request should be in the following format

GET /authorize?
    response_type=id_token%20token
    &client_id=s6BhdRkqt3
    &redirect_uri=https%3A%2F%2Fclient.example.org%2Fcb
    &scope=openid%20profile
    &state=af0ifjsldkj
    &nonce=n-0S6_WzA2Mj HTTP/1.1
  Host: server.example.com

Request sent to the Google’s authorization URL

https://accounts.google.com/o/oauth2/v2/auth?client_id=<client_id>.apps.googleusercontent.com&redirect_uri=https%3A%2F%2Fmedium.com%2Fm%2Fcallback%2Fgoogle&response_type=id_token%20token&access_type=online&scope=email%20openid%20profile&nonce=obtv8wmoy3fk&state=obtv8wmoy3fk%7Chttps%3A%2F%2Fmedium.com%2F%3Fsource%3D--------------------------nav_reg%7Clogin

(ii) After that google’s authorize endpoint will redirect you google’s login page then once you enter the correct credentials google will specify the user consents (While logging in, the user is asked whether they are willing to grant the permissions that medium is requesting. This process is called user consent)

Consents

(iii) Once you accept the consents then Google will send the access token, id token to the redirect_uri which has been mentioned in the first request. If you use saml tracer then you could see the access token and id_token. If you use jwt.io and parse the id token then you could see the “email”, “name”, “picture” location (the picture you are using in your google’s account profile). All of these values are retrieved from your logged in user’s Google’s account.

According to the specification[1] the successful Authentication Response should be in the following format.

HTTP/1.1 302 Found
  Location: https://client.example.org/cb#
    access_token=SlAV32hkKG
    &token_type=bearer
    &id_token=eyJ0 ... NiJ9.eyJ1c ... I6IjIifX0.DeWt4Qu ... ZXso
    &expires_in=3600
    &state=af0ifjsldkj

Request sent from Google to the redirect_uri

https://medium.com/m/callback/google#state=47a2n5blwajc%7Chttps://medium.com/?source%3D--------------------------nav_reg%7Clogin&access_token=<access_token>&token_type=Bearer&expires_in=3599&scope=openid%20email%20profile%20https://www.googleapis.com/auth/userinfo.email%20https://www.googleapis.com/auth/userinfo.profile%20https://www.googleapis.com/auth/plus.me&id_token=<ID_TOKEN>&authuser=0&hd=cse.mrt.ac.lk&session_state=94e9db0eeaec51ea2d1bd613f83e8d4e17e2bbb5..1325&prompt=none

Decoded JWT token contains the following user details.

“email”: “nilathiru.12@cse.mrt.ac.lk”,
 “name”: “nilasini thirunavukkarasu”,
 “picture”: “https://<actual_path_of_email_profile>/photo.jpg",

In this example, the medium has asked access_token and id_token from Google. That means medium used implicit grant flow to get the id token and access token. Using the id token medium can get user’s email, photo and name. Using the access_token medium can access Google’s API.

Explain implicit grant flow through the flow diagram

openidconnect implicit flow

Let's say I (Nila) have clicked on sign in button in the medium. Click on Sign in using Google.

Step 1 & 2:- Relying party (medium) prepare the oauth request and sent the authorization request with client id and redirect_uri (Redirection URI to which the response will be sent. This URI MUST exactly match one of the Redirection URI values for the Client pre-registered at the OpenID Provider) to OpenID provider's (Google)authorization endpoint.

Step 3:- Google will ask the end user (Nila) to log in through Google.

Step4:- Nila will give the Google’s credential and read the consent and submit the credentials to Google.

Step5:- Google will validate the provided Nila’s credential and if the authentication successful then Google will send id token and access token to the redirct_uri

Step6:- Medium will validate the id token and used it get the user details. If the medium needs more information or updated information medium will send the access token to Google’s /userinfo endpoint and get the user details.

Note:- When using the Implicit Flow, all tokens are returned from the Authorization Endpoint; the Token Endpoint is not used

Difference between using id_token Vs calling userinfo endpoint

One of the differences, for standard OIDC claims like the email, is that by calling the endpoint you’ll be able to get an updated view of the user information while the ID token contains the information at the time the authentication took place.

The following sequence diagram explains you the flow.

Sequence diagram for implicit grant

I will explain about authorization code flow in my next medium post.

[1] https://openid.net/specs/openid-connect-core-1_0.html#ImplicitFlowSteps