Skip to main content

Frontend Implementation

Sequence​

  • In the above sequence diagram, we have depicted information related to frontend web application only.
  • When the user opens the login screen, it is directed to a screen we prepared on the front web application with the Login to mIDentity or something similar.
  • In our frontend implementations, this screen will be named as /callback page.
  • The user can get to this screen in two ways, directly by /callback or /callback?code=code
  • Here we need to check if the query parameter is a code value or not and then perform the required implementation.

By /callback​

  • We direct to this address when the user clicks on the Login to mIDentity button.
  • What we need to perform here is to get the address, that the user will login to, from the backend application and then to redirect user to this address.
  • Make a Request URL: /auth/oidc
    Request Method: GET
ParameterDescriptionType
redirect_uriThe address to return after a successful loginQuery parameter
  • As a response we get an address from the backend application and when we redirect user on the frontend web application, the login process will start on mID Provider OpenID.
  • This address comes as “Composed_url”. For example:
"composed_url":"https://tenantname.aws1.test1.com/auth/realms/{tenantname}/protocol/openid-connect/auth?client_id={client_id}&redirect_uri=https%3A%2F%2Foidcdebugger.com%2Fdebug&scope=openid&response_type=code%20token&response_mode=form_post&nonce=2wfzjk80tki"

By /callback?code=code​

  • After the user clicked the Login to mIDentity button and successfully logged in, user gets back to this address. Here the code query parameter is set by the server, that provides us to login with OpenID.

  • The process will function when we read the code value from the query parameter and forward it to the backend application.

  • Make a request URL: /auth/code

  • Encoding: x-www-form-urlencoded

  • Method: POST

ParameterDescriptionType
redirect_uriThe exact same address used to loginBody
codeThe code taken as a query parameterBody

  • The process is completed when the backend application gets the code value and the JWT token, session or information of the authentication process and other credentials of user.

  • The response:

{
  "token":"eyJhbGciOiJSUzI1NiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICJhY2tnTmFLcmJuZVIwc3NkZ0VWcWFGNHRCZHBCUGp1UVJLWC1faGRJbnhzIn0.eyJqdGkiOiJmMDY5MjFjNC0xOGU0LTQ3ZjYtOGUwZi03N2JjZjk5NzAwYjkiLCJleHAiOjE1OTIzMTAyODcsIm5iZiI6MCwiaWF0IjoxNTkyMzA5OTg3LCJpc3MiOiJodHRwczovL3Rlc3RpbmcuYXBpLm1pZC1pbnQtMDIuMm5kZmxvb3IuYXdzLWRldi5rb2JpbC5jb20vYXV0aC9yZWFsbXMvdGVzdGluZyIsImF1ZCI6WyJyZWFsbS1tYW5hZ2VtZW50IiwiYWNjb3VudCJdLCJzdWIiOiIzMTU1MWY2Ni0xZjI5LTRiNjEtOGM3Ni1hYWQzMzA0ZTA4NGMiLCJ0eXAiOiJCZWFyZXIiLCJhenAiOiJ0ZXN0IiwiYXV0aF90aW1lIjowLCJzZXNzaW9uX3N0YXRlIjoiMWVhNWJjY2ItZDg0ZC00N2QwLTk1ODAtNmM0NWQ4Mzc5NTgyIiwiYWNyIjoiMSIsImFtciI6Im5hIiwicmVhbG1fYWNjZXNzIjp7InJvbGVzIjpbImRpZ2l0YW5pdW1fdXNlciIsIm9mZmxpbmVfYWNjZXNzIiwidW1hX2F1dGhvcml6YXRpb24iLCJkaWdpdGFuaXVtX2FkbWluIl19LCJyZXNvdXJjZV9hY2Nlc3MiOnsicmVhbG0tbWFuYWdlbWVudCI6eyJyb2xlcyI6WyJ2aWV3LXJlYWxtIiwidmlldy1pZGVudGl0eS1wcm92aWRlcnMiLCJtYW5hZ2UtaWRlbnRpdHktcHJvdmlkZXJzIiwiaW1wZXJzb25hdGlvbiIsInJlYWxtLWFkbWluIiwiY3JlYXRlLWNsaWVudCIsIm1hbmFnZS11c2VycyIsInF1ZXJ5LXJlYWxtcyIsInZpZXctYXV0aG9yaXphdGlvbiIsInF1ZXJ5LWNsaWVudHMiLCJxdWVyeS11c2VycyIsIm1hbmFnZS1ldmVudHMiLCJtYW5hZ2UtcmVhbG0iLCJ2aWV3LWV2ZW50cyIsInZpZXctdXNlcnMiLCJ2aWV3LWNsaWVudHMiLCJtYW5hZ2UtYXV0aG9yaXphdGlvbiIsIm1hbmFnZS1jbGllbnRzIiwicXVlcnktZ3JvdXBzIl19LCJhY2NvdW50Ijp7InJvbGVzIjpbIm1hbmFnZS1hY2NvdW50IiwibWFuYWdlLWFjY291bnQtbGlua3MiLCJ2aWV3LXByb2ZpbGUiXX19LCJzY29wZSI6InByb2ZpbGUgZW1haWwiLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwibmFtZSI6IlNlcmthbiDDlnplbCIsInByZWZlcnJlZF91c2VybmFtZSI6InNlcmthbi5vemVsQHdlc3Rlcm9wcy5jb20iLCJnaXZlbl9uYW1lIjoiU2Vya2FuIiwiZmFtaWx5X25hbWUiOiLDlnplbCIsImVtYWlsIjoic2Vya2FuLm96ZWxAd2VzdGVyb3BzLmNvbSJ9.FVufVZK1tJAyhuRBmzwZfGjuZCZpcLrXeTqKo0NC6T8LpnOY-AIm2JxexHsAzuzyqLxqBtFAhCFIKykgvvNBpbO1Z8SG3G70l15QNmAVcRW-nlJy7T4V966mgKecvbkFgiM66XSAQEkpIPetzuS6K9vJJZlL04wJsUU2bIcGfggQ-9QE-7GeVBAnZQkUK2v34QaTBpF78_DHKjXbJkqpt8vTnIIcbr3p-M9ftHSR1686rR6EwWnPfhDj-nFHSam9-K9rkt2UbZTcvlfBS9QGw0wLrsWm_R1-ZcizSBTD42nG096AK3lGSG33kbrtF0L4aG9cVPUaiMkNFIOme15Dgw",
  "user": {
    "email": "test@test.com"
  }
}