0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-03-31 22:51:25 -05:00

refactor(console): show auto generated acs url for SAML connector (#5208)

This commit is contained in:
Darcy Ye 2024-01-09 15:53:30 +08:00 committed by GitHub
parent 0b08da2b46
commit cbc5dc5792
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
33 changed files with 105 additions and 8 deletions

View file

@ -1,6 +1,7 @@
import type { ConnectorConfigFormItem } from '@logto/connector-kit';
import { ConnectorType } from '@logto/connector-kit';
import { DomainStatus } from '@logto/schemas';
import { appendPath, conditional } from '@silverhand/essentials';
import { useContext } from 'react';
import { Controller, useFormContext } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
@ -21,10 +22,17 @@ type Props = {
formItems?: ConnectorConfigFormItem[];
className?: string;
connectorId: string;
connectorFactoryId?: string;
connectorType?: ConnectorType;
};
function ConfigForm({ formItems, className, connectorId, connectorType }: Props) {
function ConfigForm({
formItems,
className,
connectorId,
connectorFactoryId,
connectorType,
}: Props) {
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
const {
control,
@ -33,23 +41,33 @@ function ConfigForm({ formItems, className, connectorId, connectorType }: Props)
const { tenantEndpoint } = useContext(AppDataContext);
const { data: customDomain, applyDomain: applyCustomDomain } = useCustomDomain();
const callbackUri = new URL(`/callback/${connectorId}`, tenantEndpoint).toString();
const acsUrl = conditional(
tenantEndpoint && appendPath(tenantEndpoint, `/api/authn/saml/${connectorId}`).href
);
const isSamlConnector = connectorFactoryId === 'saml';
// This is an auto-generated URL serve as the connector's internal property and should be configured on the identity provider side.
const displayUrl = isSamlConnector ? acsUrl : callbackUri;
return (
<div className={className}>
{connectorType === ConnectorType.Social && (
{connectorType === ConnectorType.Social && displayUrl && (
<FormField
title="connectors.guide.callback_uri"
tip={t('connectors.guide.callback_uri_description')}
title={isSamlConnector ? 'connectors.guide.acs_url' : 'connectors.guide.callback_uri'}
tip={conditional(!isSamlConnector && t('connectors.guide.callback_uri_description'))}
>
<CopyToClipboard
className={styles.copyToClipboard}
variant="border"
value={applyCustomDomain(callbackUri)}
value={applyCustomDomain(displayUrl)}
/>
{customDomain?.status === DomainStatus.Active && tenantEndpoint && (
<div className={styles.description}>
<DynamicT
forKey="domain.custom_social_callback_url_note"
forKey={
isSamlConnector
? 'domain.custom_acs_url_note'
: 'domain.custom_social_callback_url_note'
}
interpolation={{
custom: customDomain.domain,
default: new URL(tenantEndpoint).host,

View file

@ -157,7 +157,12 @@ function ConnectorContent({ isDeleted, connectorData, onConnectorUpdated }: Prop
}
)}
>
<ConfigForm formItems={formItems} connectorId={id} connectorType={connectorType} />
<ConfigForm
formItems={formItems}
connectorFactoryId={connectorId}
connectorId={id}
connectorType={connectorType}
/>
</FormCard>
)}
{!isSocialConnector && (

View file

@ -48,7 +48,7 @@ function Guide({ connector, onClose }: Props) {
const callbackConnectorId = useRef(generateStandardId());
const [conflictConnectorName, setConflictConnectorName] = useState<Record<string, string>>();
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
const { type: connectorType, formItems, isStandard } = connector ?? {};
const { type: connectorType, formItems, isStandard, id: connectorFactoryId } = connector ?? {};
const { language } = i18next;
const isSocialConnector =
@ -207,6 +207,7 @@ function Guide({ connector, onClose }: Props) {
</div>
<ConfigForm
connectorId={callbackConnectorId.current}
connectorFactoryId={connectorFactoryId}
connectorType={connectorType}
formItems={formItems}
/>

View file

@ -78,6 +78,8 @@ const connectors = {
callback_uri: 'Callback-URI',
callback_uri_description:
'Auch als Redirect-URI bezeichnet, ist die URI in Logto, zu der Benutzer nach der Social-Autorisierung zurückgesendet werden. Kopieren und fügen Sie sie in die Konfigurationsseite des Social Providers ein.',
/** UNTRANSLATED */
acs_url: 'Assertion consumer service URL',
},
platform: {
universal: 'Universal',

View file

@ -51,6 +51,9 @@ const domain = {
'Sie können den Domainnamen dieser Endpunkte anpassen, wie Sie möchten. Wählen Sie entweder "{{custom}}" oder "{{default}}".',
custom_social_callback_url_note:
'Sie können den Domainnamen dieser URI anpassen, um mit dem Endpunkt Ihrer Anwendung übereinzustimmen. Wählen Sie entweder "{{custom}}" oder "{{default}}".',
/** UNTRANSLATED */
custom_acs_url_note:
'You can customize the domain name of this URI to match your identity provider assertion consumer service URL. Choose either "{{custom}}" or "{{default}}".',
};
export default Object.freeze(domain);

View file

@ -77,6 +77,7 @@ const connectors = {
callback_uri: 'Callback URI',
callback_uri_description:
"Also called redirect URI, is the URI in Logto where users will be sent back after social authorization, copy and paste to the social provider's config page.",
acs_url: 'Assertion consumer service URL',
},
platform: {
universal: 'Universal',

View file

@ -51,6 +51,8 @@ const domain = {
'You can customize the domain name of these endpoints as your required. Choose either "{{custom}}" or "{{default}}".',
custom_social_callback_url_note:
'You can customize the domain name of this URI to match your applications endpoint. Choose either "{{custom}}" or "{{default}}".',
custom_acs_url_note:
'You can customize the domain name of this URI to match your identity provider assertion consumer service URL. Choose either "{{custom}}" or "{{default}}".',
};
export default Object.freeze(domain);

View file

@ -78,6 +78,8 @@ const connectors = {
callback_uri: 'URI de devolución de llamada',
callback_uri_description:
'También llamado URI de redireccionamiento, es la URI en Logto a la que se enviarán los usuarios después de la autorización social, copie y pegue en la página de configuración del proveedor social.',
/** UNTRANSLATED */
acs_url: 'Assertion consumer service URL',
},
platform: {
universal: 'Universal',

View file

@ -51,6 +51,9 @@ const domain = {
'Puede personalizar el nombre de dominio de estos puntos finales según sea necesario. Elija "{{custom}}" o "{{default}}".',
custom_social_callback_url_note:
'Puede personalizar el nombre de dominio de esta URI para que coincida con el punto final de su aplicación. Elija "{{custom}}" o "{{default}}".',
/** UNTRANSLATED */
custom_acs_url_note:
'You can customize the domain name of this URI to match your identity provider assertion consumer service URL. Choose either "{{custom}}" or "{{default}}".',
};
export default Object.freeze(domain);

View file

@ -79,6 +79,8 @@ const connectors = {
callback_uri: 'URI de rappel',
callback_uri_description:
"Également appelée URI de redirection, c'est l'URI dans Logto où les utilisateurs seront renvoyés après l'autorisation sociale, copiez et collez sur la page de configuration du fournisseur social.",
/** UNTRANSLATED */
acs_url: 'Assertion consumer service URL',
},
platform: {
universal: 'Universel',

View file

@ -51,6 +51,9 @@ const domain = {
'Vous pouvez personnaliser le nom de domaine de ces points de terminaison selon vos besoins. Choisissez soit "{{custom}}" ou "{{default}}".',
custom_social_callback_url_note:
'Vous pouvez personnaliser le nom de domaine de cette URI pour correspondre au point de terminaison de votre application. Choisissez soit "{{custom}}" ou "{{default}}".',
/** UNTRANSLATED */
custom_acs_url_note:
'You can customize the domain name of this URI to match your identity provider assertion consumer service URL. Choose either "{{custom}}" or "{{default}}".',
};
export default Object.freeze(domain);

View file

@ -78,6 +78,8 @@ const connectors = {
callback_uri: 'URI di callback',
callback_uri_description:
"Anche chiamato URI di reindirizzamento, è l'URI in Logto dove gli utenti verranno rimandati dopo l'autorizzazione tramite social media, copia e incollalo nella pagina di configurazione del provider social media.",
/** UNTRANSLATED */
acs_url: 'Assertion consumer service URL',
},
platform: {
universal: 'Universale',

View file

@ -51,6 +51,9 @@ const domain = {
'Puoi personalizzare il nome di dominio di questi endpoint come richiesto. Scegli "{{custom}}" o "{{default}}".',
custom_social_callback_url_note:
'Puoi personalizzare il nome di dominio di questo URI per corrispondere all\'endpoint della tua applicazione. Scegli "{{custom}}" o "{{default}}".',
/** UNTRANSLATED */
custom_acs_url_note:
'You can customize the domain name of this URI to match your identity provider assertion consumer service URL. Choose either "{{custom}}" or "{{default}}".',
};
export default Object.freeze(domain);

View file

@ -75,6 +75,8 @@ const connectors = {
callback_uri: 'Callback URI',
callback_uri_description:
'Redirect URIもしくはコールバックURIとも呼ばれ、Logtoに戻るURIです。コピーしてソーシャルプロバイダの構成ページに貼り付けてください。',
/** UNTRANSLATED */
acs_url: 'Assertion consumer service URL',
},
platform: {
universal: 'ユニバーサル',

View file

@ -50,6 +50,9 @@ const domain = {
'これらのエンドポイントのドメイン名を必要に応じてカスタマイズできます。 "{{custom}}" または "{{default}}" のいずれかを選択してください。',
custom_social_callback_url_note:
'このURIのドメイン名をアプリケーションのエンドポイントに合わせてカスタマイズできます。 "{{custom}}" または "{{default}}" のいずれかを選択してください。',
/** UNTRANSLATED */
custom_acs_url_note:
'You can customize the domain name of this URI to match your identity provider assertion consumer service URL. Choose either "{{custom}}" or "{{default}}".',
};
export default Object.freeze(domain);

View file

@ -73,6 +73,8 @@ const connectors = {
callback_uri: 'Callback URI',
callback_uri_description:
'리다이렉트 URI라고도 불려요. 사용자의 소셜 인증 이후 되돌아올 Logto URI예요. 소셜 공급자의 설정 페이지에 붙여넣으세요.',
/** UNTRANSLATED */
acs_url: 'Assertion consumer service URL',
},
platform: {
universal: 'Universal',

View file

@ -50,6 +50,9 @@ const domain = {
'이 엔드포인트의 도메인 이름을 필요에 따라 사용자 정의할 수 있습니다. "{{custom}}" 또는 "{{default}}" 중 하나를 선택하세요.',
custom_social_callback_url_note:
'이 URI의 도메인 이름을 애플리케이션 엔드포인트와 일치하도록 사용자 정의할 수 있습니다. "{{custom}}" 또는 "{{default}}" 중 하나를 선택하세요.',
/** UNTRANSLATED */
custom_acs_url_note:
'You can customize the domain name of this URI to match your identity provider assertion consumer service URL. Choose either "{{custom}}" or "{{default}}".',
};
export default Object.freeze(domain);

View file

@ -77,6 +77,8 @@ const connectors = {
callback_uri: 'URI zwrotu (Callback)',
callback_uri_description:
'Nazywany także URI przekierowania, to URI w Logto, do którego użytkownicy zostaną przesłani po autoryzacji społecznej; skopiuj i wklej na stronie konfiguracyjnej dostawcy usług społecznościowych.',
/** UNTRANSLATED */
acs_url: 'Assertion consumer service URL',
},
platform: {
universal: 'Uniwersalny',

View file

@ -51,6 +51,9 @@ const domain = {
'Możesz dostosować nazwę domeny tych punktów końcowych według swoich wymagań. Wybierz "{{custom}}" lub "{{default}}".',
custom_social_callback_url_note:
'Możesz dostosować nazwę domeny tego adresu URI, aby dopasować ją do punktu końcowego Twojej aplikacji. Wybierz "{{custom}}" lub "{{default}}".',
/** UNTRANSLATED */
custom_acs_url_note:
'You can customize the domain name of this URI to match your identity provider assertion consumer service URL. Choose either "{{custom}}" or "{{default}}".',
};
export default Object.freeze(domain);

View file

@ -76,6 +76,8 @@ const connectors = {
callback_uri: 'URI de retorno do chamado',
callback_uri_description:
'Também chamado de URI de redirecionamento, é a URI no Logto para a qual os usuários serão enviados de volta após a autorização social; copie e cole na página de configuração do provedor social.',
/** UNTRANSLATED */
acs_url: 'Assertion consumer service URL',
},
platform: {
universal: 'Universal',

View file

@ -51,6 +51,9 @@ const domain = {
'Você pode personalizar o nome de domínio desses endpoints conforme necessário. Escolha "{{custom}}" ou "{{default}}".',
custom_social_callback_url_note:
'Você pode personalizar o nome de domínio desta URI para corresponder ao endpoint de seu aplicativo. Escolha "{{custom}}" ou "{{default}}".',
/** UNTRANSLATED */
custom_acs_url_note:
'You can customize the domain name of this URI to match your identity provider assertion consumer service URL. Choose either "{{custom}}" or "{{default}}".',
};
export default Object.freeze(domain);

View file

@ -78,6 +78,8 @@ const connectors = {
callback_uri: 'URI de retorno',
callback_uri_description:
'Também chamado de URI de redirecionamento, é a URI no Logto para onde os usuários serão enviados após a autorização social, copie e cole na página de configuração do provedor social.',
/** UNTRANSLATED */
acs_url: 'Assertion consumer service URL',
},
platform: {
universal: 'Universal',

View file

@ -51,6 +51,9 @@ const domain = {
'Pode personalizar o nome de domínio desses endpoints conforme necessário. Escolha "{{custom}}" ou "{{default}}".',
custom_social_callback_url_note:
'Pode personalizar o nome de domínio deste URI para corresponder ao endpoint da sua aplicação. Escolha "{{custom}}" ou "{{default}}".',
/** UNTRANSLATED */
custom_acs_url_note:
'You can customize the domain name of this URI to match your identity provider assertion consumer service URL. Choose either "{{custom}}" or "{{default}}".',
};
export default Object.freeze(domain);

View file

@ -77,6 +77,8 @@ const connectors = {
callback_uri: 'URI обратного вызова',
callback_uri_description:
'Также называется URI перенаправления, это URI в Logto, на который пользователи будут отправлены после социальной авторизации. Скопируйте и вставьте его на странице настройки социального провайдера.',
/** UNTRANSLATED */
acs_url: 'Assertion consumer service URL',
},
platform: {
universal: 'Универсальная',

View file

@ -50,6 +50,9 @@ const domain = {
'Вы можете настроить имя домена этих конечных точек по своему усмотрению. Выберите "{{custom}}" или "{{default}}".',
custom_social_callback_url_note:
'Вы можете настроить имя домена этого URI, чтобы соответствовать конечной точке вашего приложения. Выберите "{{custom}}" или "{{default}}".',
/** UNTRANSLATED */
custom_acs_url_note:
'You can customize the domain name of this URI to match your identity provider assertion consumer service URL. Choose either "{{custom}}" or "{{default}}".',
};
export default Object.freeze(domain);

View file

@ -77,6 +77,8 @@ const connectors = {
callback_uri: 'Geri dönüş URI',
callback_uri_description:
"Ayrıca yönlendirme URI'si olarak adlandırılır, kullanıcıların sosyal yetkilendirmeden sonra Logto'ya geri gönderilecekleri URI'dir, ve sosyal sağlayıcının yapılandırma sayfasına kopyalayın yapıştırın.",
/** UNTRANSLATED */
acs_url: 'Assertion consumer service URL',
},
platform: {
universal: 'Evrensel',

View file

@ -51,6 +51,9 @@ const domain = {
'Bu uç noktaların alan adını özelleştirebilirsiniz. "{{custom}}" veya "{{default}}" seçeneklerinden birini seçin.',
custom_social_callback_url_note:
'Bu URI\'nin alan adını uygulamanızın uç noktasıyla eşleştirmek için özelleştirebilirsiniz. "{{custom}}" veya "{{default}}" seçeneklerinden birini seçin.',
/** UNTRANSLATED */
custom_acs_url_note:
'You can customize the domain name of this URI to match your identity provider assertion consumer service URL. Choose either "{{custom}}" or "{{default}}".',
};
export default Object.freeze(domain);

View file

@ -68,6 +68,8 @@ const connectors = {
callback_uri: 'Callback URI',
callback_uri_description:
'也称为重定向 URI在社交授权后用户将被发送回 Logto 的 URI复制并粘贴到社交提供者的配置页面中。',
/** UNTRANSLATED */
acs_url: 'Assertion consumer service URL',
},
platform: {
universal: '通用',

View file

@ -45,6 +45,9 @@ const domain = {
custom_endpoint_note: '您可以根据需要自定义这些端点的域名。选择 "{{custom}}" 或 "{{default}}"。',
custom_social_callback_url_note:
'您可以根据需要自定义此 URI 的域名,以匹配您的应用程序端点。选择 "{{custom}}" 或 "{{default}}"。',
/** UNTRANSLATED */
custom_acs_url_note:
'You can customize the domain name of this URI to match your identity provider assertion consumer service URL. Choose either "{{custom}}" or "{{default}}".',
};
export default Object.freeze(domain);

View file

@ -68,6 +68,8 @@ const connectors = {
callback_uri: 'Callback URI',
callback_uri_description:
'也稱為重定向 URI在社交授權後用戶將被發送回 Logto 的 URI復制並粘貼到社交提供者的配置頁面中。',
/** UNTRANSLATED */
acs_url: 'Assertion consumer service URL',
},
platform: {
universal: '通用',

View file

@ -45,6 +45,9 @@ const domain = {
custom_endpoint_note: '您可以根據需要自定義這些端點的域名。選擇“{{custom}}”或“{{default}}”。',
custom_social_callback_url_note:
'您可以自定義此URI的域名以匹配您的應用程序端點。選擇“{{custom}}”或“{{default}}”。',
/** UNTRANSLATED */
custom_acs_url_note:
'You can customize the domain name of this URI to match your identity provider assertion consumer service URL. Choose either "{{custom}}" or "{{default}}".',
};
export default Object.freeze(domain);

View file

@ -68,6 +68,8 @@ const connectors = {
callback_uri: 'Callback URI',
callback_uri_description:
'也稱為重定向 URI在社交授權後用戶將被發送回 Logto 的 URI複製並粘貼到社交提供者的配置頁面中。',
/** UNTRANSLATED */
acs_url: 'Assertion consumer service URL',
},
platform: {
universal: '通用',

View file

@ -45,6 +45,9 @@ const domain = {
custom_endpoint_note: '您可以根據需要自定義這些端點的域名。選擇“{{custom}}”或“{{default}}”。',
custom_social_callback_url_note:
'您可以自定義此 URI 的域名以匹配您的應用程序端點。選擇“{{custom}}”或“{{default}}”。',
/** UNTRANSLATED */
custom_acs_url_note:
'You can customize the domain name of this URI to match your identity provider assertion consumer service URL. Choose either "{{custom}}" or "{{default}}".',
};
export default Object.freeze(domain);