Skip to content

Commit d3f14bb

Browse files
kavindadimuthukavindadimuthu
committed
Add vue integration guide and creation wizard for applications
1 parent e025418 commit d3f14bb

5 files changed

Lines changed: 269 additions & 0 deletions

File tree

‎integrations/applications/vue-application/pom.xml‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<!--
3+
~ Copyright (c) 2025, WSO2 LLC. (http://www.wso2.com).
4+
~
5+
~ Licensed under the Apache License, Version 2.0 (the "License");
6+
~ you may not use this file except in compliance with the License.
7+
~ You may obtain a copy of the License at
8+
~
9+
~ http://www.apache.org/licenses/LICENSE-2.0
10+
~
11+
~ Unless required by applicable law or agreed to in writing, software
12+
~ distributed under the License is distributed on an "AS IS" BASIS,
13+
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14+
~ See the License for the specific language governing permissions and
15+
~ limitations under the License.
16+
-->
17+
18+
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
19+
20+
<parent>
21+
<groupId>org.wso2.carbon.identity.integration.ui.templates</groupId>
22+
<artifactId>integration-templates</artifactId>
23+
<version>1.0.35-SNAPSHOT</version>
24+
<relativePath>../../pom.xml</relativePath>
25+
</parent>
26+
27+
<name>vue-application</name>
28+
<artifactId>org.wso2.carbon.identity.integration.ui.templates.applications.vue-application</artifactId>
29+
<modelVersion>4.0.0</modelVersion>
30+
<packaging>pom</packaging>
31+
<url>http://wso2.org</url>
32+
33+
<build>
34+
<plugins>
35+
<plugin>
36+
<groupId>org.codehaus.mojo</groupId>
37+
<artifactId>build-helper-maven-plugin</artifactId>
38+
</plugin>
39+
<plugin>
40+
<groupId>org.apache.maven.plugins</groupId>
41+
<artifactId>maven-assembly-plugin</artifactId>
42+
<configuration>
43+
<skipAssembly>false</skipAssembly>
44+
</configuration>
45+
</plugin>
46+
<plugin>
47+
<groupId>org.apache.maven.plugins</groupId>
48+
<artifactId>maven-release-plugin</artifactId>
49+
</plugin>
50+
</plugins>
51+
</build>
52+
53+
</project>

‎integrations/applications/vue-application/resources/info.json‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"id": "vue-application",
3+
"version": "1.0.0",
4+
"name": "Vue",
5+
"description": "Client-rendered (CSR) Vue apps scaffolded with create-vue or Vite.",
6+
"image": "${CONSOLE_BASE_URL}/resources/applications/assets/images/technologies/vue-logo.svg",
7+
"displayOrder": 2,
8+
"category": "TECHNOLOGY",
9+
"tags": [
10+
"OIDC"
11+
],
12+
"type": "applications",
13+
"customAttributes": [
14+
{
15+
"key": "featureStatus",
16+
"value": "new"
17+
}
18+
]
19+
}

