Shield

OAuth2 Authorization code flow with OIDC.

Authorization code flow is one of the OAuth2 flows.

In this example we will get an oauth2 authorization code token for one of our users. In addition to that we will get an id_token as well.

INFO

This flow includes PKCE as well.
Make sure your client config has at least one of plain or s256 challenge methods in its config.

Prerequisites:

Steps:

Step 1: Redirect to the Shield

Redirect the user to the Shield oauth2 authorization page with these params:

  • client_id: {your client_id} (change to your real client_id)
  • response_type: code id_token .
  • redirect_uri: {the redirect uri which you set when you created the client}
  • scope: profile phone openid
  • code_challenge_method: The code challenge method name. e.g., s256 or plain.
  • code_challenge: The code challenge value. In this case we use S256 method.
http://localhost:4000/oauth2/auth?response_type=code id_token&client_id=202228144043.ovgj1k4tzbgrx45&redirect_uri=http://gateway.local:3000/oauth2/redirect&scope=profile phone openid&code_challenge_method=S256&code_challenge=YgZ3Q203xivdxRYFT9AcgWNgoqCH6X0jNBPivER-MfM

Step 2: Authorization check by Shield

At this step Shield checks if user is not logged in, so redirect they to the login page and after that finally redirect the user to the redirection endpoint of your client with a code and id_token.
Here is an example of redirection url:

http://gateway.local:3000/oauth2/redirect?code=begrwxkjyl&id_token=eyJhbGciOiJSUzI1NiIsImtpZCI6InNoaWVsZF9wcmltYXJ5X2tleSIsInR5cCI6IkpXVCJ9.eyJhdWQiOiIyMDIyMjgxNDQwNDMub3ZnajFrNHR6YmdyeDQ1IiwiZXhwIjoxNjQ1NDUzNTIzLCJmYW1pbHlfbmFtZSI6InBycyIsImdpdmVuX25hbWUiOiJtZWhyYW4iLCJpYXQiOjE2NDUzNjcxMjMsImlzcyI6Imh0dHBzOi8vc2hpZWxkLmxvY2FsIiwibmFtZSI6Im1laHJhbiBwcnMiLCJwaG9uZV9udW1iZXIiOiIrOTg5MzY2NTc5Mzk5Iiwic3ViIjoiNjFkZDZmYTEzNDE4YTRmNTk2OWRkZDM4In0.mbWIpnBuRbH_aQlzrolueTN-LHbQgRq7tupXFUaPRy94GQdNCFQpP70ah6Ha_iDU1tpM69Hr7CAGtfpEzsP6sLYidz3A119MFzsfxyfiG7UrOLKAtlj-oBzMKX0i0g-LwlCoU2CywvvcqPOZjeNpQKkGLYH-iIBaeuRuRvU56iXPQnw6pzxLm6Gml0KizRbZAgY3ZyYBr1OaKlITEtmIlk1hQwoXJ0cLL7eJ1gWTUPrUnHmElAbb9Jjt9wMO9mxSsqYY6ctIL8Ktxz_DCkg5IvlqBHp4-N5Wbfx7DSnBmOYsiuaDsPLUd1VvT1jquiwQxNlVIYn-Bvcur9qsgWEaHMLNPdmePbjBaAm_ecFm2vQfaXe6ciVNTJdOd7sCDEUWe1dF9zUZ5M1F3K8Eo0sqcxgquVVQtMu9bFGWRhHjaBSAkeB7MZhn1VDQ0ArAfVmJk1NgdYRIkwLAFucBY5Awqjq-DuBtZeaa13_tE11zLvIvYLEsKGjFwrlnWie26-AKvqMukJ7DeHs3vZn6qKx90urs95Q_o3CrSg2JjrbBi1UEgThL2kKe_Tbw_NFK83ATQ_S1ONdg9W06OARsKAGzFWmTyvSLPJbjoAkrd_iB9BPomqkONPlONV9z2KJ1TNzSyYtaOJv_VUn3Oim01RPFNCUaA2OnoVr5ST-mXuuMjRo

In this case the code is begrwxkjyl and the id_token is:

eyJhbGciOiJSUzI1NiIsImtpZCI6InNoaWVsZF9wcmltYXJ5X2tleSIsInR5cCI6IkpXVCJ9.eyJhdWQiOiIyMDIyMjgxNDQwNDMub3ZnajFrNHR6YmdyeDQ1IiwiZXhwIjoxNjQ1NDUzNTIzLCJmYW1pbHlfbmFtZSI6InBycyIsImdpdmVuX25hbWUiOiJtZWhyYW4iLCJpYXQiOjE2NDUzNjcxMjMsImlzcyI6Imh0dHBzOi8vc2hpZWxkLmxvY2FsIiwibmFtZSI6Im1laHJhbiBwcnMiLCJwaG9uZV9udW1iZXIiOiIrOTg5MzY2NTc5Mzk5Iiwic3ViIjoiNjFkZDZmYTEzNDE4YTRmNTk2OWRkZDM4In0.mbWIpnBuRbH_aQlzrolueTN-LHbQgRq7tupXFUaPRy94GQdNCFQpP70ah6Ha_iDU1tpM69Hr7CAGtfpEzsP6sLYidz3A119MFzsfxyfiG7UrOLKAtlj-oBzMKX0i0g-LwlCoU2CywvvcqPOZjeNpQKkGLYH-iIBaeuRuRvU56iXPQnw6pzxLm6Gml0KizRbZAgY3ZyYBr1OaKlITEtmIlk1hQwoXJ0cLL7eJ1gWTUPrUnHmElAbb9Jjt9wMO9mxSsqYY6ctIL8Ktxz_DCkg5IvlqBHp4-N5Wbfx7DSnBmOYsiuaDsPLUd1VvT1jquiwQxNlVIYn-Bvcur9qsgWEaHMLNPdmePbjBaAm_ecFm2vQfaXe6ciVNTJdOd7sCDEUWe1dF9zUZ5M1F3K8Eo0sqcxgquVVQtMu9bFGWRhHjaBSAkeB7MZhn1VDQ0ArAfVmJk1NgdYRIkwLAFucBY5Awqjq-DuBtZeaa13_tE11zLvIvYLEsKGjFwrlnWie26-AKvqMukJ7DeHs3vZn6qKx90urs95Q_o3CrSg2JjrbBi1UEgThL2kKe_Tbw_NFK83ATQ_S1ONdg9W06OARsKAGzFWmTyvSLPJbjoAkrd_iB9BPomqkONPlONV9z2KJ1TNzSyYtaOJv_VUn3Oim01RPFNCUaA2OnoVr5ST-mXuuMjRo

