Login to a SPA with WSO2 Identity Server and Invoke an API with the Token

Configuring SPA to use WSO2 IS as the authorization server

I used a sample single page react app as my SPA.

The sample is written using SDKs which supports authentication through OIDC with WSO2 IS.

Register this SPA as a service provider in WSO2 IS, and copy the client ID you got for that app after registering in WSO2 IS.

In the app side add that client ID for future communication with WSO2 IS. Then also add the identity provider server url (WSO2 IS) in the sample app as well.

Once I start the app using npm start, I can access it via https://localhost:5000

Login to SPA with WSO2 IS

Visit your application running at https://localhost:5000

Then you will be redirected to WSO2 Identity server login portal to login with username and password.

https://localhost:9443/oauth2/authorize?response_type=code&client_id=BaxCCkO_bkTsAO1r2VjQ4gWnmXoa&scope=openid&redirect_uri=https://localhost:5000&code_challenge_method=S256&code_challenge=Gv-MPRArPZ7kNOq5-qLay2aFNGIsS7nvIOg-F4sGRJE

Once you correctly authenticates, an authorization code will be sent to the SPA .

https://localhost:5000/?code=0d06a473-587e-3856-8fa7-71aca5ac8911&session_state=f5eaa40a07876b09ae1ba375e13f0080dd995fc0ee4e8aef9468a456cf71ee8a.vXFJmZxFjzWr1CFQUwAiBQ

The SPA will send a token request to WSO2 IS with the received authorization code .(Since this is a SPA, the token call will not be back channel. it will be a front channel call. So you can observe the request in the network tracer)

https://localhost:9443/oauth2/token

client_id=BaxCCkO_bkTsAO1r2VjQ4gWnmXoa

code=0d06a473–587e-3856–8fa7–71aca5ac8911

grant_type=authorization_code

redirect_uri=https://localhost:5000

code_verifier=P2V64z3RsMLAoq_bcDLDxc6si-60SgxKlG-_5TsbSgE

Response:

{“access_token”:”a2083ad0–95e4–312d-aaf9-daa186f738c0",”refresh_token”:”00f631d0–8179–350c-b00a-6a19681eb0aa”,”scope”:”openid”,”id_token”:”eyJ4NXQiOiJNell4TW1Ga09HWXdNV0kwWldObU5EY3hOR1l3WW1NNFpUQTNNV0kyTkRBelpHUXpOR00wWkdSbE5qSmtPREZrWkRSaU9URmtNV0ZoTXpVMlpHVmxOZyIsImtpZCI6Ik16WXhNbUZrT0dZd01XSTBaV05tTkRjeE5HWXdZbU00WlRBM01XSTJOREF6WkdRek5HTTBaR1JsTmpKa09ERmtaRFJpT1RGa01XRmhNelUyWkdWbE5nX1JTMjU2IiwiYWxnIjoiUlMyNTYifQ.eyJhdF9oYXNoIjoiXzhyOERzcXBJVnNxY1hnZzZ4YjdZZyIsImF1ZCI6IkJheENDa09fYmtUc0FPMXIyVmpRNGdXbm1Yb2EiLCJjX2hhc2giOiJFenh5a1BJZmx3QVZxbkdRLTRXcjh3Iiwic3ViIjoidGhpc3VsYUBhYmMuY29tIiwibmJmIjoxNjEyMDc5NzkzLCJhenAiOiJCYXhDQ2tPX2JrVHNBTzFyMlZqUTRnV25tWG9hIiwiYW1yIjpbIkJhc2ljQXV0aGVudGljYXRvciJdLCJpc3MiOiJodHRwczpcL1wvbG9jYWxob3N0Ojk0NDNcL29hdXRoMlwvdG9rZW4iLCJleHAiOjE2MTIwODMzOTMsImlhdCI6MTYxMjA3OTc5Mywic2lkIjoiOTM0MTYzMzgtNjM1Ni00MDJiLWFiYWYtYWQzNGFhOTU0YmU5In0.Lriju-xqDz7hhcATssKn9Jp5dl5pfHEGtiavDRlXj7nDhsWKwasMvy6YtC5I5xH-lrDvnixYvb8x8SXMdHPdu3Zs7z9ah0ko93WMK_CQU-90ca1WJXAPhwqVogblCqnfhUfbhFNEd2Sha6FVHproD_yQ7ZpM_ClIDdP8FnLtjTk4jdWm_v1NyB9IJkB9CNdLk_PcqmdOU4CyeGAzE9kDHowIjMfyFk5x8sQJyTAvJnYuThrECN9gW35ptXsWeW29GYcJgi6NiszJt-KfZEdMwuzPoT0ihFlZrMnz2rUrKq51tFg2_T1uYrB5JEg3exaD_sgWfmMYW1MgQFiekT02wg”,”token_type”:”Bearer”,”expires_in”:3600}

Configuring SPA to invoke an API in WSO2 API manager

Create an API in WSO2 API Manager and secure it with WSO2 IS

I used APIM 3.2.0 version.

You can setup WSO2 IS as a key manager for WSO2 APIM following doc [1]

Configuring WSO2 IS as a key manger in APIM

Then you need to assign the WSO2 IS as an authorization server to protect an API as below.

Then call the api in the API Manager from your SPA

const pizzashack = () => {
const requestConfig = {
headers: {
Accept: “application/json”,
“Content-Type”: “application/scim+json”
},
method: “GET”,
url: “https://localhost:8244/pizzashack/1.0.0/menu”,
withCredentials: false
};

If you check the network tab of your browser, you can see the API Call for https://localhost:8244/pizzashack/1.0.0/menu with Authorization Bearer header with the previous token we received.

OAuth2 With Federated IDP

OAuth2/OIDC token handling with federated IDP

Here, I will briefly describe how WSO2 Identity Server handles Oauth2/OIDC tokens with federation for external IDPs.

The complete flow is depicted in the above diagram.

The application is registered with WSO2 IS with federation for an external IDP (Ex: Google)

  1. Application sends an authentication request to WSO2 IS and request a OAuth2/OIDC token as part of that request.
  2. WSO2 IS then sees that this application is configured to be federated to an external IDP. Therfore WSO2 IS sends an authentication request which requests for a token from the external IDP in the end.
  3. The External IDP trusts WSO2 IS and sends back a token response with the users details.
  4. Once the WSO2 IS receives the token from the federated IDP, WSO2 IS does the necessary transformation of the claims coming from the federated IDP, and create a new token from WSO2 IS and send it back to the application.
  5. Application uses that token to invoke an API protected by WSO2 IS.
  6. The API server validates the received token with WSO2 IS
  7. If the token is valid the API sends back a response to the application.

[1]https://apim.docs.wso2.com/en/latest/administer/key-managers/configure-wso2is-connector/#configure-wso2-is-as-a-key-manager

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Denuwanthi Hasanthika

Denuwanthi Hasanthika

Graduate of University of Moratuwa, Department of Computer Science and Engineering. Associate Technical Lead at WSO2 Identity Server team.