‎integrations/applications/vue-application/resources/metadata.json‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
{
2+
"create": {
3+
"form": {
4+
"fields": [
5+
{
6+
"id": "application-name",
7+
"aria-label": "Application Name",
8+
"name": "name",
9+
"label": "Name",
10+
"type": "text",
11+
"required": true,
12+
"placeholder": "My App",
13+
"dataComponentId": "vue-create-wizard-application-name",
14+
"handlers": [
15+
{
16+
"name": "uniqueApplicationName",
17+
"type": "initialize"
18+
},
19+
{
20+
"name": "applicationName",
21+
"type": "validation"
22+
}
23+
]
24+
},
25+
{
26+
"id": "callback-url",
27+
"aria-label": "Authorized Redirect URL",
28+
"name": "inboundProtocolConfiguration.oidc.callbackURLs.[0]",
29+
"label": "Authorized Redirect URL",
30+
"type": "text",
31+
"required": true,
32+
"placeholder": "https://myapp.io/login",
33+
"dataComponentId": "vue-create-wizard-callback-url"
34+
},
35+
{
36+
"id": "image-url",
37+
"aria-label": "Image URL",
38+
"name": "imageUrl",
39+
"label": "Image URL",
40+
"type": "text",
41+
"required": false,
42+
"dataComponentId": "vue-create-wizard-image-url",
43+
"hidden": true,
44+
"handlers": [
45+
{
46+
"name": "dependentProperty",
47+
"type": "submission",
48+
"props": {
49+
"placeholder": "clientOrigin"
50+
}
51+
},
52+
{
53+
"name": "dependentProperty",
54+
"type": "submission",
55+
"props": {
56+
"placeholder": "appBaseNameWithoutTenant"
57+
}
58+
}
59+
]
60+
}
61+
]
62+
},
63+
"guide": [ "##### Name\n***\n***\nA unique name to identify your application.\n***\nE.g., Vue\n***\n***\n***\n***\n##### Authorized Redirect URL\n***\n***\nThe URL to which the authorization code is sent to upon authentication and where the user is redirected to upon logout.\n***\nE.g., https://myapp.io/login" ]
64+
},
65+
"edit": {
66+
"tabs": [
67+
{
68+
"id": "quick-start",
69+
"displayName": "Guide",
70+
"contentType": "guide",
71+
"guide": "### Configure the `<AsgardeoProvider />`\n***\n***\n***\n> > To connect ${productName} with your Vue application, follow the [Vue SDK Quick Start](${docSiteURL}/quick-starts/vue/).\n> <!--rehype:type=info-->\n<!--rehype:type=wrapper&indent=6-->\n***\n***\n> Register the `AsgardeoPlugin` and wrap your app with `<AsgardeoProvider />` using the following configuration.\n<!--rehype:type=wrapper&indent=6-->\n***\n***\n> **`src/main.ts`**\n> ```ts\n> import { createApp } from 'vue'\n> import './style.css'\n> import App from './App.vue'\n> import { AsgardeoPlugin } from '@asgardeo/vue'\n>\n> const app = createApp(App)\n> app.use(AsgardeoPlugin)\n> app.mount('#app')\n> ```\n> ***\n> **`src/App.vue`**\n> ```vue\n> <script setup>\n> import { AsgardeoProvider } from '@asgardeo/vue'\n> </script>\n>\n> <template>\n> <AsgardeoProvider\n> client-id=\"${protocol.oidc.clientId}\"\n> base-url=\"${serverOrigin}/t/${tenantDomain}\"\n> :scopes=\"'${moderatedData.scopes.spaceSeperatedList}'.split(' ')\"\n> >\n> <!-- Your application content goes here -->\n> </AsgardeoProvider>\n> </template>\n> ```\n<!--rehype:type=wrapper&indent=6-->\n***\n***\n***\n***\n### Configurations\n***\n***\n***\n> For more details on configurations and server endpoints, go to the [Protocol](#tab=protocol)<!--rehype:external=false--> and [Info](#tab=info)<!--rehype:external=false--> tabs, respectively.\n> ***\n> ***\n> ***\n> **Client ID:**\n> ***\n> ```bash\n> ${protocol.oidc.clientId}\n> ```\n> ***\n> **Base URL:**\n> ***\n> ```bash\n> ${serverOrigin}/t/${tenantDomain}\n> ```\n> ***\n> **Redirect URL:**\n> ***\n> ```bash\n> ${protocol.oidc.callbackURLs[0]}\n> ```\n> ***\n> **Scope:**\n> ***\n> ```bash\n> ${moderatedData.scopes.spaceSeperatedList}\n> ```\n<!--rehype:type=wrapper&indent=6-->\n***\n***"
72+
},
73+
{
74+
"id": "general",
75+
"hiddenComponents": [
76+
"application-edit-general-details-form-image-url"
77+
]
78+
},
79+
{
80+
"id": "protocol",
81+
"displayName": "Protocol",
82+
"hiddenComponents": [
83+
"application-edit-access-settings-inbound-oauth2-oidc-form-pushed-authorization-requests",
84+
"application-edit-access-settings-inbound-oauth2-oidc-form-request-object",
85+
"application-edit-access-settings-inbound-oauth2-oidc-form-validate-token-binding",
86+
"application-edit-access-settings-inbound-oauth2-oidc-form-revoke-access-token-upon-user-logout",
87+
"application-edit-access-settings-inbound-oauth2-oidc-form-id-token-encryption",
88+
"application-edit-access-settings-inbound-oauth2-oidc-form-id-token-encryption-algorithm",
89+
"application-edit-access-settings-inbound-oauth2-oidc-form-id-token-encryption-method",
90+
"application-edit-access-settings-inbound-oauth2-oidc-form-id-token-response-signing-algorithm",
91+
"application-edit-access-settings-inbound-oauth2-oidc-form-logout-urls",
92+
"application-edit-access-settings-inbound-oauth2-oidc-form-client-authentication",
93+
"application-edit-access-settings-inbound-oauth2-oidc-form-validate-token-binding-and-revokation",
94+
"application-edit-access-settings-inbound-oauth2-oidc-form-certificate"
95+
]
96+
},
97+
{
98+
"id": "user-attributes"
99+
},
100+
{
101+
"id": "sign-in-method"
102+
},
103+
{
104+
"id": "api-authorization"
105+
},
106+
{
107+
"id": "application-roles"
108+
},
109+
{
110+
"id": "provisioning"
111+
},
112+
{
113+
"id": "advanced",
114+
"hiddenComponents": [
115+
"application-edit-advanced-settings-form-client-attestation",
116+
"application-edit-advanced-settings-form-trusted-apps",
117+
"application-edit-advanced-settings-form-platform-settings",
118+
"application-edit-advanced-settings-form-application-native-authentication"
119+
]
120+
},
121+
{
122+
"id": "shared-access"
123+
},
124+
{
125+
"id": "info"
126+
}
127+
],
128+
"defaultActiveTabId": "quick-start"
129+
}
130+
}