Step 3: Token request

Send a token request with the code from the previous step . Request params are as following:

  • grant_type: authorization_code
  • redirect_uri: It should be your redirect uri.
  • code: The code from the previous step.
  • code_verifier(optional): Set the code verifier if PKCE is enabled for your client .
  • client_id and client_secret to use in basic authentication method. its value should be base64 value of client_id:client_secret. To generate the base64 value of your clinet_id and client_secret you can use following command in osx or linux:
  • code_verifier: The code verifier to verify the PKCE challenge.
echo -n your_client_id:your_client_secret | base64

Here is an example of this request:

curl --location --request POST 'localhost:4000/oauth2/token' \
--header 'Authorization: Basic MjAyMjI4MTQ0MDQzLm92Z2oxazR0emJncng0NTpteV9wYXNzd29yZA==' \
--form 'grant_type="authorization_code"' \
--form 'redirect_uri="https://gateway.local:3000/oauth2/redirect"' \
--form 'code="begrwxkjyl"' \
--form 'code_verifier="0e4306d2c8c3f64d80955a94ead359c6f2544624ce01c90ac2"'

You will get a response like this:

{
  "access_token": "nxdu4jbeu989r7nhsgqxt1be2dk8hu",
  "expires_in": 259200,
  "id_token": "eyJhbGciOiJSUzI1NiIsImtpZCI6InNoaWVsZF9wcmltYXJ5X2tleSIsInR5cCI6IkpXVCJ9.eyJhdWQiOiIyMDIyMjgxNDQwNDMub3ZnajFrNHR6YmdyeDQ1IiwiZXhwIjoxNjQ1NDU0NjcxLCJmYW1pbHlfbmFtZSI6InBycyIsImdpdmVuX25hbWUiOiJtZWhyYW4iLCJpYXQiOjE2NDUzNjgyNzEsImlzcyI6Imh0dHBzOi8vc2hpZWxkLmxvY2FsIiwibmFtZSI6Im1laHJhbiBwcnMiLCJwaG9uZV9udW1iZXIiOiIrOTg5MzY2NTc5Mzk5Iiwic3ViIjoiNjFkZDZmYTEzNDE4YTRmNTk2OWRkZDM4In0.hF-32S8cpEbSVMkxzL8xNOX732WPQavZMQ9pqVVWEc8zMb7JvT5lnLrY6jyHEOF-y_OksnwA1HpuTQhsvGZkcyRnbHgUaEFfg5D00Hm1MdNsFtm9B0q_lFOJOjAzlXU62RJWVFJbskgQqv-PxCOmkC1Y3IfdlcftuzZJD3SWDgzOVTCvaskK-sXH8fFuuBi03sEY0FbcbIF8EOwUYuB9keCsXGxdzYXCQT3cIBfZfQo0MSSJc4iIk_RYnyBl2yzFKqlDulI_fVSsD6YLo809MbeiEj_qxjm_R2K7Q8wwaNgq4Pgc3b9T3WyDDKHbqA4EvoXFvJCNGXV6monySGGUUKf5HA94Fe4oMdMHc2K18ITcdeth1HECX6wKe1GdQwEl94MJ5TQzVU9e4qZFJ8c-hCGPRsUBcUmR5vWHcf9HSkxNoLO2kq_pcBPmLSa1DNSQCR2PzmAoSZk5w7warkuSPUt7NfYJ26n-ZZT2hmpr0b-Oy4tWfwno9BUsFZ6iC_30tS6Tp1v25oNpbLJvWTCP62aDhE_GpdjjFsUF5AeyGpJ1WWwZdqG6zgCUG-bRs2_OWThkCc2b65lf0vbhWz3np8Fa6RnP3znDXhbSa5-tx3r9GtN4NptgoTIle_NF58DFA5o7c9bh_AeEeyINXnezcFj7P1PNPjOI2i0RSjmhTs4",
  "refresh_token": "8cv5wz8rj7mvb1lj43wlxeldqu1p6c",
  "scope": "profile phone openid",
  "token_type": "Bearer"
}

Now you can use the token and also use the id_token to extract the user's data.

Last Updated: