VS-Code Plugin for WSO2-Identity Server(IS)

VS Code allows developers to install useful packages that’ll make us more productive. In that series, WSO2 IS VS-Code plugin comes very handy in enhancing the experience of the developer. This blog covers

1. Overview of the Developer Story
2. Overview of VS-Code Plugin
3. VS-Code Plugin Capabilities
4. Installing and trying out the use cases

Only a few short weeks ago we released the very first prerelease for the WSO2 IS plugin for Visual Studio Code. Before you go and try let me explain how this plugin fits into the developer story.

Developer Journey — IAM perspective

Let’s think the developer has some business requirement to create Web\Mobile\Desktop\Single-Page App.

1. First, he will use WSO2 IS to Create a new project for the Application he needs to develop.
2. Then he will develop some main business functionality done to a certain level
3. Now obviously he needs to add the login capability to the app in order to secure the app. But the developer may have little to no- interest on underlying protocol details. Also, he will be willing to get this done ASAP and get back on core logic.
4. He may have some requirements to Improve (validate) login\logout flow for an example adding Strong, Adaptive, Social authentication etc.
5. In the end, the developer will finish the development and handover to QA

Developer Journey — IAM Tools

WSO2 IS is providing multiple tools such as Command Line Interface, VS-Code plugin, SDKs, GIT integration to enhance this developer stories. Let’s see how IAM tools come in to picture.

1. To create a new project with security added they can use
   IAM Command Line Tool and VS-Code plugin
2. To add login capability and security
   Developers can use SDKs
3. To Improve (validate) login\logout flow
   VS-Code plugin support to update adaptive script (also other parts of SP)
   VS-Code plugin support to debug authentication flows

For the scope of the blog, I will cover the vs-code plugin.

Installing the plugin

Important

In order to debug the IS using VS code debugger Extension, You need to do initial setup of the identity-tools -debugger. Follow this Repository to get to know about it. After the setup try debugging the authentication flows.

• Download the extension
• Install it as by selecting install from VSIX
• Start with new window File -> new -> Add a workspace
• Authenticate the extension which will fetch the Service Providers
• Debug the authentication flow.

VS-Code plugin Capabilities

Using this plugin developer could be able to connect to Identity Server -> fetch Service Providers -> visualize into the diagram.
It has the functionality to Generate adaptive Scripts for the Service Providers where they can write and update the adaptive scripts through language support.
Another amazing capability is, developer can debug the authentication flow. Now the extension supports
1. debugging the SAML authentication flow and visualize it
2. debugging OIDC authentication flow and visualize it

Getting started

• When you click the wso2 button in the VS-Code IDE in the side tab you can start the extension.
• Then you will get a web-view for authentication of the user.
  You can do it by command as well (Ctrl+Shift+P) -> Login with WSO2 IS
• Enter your credential and login to the system.
• After the success message goes back to the VS-Code then you will get a list of service providers and the list of script libraries in the tenant domain you entered.

Debugging SAML Flow
For the testing purposes of the SAML authentication flow, Try downloading the saml2-web-app-pickup-dispatch webapp.

• Follow Authentication steps to authenticate the extension
• you will get a list of service providers and the list of script libraries in the tenant domain you entered
• Then click the service provider name (saml_dispatch)
• You will get a graphical view of the service provider and the script.
• Start debugging by pressing F5
• Add a breakpoint in the script on the right side
• Open the PICKUP DISPATCH application and press login http://localhost:8080/saml2-web-app-pickup-dispatch.com/
• In the Vscode extension you will see the SAML request and the Http Request details. Click the Request button blinking. You can click and view the SAML Request
• Then you will get the login window in your application. Give the credentials and press login
• When you press the login button you will get the SAML response in the green button blinking when you press it you will get the details containing the SAML response tab view

Debugging OIDC Flow
For the testing purposes of the OIDC authentication flow, Try downloading the pickup-dispatch webapp.

• Follow Authentication steps to authenticate the extension
  you will get a list of service providers and the list of script libraries in the tenant domain you entered
• Then click the service provider name (pickup-dispatch)
• You will get a graphical view of the service provider and the script.
• Start debugging by pressing F5.
• Add a breakpoint in the script on the right side.
• Open the PICKUP DISPATCH application and press login http://localhost:8080/pickup-dispatch/
• In the VS-Code extension you will see the OIDC authorization request
• When you approve you will get the OIDC authorization response in the green button blinking when you press it you will get the details containing the OIDC authorization response tab view. Simultaneously we have added and OIDC authorization request in the same window for easy navigation.
• Finally the token endpoint will be hit and Token Request and Token Response could be seen

If your reading this , Bravo! You have successfully finished introduction to VS-Code Plugin for WSO2-Identity Server(IS)! .

Stay up to date

You’ll definitely want to stay up to date with our progress of the plugin and release bug fixes. You can reach out to us on the GitHub so you’ll be able to file issues using GitHub. Be sure to follow this blog so that you can track what’s going on.

Thanks for reading — I hope you found it useful. Happy coding and stay cool!