You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
549 lines
17 KiB
549 lines
17 KiB
<script setup lang="ts">
|
|
import type { OpenIdConfiguration } from '@abp/core';
|
|
import type { FormInstance } from 'ant-design-vue';
|
|
import type { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
|
|
import type { DefaultOptionType } from 'ant-design-vue/es/select';
|
|
import type { TransferItem } from 'ant-design-vue/es/transfer';
|
|
|
|
import type { Component } from 'vue';
|
|
|
|
import type { OpenIddictApplicationDto } from '../../types/applications';
|
|
import type { DisplayNameInfo } from '../display-names/types';
|
|
import type { PropertyInfo } from '../properties/types';
|
|
|
|
import {
|
|
computed,
|
|
defineAsyncComponent,
|
|
defineEmits,
|
|
defineOptions,
|
|
reactive,
|
|
ref,
|
|
shallowRef,
|
|
toValue,
|
|
} from 'vue';
|
|
|
|
import { useVbenModal } from '@vben/common-ui';
|
|
import { $t } from '@vben/locales';
|
|
|
|
import { DownOutlined } from '@ant-design/icons-vue';
|
|
import {
|
|
Checkbox,
|
|
Dropdown,
|
|
Form,
|
|
Input,
|
|
InputNumber,
|
|
InputPassword,
|
|
Menu,
|
|
message,
|
|
Select,
|
|
Tabs,
|
|
Transfer,
|
|
} from 'ant-design-vue';
|
|
|
|
import { useApplicationsApi } from '../../api/useApplicationsApi';
|
|
import { useOpenIdApi } from '../../api/useOpenIdApi';
|
|
import DisplayNameTable from '../display-names/DisplayNameTable.vue';
|
|
import PropertyTable from '../properties/PropertyTable.vue';
|
|
|
|
defineOptions({
|
|
name: 'ApplicationModal',
|
|
});
|
|
const emits = defineEmits<{
|
|
(event: 'change', data: OpenIddictApplicationDto): void;
|
|
}>();
|
|
|
|
const FormItem = Form.Item;
|
|
const MenuItem = Menu.Item;
|
|
const TabPane = Tabs.TabPane;
|
|
|
|
type TabKeys =
|
|
| 'authorize'
|
|
| 'basic'
|
|
| 'dispalyName'
|
|
| 'endpoint'
|
|
| 'props'
|
|
| 'scope';
|
|
|
|
const defaultModel: OpenIddictApplicationDto = {
|
|
applicationType: 'web',
|
|
clientId: '',
|
|
clientType: 'public',
|
|
consentType: 'explicit',
|
|
creationTime: new Date(),
|
|
extraProperties: {},
|
|
id: '',
|
|
requirements: {
|
|
features: {
|
|
requirePkce: false,
|
|
},
|
|
},
|
|
settings: {
|
|
tokenLifetime: {},
|
|
},
|
|
};
|
|
|
|
const form = ref<FormInstance>();
|
|
const formModel = ref<OpenIddictApplicationDto>({ ...defaultModel });
|
|
const openIdConfiguration = ref<OpenIdConfiguration>();
|
|
const activeTab = ref<TabKeys>('basic');
|
|
|
|
const uriComponentState = reactive<{
|
|
component: string;
|
|
title: string;
|
|
uris?: string[];
|
|
}>({
|
|
component: 'RedirectUris',
|
|
title: $t('AbpOpenIddict.DisplayName:RedirectUris'),
|
|
uris: [],
|
|
});
|
|
const uriComponentMap = shallowRef<{
|
|
[key: string]: Component;
|
|
}>({
|
|
PostLogoutRedirectUris: defineAsyncComponent(
|
|
() => import('../uris/UriTable.vue'),
|
|
),
|
|
RedirectUris: defineAsyncComponent(() => import('../uris/UriTable.vue')),
|
|
});
|
|
const clientTypes = reactive<DefaultOptionType[]>([
|
|
{ label: 'public', value: 'public' },
|
|
{ label: 'confidential', value: 'confidential' },
|
|
]);
|
|
const applicationTypes = reactive<DefaultOptionType[]>([
|
|
{ label: 'Web', value: 'web' },
|
|
{ label: 'Native', value: 'native' },
|
|
]);
|
|
const consentTypes = reactive<DefaultOptionType[]>([
|
|
{ label: 'explicit', value: 'explicit' },
|
|
{ label: 'external', value: 'external' },
|
|
{ label: 'implicit', value: 'implicit' },
|
|
{ label: 'systematic', value: 'systematic' },
|
|
]);
|
|
const endpoints = reactive<DefaultOptionType[]>([
|
|
{ label: 'authorization', value: 'authorization' },
|
|
{ label: 'token', value: 'token' },
|
|
{ label: 'logout', value: 'logout' },
|
|
{ label: 'device', value: 'device' },
|
|
{ label: 'revocation', value: 'revocation' },
|
|
{ label: 'introspection', value: 'introspection' },
|
|
{ label: 'pushed_authorization', value: 'pushed_authorization' },
|
|
]);
|
|
const getGrantTypes = computed(() => {
|
|
const types = openIdConfiguration.value?.grant_types_supported ?? [];
|
|
return types.map((type) => {
|
|
return {
|
|
label: type,
|
|
value: type,
|
|
};
|
|
});
|
|
});
|
|
const getResponseTypes = computed(() => {
|
|
const types = openIdConfiguration.value?.response_types_supported ?? [];
|
|
return types.map((type) => {
|
|
return {
|
|
label: type,
|
|
value: type,
|
|
};
|
|
});
|
|
});
|
|
const getSupportScopes = computed((): TransferItem[] => {
|
|
const types = openIdConfiguration.value?.scopes_supported ?? [];
|
|
return types.map((type) => {
|
|
return {
|
|
key: type,
|
|
title: type,
|
|
};
|
|
});
|
|
});
|
|
|
|
const { discoveryApi } = useOpenIdApi();
|
|
const { cancel, createApi, getApi, updateApi } = useApplicationsApi();
|
|
const [Modal, modalApi] = useVbenModal({
|
|
class: 'w-1/2',
|
|
draggable: true,
|
|
fullscreenButton: false,
|
|
onCancel() {
|
|
modalApi.close();
|
|
},
|
|
onClosed() {
|
|
cancel('ApplicationModal has closed!');
|
|
},
|
|
onConfirm: async () => {
|
|
await form.value?.validate();
|
|
const api = formModel.value.id
|
|
? updateApi(formModel.value.id, toValue(formModel))
|
|
: createApi(toValue(formModel));
|
|
modalApi.setState({ submitting: true });
|
|
api
|
|
.then((res) => {
|
|
message.success($t('AbpUi.SavedSuccessfully'));
|
|
emits('change', res);
|
|
modalApi.close();
|
|
})
|
|
.finally(() => {
|
|
modalApi.setState({ submitting: false });
|
|
});
|
|
},
|
|
onOpenChange: async (isOpen: boolean) => {
|
|
if (isOpen) {
|
|
activeTab.value = 'basic';
|
|
formModel.value = { ...defaultModel };
|
|
uriComponentState.uris = [];
|
|
uriComponentState.component = 'RedirectUris';
|
|
modalApi.setState({
|
|
title: $t('AbpOpenIddict.Applications:AddNew'),
|
|
});
|
|
try {
|
|
modalApi.setState({ loading: true });
|
|
await onDiscovery();
|
|
const claimTypeDto = modalApi.getData<OpenIddictApplicationDto>();
|
|
if (claimTypeDto?.id) {
|
|
const dto = await getApi(claimTypeDto.id);
|
|
formModel.value = dto;
|
|
uriComponentState.uris = dto.redirectUris;
|
|
modalApi.setState({
|
|
title: `${$t('AbpOpenIddict.Applications')} - ${dto.clientId}`,
|
|
});
|
|
}
|
|
} finally {
|
|
modalApi.setState({ loading: false });
|
|
}
|
|
}
|
|
},
|
|
title: 'ClaimType',
|
|
});
|
|
async function onDiscovery() {
|
|
openIdConfiguration.value = await discoveryApi();
|
|
}
|
|
function onDisplayNameChange(displayName: DisplayNameInfo) {
|
|
formModel.value.displayNames ??= {};
|
|
formModel.value.displayNames[displayName.culture] = displayName.displayName;
|
|
}
|
|
function onDisplayNameDelete(displayName: DisplayNameInfo) {
|
|
formModel.value.displayNames ??= {};
|
|
delete formModel.value.displayNames[displayName.culture];
|
|
}
|
|
function onPropChange(prop: PropertyInfo) {
|
|
formModel.value.properties ??= {};
|
|
formModel.value.properties[prop.key] = prop.value;
|
|
}
|
|
function onPropDelete(prop: PropertyInfo) {
|
|
formModel.value.properties ??= {};
|
|
delete formModel.value.properties[prop.key];
|
|
}
|
|
function onSwitchUri(info: MenuInfo) {
|
|
activeTab.value = 'endpoint';
|
|
const eventKey = String(info.key);
|
|
switch (eventKey) {
|
|
case 'PostLogoutRedirectUris': {
|
|
uriComponentState.uris = formModel.value.postLogoutRedirectUris;
|
|
uriComponentState.title = $t(
|
|
'AbpOpenIddict.DisplayName:PostLogoutRedirectUris',
|
|
);
|
|
break;
|
|
}
|
|
case 'RedirectUris': {
|
|
uriComponentState.uris = formModel.value.redirectUris;
|
|
uriComponentState.title = $t('AbpOpenIddict.DisplayName:RedirectUris');
|
|
break;
|
|
}
|
|
}
|
|
uriComponentState.component = eventKey;
|
|
}
|
|
function onUriChange(uri: string) {
|
|
switch (uriComponentState.component) {
|
|
case 'PostLogoutRedirectUris': {
|
|
formModel.value.postLogoutRedirectUris ??= [];
|
|
formModel.value.postLogoutRedirectUris.push(uri);
|
|
break;
|
|
}
|
|
case 'RedirectUris': {
|
|
formModel.value.redirectUris ??= [];
|
|
formModel.value.redirectUris.push(uri);
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
function onUriDelete(uri: string) {
|
|
switch (uriComponentState.component) {
|
|
case 'PostLogoutRedirectUris': {
|
|
formModel.value.postLogoutRedirectUris ??= [];
|
|
formModel.value.postLogoutRedirectUris =
|
|
formModel.value.postLogoutRedirectUris.filter((item) => item !== uri);
|
|
uriComponentState.uris = formModel.value.postLogoutRedirectUris;
|
|
break;
|
|
}
|
|
case 'RedirectUris': {
|
|
formModel.value.redirectUris ??= [];
|
|
formModel.value.redirectUris = formModel.value.redirectUris.filter(
|
|
(item) => item !== uri,
|
|
);
|
|
uriComponentState.uris = formModel.value.redirectUris;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Modal>
|
|
<Form
|
|
ref="form"
|
|
:label-col="{ span: 6 }"
|
|
:model="formModel"
|
|
:wrapper-col="{ span: 18 }"
|
|
>
|
|
<Tabs v-model:active-key="activeTab">
|
|
<!-- 基本信息 -->
|
|
<TabPane key="basic" :tab="$t('AbpOpenIddict.BasicInfo')">
|
|
<FormItem
|
|
:label="$t('AbpOpenIddict.DisplayName:ApplicationType')"
|
|
name="applicationType"
|
|
required
|
|
>
|
|
<Select
|
|
v-model:value="formModel.applicationType"
|
|
:options="applicationTypes"
|
|
/>
|
|
</FormItem>
|
|
<FormItem
|
|
:label="$t('AbpOpenIddict.DisplayName:ClientId')"
|
|
name="clientId"
|
|
required
|
|
>
|
|
<Input v-model:value="formModel.clientId" autocomplete="off" />
|
|
</FormItem>
|
|
<FormItem
|
|
:label="$t('AbpOpenIddict.DisplayName:ClientType')"
|
|
name="clientType"
|
|
>
|
|
<Select
|
|
v-model:value="formModel.clientType"
|
|
:options="clientTypes"
|
|
/>
|
|
</FormItem>
|
|
<FormItem
|
|
v-if="!formModel.id && formModel.clientType === 'confidential'"
|
|
:label="$t('AbpOpenIddict.DisplayName:ClientSecret')"
|
|
name="clientSecret"
|
|
>
|
|
<InputPassword
|
|
v-model:value="formModel.clientSecret"
|
|
autocomplete="off"
|
|
/>
|
|
</FormItem>
|
|
<FormItem
|
|
:label="$t('AbpOpenIddict.DisplayName:ClientUri')"
|
|
name="clientUri"
|
|
>
|
|
<Input v-model:value="formModel.clientUri" />
|
|
</FormItem>
|
|
<FormItem
|
|
:label="$t('AbpOpenIddict.DisplayName:LogoUri')"
|
|
name="logoUri"
|
|
>
|
|
<Input v-model:value="formModel.logoUri" autocomplete="off" />
|
|
</FormItem>
|
|
<FormItem
|
|
:label="$t('AbpOpenIddict.DisplayName:ConsentType')"
|
|
:label-col="{ span: 4 }"
|
|
:wrapper-col="{ span: 20 }"
|
|
name="consentType"
|
|
>
|
|
<Select
|
|
v-model:value="formModel.consentType"
|
|
:options="consentTypes"
|
|
default-value="explicit"
|
|
/>
|
|
</FormItem>
|
|
</TabPane>
|
|
<!-- 显示名称 -->
|
|
<TabPane key="dispalyName" :tab="$t('AbpOpenIddict.DisplayNames')">
|
|
<FormItem
|
|
:label="$t('AbpOpenIddict.DisplayName:DefaultDisplayName')"
|
|
name="displayName"
|
|
>
|
|
<Input v-model:value="formModel.displayName" autocomplete="off" />
|
|
</FormItem>
|
|
<DisplayNameTable
|
|
:data="formModel.displayNames"
|
|
@change="onDisplayNameChange"
|
|
@delete="onDisplayNameDelete"
|
|
/>
|
|
</TabPane>
|
|
<!-- 端点 -->
|
|
<TabPane key="endpoint">
|
|
<template #tab>
|
|
<Dropdown>
|
|
<span>
|
|
{{ $t('AbpOpenIddict.Endpoints') }}
|
|
<DownOutlined />
|
|
</span>
|
|
<template #overlay>
|
|
<Menu @click="onSwitchUri">
|
|
<MenuItem key="RedirectUris">
|
|
{{ $t('AbpOpenIddict.DisplayName:RedirectUris') }}
|
|
</MenuItem>
|
|
<MenuItem key="PostLogoutRedirectUris">
|
|
{{ $t('AbpOpenIddict.DisplayName:PostLogoutRedirectUris') }}
|
|
</MenuItem>
|
|
</Menu>
|
|
</template>
|
|
</Dropdown>
|
|
</template>
|
|
<component
|
|
:is="uriComponentMap[uriComponentState.component]"
|
|
:title="uriComponentState.title"
|
|
:uris="uriComponentState.uris"
|
|
@change="onUriChange"
|
|
@delete="onUriDelete"
|
|
/>
|
|
</TabPane>
|
|
<!-- 令牌 -->
|
|
<TabPane key="tokens" :tab="$t('AbpOpenIddict.Tokens')">
|
|
<FormItem
|
|
:label="$t('AbpOpenIddict.DisplayName:AccessTokenLifetime')"
|
|
:name="['settings', 'tokenLifetime', 'accessToken']"
|
|
:extra="$t('AbpOpenIddict.Description:AccessTokenLifetime')"
|
|
>
|
|
<InputNumber
|
|
class="w-full"
|
|
min="300"
|
|
v-model:value="formModel.settings.tokenLifetime.accessToken"
|
|
/>
|
|
</FormItem>
|
|
<FormItem
|
|
:label="$t('AbpOpenIddict.DisplayName:AuthorizationCodeLifetime')"
|
|
:name="['settings', 'tokenLifetime', 'authorizationCode']"
|
|
:extra="$t('AbpOpenIddict.Description:AuthorizationCodeLifetime')"
|
|
>
|
|
<InputNumber
|
|
class="w-full"
|
|
min="300"
|
|
v-model:value="formModel.settings.tokenLifetime.authorizationCode"
|
|
/>
|
|
</FormItem>
|
|
<FormItem
|
|
:label="$t('AbpOpenIddict.DisplayName:IdentityTokenLifetime')"
|
|
:name="['settings', 'tokenLifetime', 'identityToken']"
|
|
:extra="$t('AbpOpenIddict.Description:IdentityTokenLifetime')"
|
|
>
|
|
<InputNumber
|
|
class="w-full"
|
|
min="300"
|
|
v-model:value="formModel.settings.tokenLifetime.identityToken"
|
|
/>
|
|
</FormItem>
|
|
<FormItem
|
|
:label="$t('AbpOpenIddict.DisplayName:RefreshTokenLifetime')"
|
|
:name="['settings', 'tokenLifetime', 'refreshToken']"
|
|
:extra="$t('AbpOpenIddict.Description:RefreshTokenLifetime')"
|
|
>
|
|
<InputNumber
|
|
class="w-full"
|
|
min="300"
|
|
v-model:value="formModel.settings.tokenLifetime.refreshToken"
|
|
/>
|
|
</FormItem>
|
|
<FormItem
|
|
:label="$t('AbpOpenIddict.DisplayName:DeviceCodeLifetime')"
|
|
:name="['settings', 'tokenLifetime', 'deviceCode']"
|
|
:extra="$t('AbpOpenIddict.Description:DeviceCodeLifetime')"
|
|
>
|
|
<InputNumber
|
|
class="w-full"
|
|
min="300"
|
|
v-model:value="formModel.settings.tokenLifetime.deviceCode"
|
|
/>
|
|
</FormItem>
|
|
<FormItem
|
|
:label="$t('AbpOpenIddict.DisplayName:UserCodeLifetime')"
|
|
:name="['settings', 'tokenLifetime', 'userCode']"
|
|
:extra="$t('AbpOpenIddict.Description:UserCodeLifetime')"
|
|
>
|
|
<InputNumber
|
|
class="w-full"
|
|
min="300"
|
|
v-model:value="formModel.settings.tokenLifetime.userCode"
|
|
/>
|
|
</FormItem>
|
|
</TabPane>
|
|
<!-- 范围 -->
|
|
<TabPane key="scope" :tab="$t('AbpOpenIddict.Scopes')">
|
|
<Transfer
|
|
v-model:target-keys="formModel.scopes"
|
|
:data-source="getSupportScopes"
|
|
:list-style="{
|
|
width: '47%',
|
|
height: '338px',
|
|
}"
|
|
:render="(item) => item.title"
|
|
:titles="[
|
|
$t('AbpOpenIddict.Assigned'),
|
|
$t('AbpOpenIddict.Available'),
|
|
]"
|
|
class="tree-transfer"
|
|
/>
|
|
</TabPane>
|
|
<!-- 授权 -->
|
|
<TabPane key="authorize" :tab="$t('AbpOpenIddict.Authorizations')">
|
|
<FormItem
|
|
:label="$t('AbpOpenIddict.Requirements:PKCE')"
|
|
:name="['requirements', 'features', 'requirePkce']"
|
|
>
|
|
<Checkbox
|
|
v-model:checked="formModel.requirements.features.requirePkce"
|
|
>
|
|
{{ $t('AbpOpenIddict.Requirements:PKCE') }}
|
|
</Checkbox>
|
|
</FormItem>
|
|
<FormItem
|
|
:label="$t('AbpOpenIddict.DisplayName:Endpoints')"
|
|
:label-col="{ span: 4 }"
|
|
:wrapper-col="{ span: 20 }"
|
|
name="endpoints"
|
|
>
|
|
<Select
|
|
v-model:value="formModel.endpoints"
|
|
:options="endpoints"
|
|
mode="tags"
|
|
/>
|
|
</FormItem>
|
|
<FormItem
|
|
:label="$t('AbpOpenIddict.DisplayName:GrantTypes')"
|
|
:label-col="{ span: 4 }"
|
|
:wrapper-col="{ span: 20 }"
|
|
name="grantTypes"
|
|
>
|
|
<Select
|
|
v-model:value="formModel.grantTypes"
|
|
:options="getGrantTypes"
|
|
mode="tags"
|
|
/>
|
|
</FormItem>
|
|
<FormItem
|
|
:label="$t('AbpOpenIddict.DisplayName:ResponseTypes')"
|
|
:label-col="{ span: 4 }"
|
|
:wrapper-col="{ span: 20 }"
|
|
name="responseTypes"
|
|
>
|
|
<Select
|
|
v-model:value="formModel.responseTypes"
|
|
:options="getResponseTypes"
|
|
mode="tags"
|
|
/>
|
|
</FormItem>
|
|
</TabPane>
|
|
<!-- 属性 -->
|
|
<TabPane key="props" :tab="$t('AbpOpenIddict.Propertites')">
|
|
<PropertyTable
|
|
:data="formModel.properties"
|
|
@change="onPropChange"
|
|
@delete="onPropDelete"
|
|
/>
|
|
</TabPane>
|
|
</Tabs>
|
|
</Form>
|
|
</Modal>
|
|
</template>
|
|
|
|
<style scoped></style>
|
|
|