‎integrations/applications/vue-application/resources/template.json‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
{
2+
"payload": {
3+
"name": "Vue",
4+
"advancedConfigurations": {
5+
"discoverableByEndUsers": false,
6+
"skipLogoutConsent": true,
7+
"skipLoginConsent": true
8+
},
9+
"imageUrl": "${clientOrigin}/${appBaseNameWithoutTenant}/resources/applications/assets/images/technologies/vue-logo.svg",
10+
"authenticationSequence": {
11+
"type": "DEFAULT",
12+
"steps": [
13+
{
14+
"id": 1,
15+
"options": [
16+
{
17+
"idp": "LOCAL",
18+
"authenticator": "basic"
19+
}
20+
]
21+
}
22+
]
23+
},
24+
"claimConfiguration":{
25+
"dialect":"LOCAL",
26+
"requestedClaims": [
27+
{
28+
"claim": {
29+
"uri":"http://wso2.org/claims/username"
30+
}
31+
}
32+
]
33+
},
34+
"inboundProtocolConfiguration": {
35+
"oidc": {
36+
"accessToken": {
37+
"applicationAccessTokenExpiryInSeconds": 3600,
38+
"bindingType": "sso-session",
39+
"revokeTokensWhenIDPSessionTerminated": true,
40+
"type": "Default",
41+
"userAccessTokenExpiryInSeconds": 3600,
42+
"validateTokenBinding": false
43+
},
44+
"grantTypes": [
45+
"authorization_code",
46+
"refresh_token"
47+
],
48+
"allowedOrigins": [],
49+
"callbackURLs": [],
50+
"pkce": {
51+
"mandatory": true,
52+
"supportPlainTransformAlgorithm": false
53+
},
54+
"publicClient": true,
55+
"refreshToken": {
56+
"expiryInSeconds": 86400,
57+
"renewRefreshToken": true
58+
}
59+
}
60+
},
61+
"associatedRoles": {
62+
"allowedAudience": "APPLICATION",
63+
"roles": []
64+
}
65+
}
66+
}

‎integrations/pom.xml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@
7171
<module>applications/nextjs-application</module>
7272
<module>applications/angular-application</module>
7373
<module>applications/expressjs-application</module>
74+
<module>applications/vue-application</module>
7475
<module>applications/digital-wallet-application</module>
7576
</modules>
7677

0 commit comments

Comments
 (0)