How to integrate Single Sign-on with Vue and Django frameworks
The following guide provides a demo example to utilise SSO OpenID-Connect with Vue for IndustryApps. Additional adjustments may be required depending on your current configurations.
This Vue guide requires the following dependency installations via npm or yarn:
"keycloak-js"
"vue-router"
Once the required dependencies have been installed, a router folder should be created or a router addition should be implemented to include authentication directories.
A model folder can be created in the client-side app project directory with keycloak configurations embedded with the required Industryapps Keycloak credentials which will then point to IndustryApps Keycloak resources.
Two files are to be added for this guide.
Config.js
exportconstCookieName="Keycloak_Auth";exportconstConfig= {// URI is designated for development environment"url":"https://auth.uat.industryapps.net/auth/realms/IndustryApps","realm":"IndustryApps","clientId":"my-client-id"}
The Functions.js file would contain functions which retrieve a user, create and utilise a Cookie for Keycloak which passes credentials.
Create a file named Home.vue in inside the Components directory, the file should contain Keycloak initialisation for a login, which then directs and decides on the appropriate flows for authentication. The home page would simply contain a button in this case. On click triggers an event for logging in through IndustryApps via Keycloak OpenID-Connect.