Access User Profile API via Google OAuth 2.0 Playground ?

The OAuth Playground is an application/tool by Google for learning how OAuth works. It presents you with a three-step process for selecting the services you want to authorize, generating an access token, and making API requests.

In OAuth terminologies, Google OAuth playground will act as a client Application which does contain client id, Client secret and OAuth Endpoints required to access Service provider.

It also supports custom endpoints as well i.e. using Google OAuth playground you can connect to another service provider as well apart from Google like Salesforce.

Resource Owner: You
Client Application: Google OAuth 2.0 Playground
Service Provider: Google

In this blog, I’ll only focus on Google API and will try to retrieve user profile via playground.

Step 1: Hit https://developers.google.com/oauthplayground/

Step 2: You will see a list of scope using which you can access particular resources. As our aim is to fetch user profile so will scroll down and select https://www.googleapis.com/auth/userinfo.profile from Google People API v1 scope.

Step 3:  Click on Authorize APIs button and If you are not logged into google then it will ask for your user credentials and after successful authentication, it will show the authorization consent page. Click on Accept button.

Step 4: Now we have the Authorization Code but if you check Request/Response section then you will notice that playground application hits AUTHORIZATION ENDPOINTS

Authorization request:

We hit this request to the authorization endpoint to obtain an authorization code

https://accounts.google.com/o/oauth2/v2/auth?redirect_uri=https%3A%2F%2Fdevelopers.google.com%2Foauthplayground&prompt=consent&response_type=code&client_id=407408718192.apps.googleusercontent.com&scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.profile&access_type=offline

where

response_type  ->  it always should be code, specifies that request is sent to the authorization endpoint to obtain an authorization code. ( Required)

client_id -> The Id issued to this application by Authorization server at the time of registration. (Required)

redirect_uri -> URI registered on the authorization server as a RedirectURI or callback URL. 

Scope -> Access scope of the request

and after successful authentication and authorization, Playground is getting the Authorization Code on its registered redirect URL.

Authorization response:

It contains the Auth code in exchange of which we will get the access token.

/oauthplayground/?code=4%2F0pGBATfaL6OoBr4qotf_W6FrCnTiCR7Bidd7BgaWenU

where 

code -> Authorization code (Required)

Step 5: To get the access token, Click on Exchange authorization code for tokens button and you will get the access and refresh token.

Check Request/Response section, Playground hits TOKEN ENDPOINTS to get the access token.

Token request:

We hit token endpoint to obtain an access token by exchanging the Auth code.

code=4%2F4by6pl_Bc22NnjpiCMvqrW4R2SL4oI7OjioWBHqWrD0&redirect_uri=https%3A%2F%2Fdevelopers.google.com%2Foauthplayground&client_id=407408718192.apps.googleusercontent.com&client_secret=************&scope=&grant_type=authorization_code

where

client_id -> The Id issued to this application by Authorization server at the time of registration. (Required)

client_secret -> The key secret issued to this application by Authorization server at the time of registration. (Required)

Grant_type -> Must be set to authorization_code. (Required)

Code -> The Authorization code received by the Authorization server.

(Required)

redirect_uri -> URI registered on the authorization server as a RedirectURI or callback URL. (Required)

Token Response:

The token response contains an access token along with other information in a JSON format.

{

  "access_token": "ya29.GlvMBFEQ8efg2id-lwfWJJIZl0_7rlCRyCKVWvv3v_cXIUlnYXVn6D04nUEIh9AFB65pdZcfms5TaDz692-2hmadFg0o6R1X7hdYUKuFwA9v2NvXqiLwOIFpUJlV",

  "token_type": "Bearer",

  "expires_in": 3600,

  "refresh_token": "1/KVEh2UxFjMt5zynnbm9qajpnkDsREQTA3kldrAvcqKQ",

  "id_token": "eyJhbGciOiJSUzI1NiIsImtpZCI6IjhiNmE3ZDhhM2I0NTQ4YWU1MjBmZDJkMTY2ZWEzN2U2ZGRjY2JkOWYifQ.eyJhenAiOiI0MDc0MDg3MTgxOTIuYXBwcy5nb29nbGV1c2VyY29udGVudC5jb20iLCJhdWQiOiI0MDc0MDg3MTgxOTIuYXBwcy5nb29nbGV1c2VyY29udGVudC5jb20iLCJzdWIiOiIxMDUyOTA1MTEwNTU1NTA4NjY0ODciLCJhdF9oYXNoIjoiODVIUHJYSnZiWTNmN0FTOEg2VjBYZyIsImlzcyI6Imh0dHBzOi8vYWNjb3VudHMuZ29vZ2xlLmNvbSIsImlhdCI6MTUwNTkwNzc3MCwiZXhwIjoxNTA1OTExMzcwLCJuYW1lIjoiYWJkdWwgd2FoZWVkIiwicGljdHVyZSI6Imh0dHBzOi8vbGgzLmdvb2dsZXVzZXJjb250ZW50LmNvbS8tcDRVaEFJTUNkWkUvQUFBQUFBQUFBQUkvQUFBQUFBQUFCQ0UvTy1YUnEyUFVhYW8vczk2LWMvcGhvdG8uanBnIiwiZ2l2ZW5fbmFtZSI6ImFiZHVsIiwiZmFtaWx5X25hbWUiOiJ3YWhlZWQiLCJsb2NhbGUiOiJlbi1HQiJ9.sS2Du_uR0Y-Sr2BlxBkbYSbzNfXDLy_Baj1ZbX21x-tWUHTe5R9v9ZR8S7gwfmVjAPAjHm-ivQg4aOBzQs8U9YmCei2tg1vLFTg51KsTWXK6u4WEbgHQQaPOORAfeKrZtKaUjvQgTKy007Dqdv_nzT6dt9b-vezTDLHX-fV9lx-k_-ApD9BKdrBjsqx8tAJ1cC_vg4NY_M--6ztYSf8xKG_aAF296Mq_aUakVGSl2pA5n3k0SMXyJlkIaWCilz2jQjBt_Hi_zeKdezCIU4jHTr8lstyz_SV9V2nueWV7n82K2RzS3uo-PtMDUWceNRr0r6dhWh_JxXivCqH2twh9pw"

}

Where

access_token -> token using which you can access the user details from resource server.

token_type -> define the nature of token

expire_in -> number of seconds after which the access token get expired.

refresh_token -> using refresh token, we can get new access token once the above access token is no longer valid.

Step 6: Select V2 UserInfo from list possible operations to get the user profile.

Step 7: Click on Send the request button and it will access the user profile by passing access token as authorization bearer in the headers and display it in JSON format.

Conclusion: Google playground is an amazing tool to learn OAuth flow with Google as well as with custom application. If you are planning to build your Authorization server then you can use it as a testing tool as Google playground is a standard OAuth Client web application.

If you need an idea on how can we get it done the same thing via JAVA web application then you must check my blog over here. I have done something similar where my Service provider is Salesforce instead of Google.