"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "introduktion", "hProperties": { "id": "introduktion" } }, "depth": 2, "value": "Introduktion" }, { "data": { "id": "bakgrund", "hProperties": { "id": "bakgrund" } }, "depth": 2, "value": "Bakgrund" }, { "data": { "id": "vad-är-konfigurationsbaserad-utveckling-cdd", "hProperties": { "id": "vad-är-konfigurationsbaserad-utveckling-cdd" } }, "depth": 2, "value": "Vad är Konfigurationsbaserad Utveckling (CDD)" }, { "data": { "id": "vad-är-ett-dynamiskt-formulär", "hProperties": { "id": "vad-är-ett-dynamiskt-formulär" } }, "depth": 2, "value": "Vad är ett Dynamiskt Formulär?" }, { "data": { "id": "designa-schema", "hProperties": { "id": "designa-schema" } }, "depth": 2, "value": "Designa Schema" }, { "data": { "id": "bygga-formuläret-med-react-hook-form", "hProperties": { "id": "bygga-formuläret-med-react-hook-form" } }, "depth": 2, "value": "Bygga formuläret med React-Hook-Form" }, { "data": { "id": "slutsats", "hProperties": { "id": "slutsats" } }, "depth": 2, "value": "Slutsats" }]; const readingTime = { "minutes": 3, "words": 915, "text": "3 min read" }; const frontmatter = undefined; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", li: "li", ol: "ol", p: "p", pre: "pre", span: "span", ..._provideComponents(), ...props.components }, {LogtoCloudButton} = _components; if (!LogtoCloudButton) _missingMdxReference("LogtoCloudButton", true); return _jsxs(_Fragment, { children: [_jsxs(_components.h2, { id: "introduktion", children: ["Introduktion", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#introduktion", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://docs.logto.io/docs/references/connectors/", children: "Anslutningar" }), " spelar en kritisk roll i Logto. Med deras hjälp gör Logto det möjligt för slutanvändare att använda lösenordslös registrering eller inloggning samt möjligheten att logga in med sociala konton. Logto tillåter användare att installera eller bygga sina egna anslutningar, och det finns redan mer än 20 ", _jsx(_components.a, { href: "https://github.com/logto-io/logto/tree/master/packages/connectors", children: "officiella anslutningar" }), ". Våra anslutningar är utformade för att vara mycket flexibla och tillåter användare att installera eller till och med bygga sina egna. Samtidigt är det enkelt att utveckla en ny anslutning. För att uppnå det, designade och implementerade vi en lösning som kallas \"Dynamisk Formulär\" som är inspirerad av Konfigurationsbaserad Utveckling (CDD)."] }), "\n", _jsxs(_components.h2, { id: "bakgrund", children: ["Bakgrund", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#bakgrund", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Konfigurationen för Logtos anslutning är en JSON som, även om den är flexibel, kan vara utmanande att redigera och validera. I början var det inte ett stort problem, eftersom de flesta JSON-konfigurationer då var som:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-json", children: "{\n \"appId\": \"xxx\",\n \"appSecret\": \"xx\"\n}\n" }) }), "\n", _jsx(_components.p, { children: "Men eftersom vi stödjer fler och fler leverantörer och protokoll, började saker förändras. Ta \"SAML-anslutning\" som ett exempel, det finns mer än 10 nycklar i JSON-konfigurationen, och typen av värde är komplex, det finns strängar, nummer, JSONs, valda värden och flerradiga strängar för certifikat." }), "\n", _jsx(_components.p, { children: "Så vi tror det är dags att införa ett fint designat formulär för att ersätta JSON-redigeraren. Logto-anslutningen är utformad för att fungera som en tredjepartsapplikation, så hårdkodade formulär är inte en genomförbar lösning. Resultatet är ett starkt behov av dynamiska formulär som är enkla att hantera och med bra användarupplevelse samtidigt. Formuläret för SAML-anslutning som vi nämnde ovan ser ut som:" }), "\n", _jsx("center", { children: _jsx("img", { src: "https://uploads.strapi.logto.io/1/saml_c9a655b1ed.webp", alt: "SAML-anslutningskonfiguration", width: "700px" }) }), "\n", _jsxs(_components.h2, { id: "vad-är-konfigurationsbaserad-utveckling-cdd", children: ["Vad är Konfigurationsbaserad Utveckling (CDD)", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#vad-är-konfigurationsbaserad-utveckling-cdd", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "CDD, eller Komponentdriven Utveckling, presenterar en alternativ metod för att bygga applikationer. I den konventionella metoden skapar ledande arkitekter designer baserade på affärsbehov, applikationen utvecklas sedan och distribueras, och eventuella ändringar genomförs antingen genom ytterligare element eller genom svår refaktorering." }), "\n", _jsx(_components.p, { children: "I kontrast fokuserar CDD på att bygga oberoende komponenter från början, på den mest grundläggande nivån. Ett gränssnitt, vanligtvis JSON, etableras för att montera användargränssnittet på högre nivå. Denna metod, som involverar kombination av återanvändbara komponenter och en JSON-blåkopi, ger utvecklare möjlighet att enkelt bygga applikationer på ett mer flexibelt och skalbart sätt." }), "\n", _jsx(_components.p, { children: "Essensen av CDD ligger i dess utnyttjande av modularitet för att skapa ett löst länkat set av komponenter, som sedan sammanförs genom ett standardiserat gränssnitt." }), "\n", _jsxs(_components.h2, { id: "vad-är-ett-dynamiskt-formulär", children: ["Vad är ett Dynamiskt Formulär?", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#vad-är-ett-dynamiskt-formulär", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Genom att omfamna den Konfigurationsbaserade Utvecklingsmetoden (CDD) kan vi skapa dynamiska webbformulär. Dessa är inte vanliga formulär med statiska, oföränderliga fält; snarare är de dynamiska enheter med fält som genereras baserat på en JSON-fil. Skönheten med dessa dynamiska webbformulär ligger i deras flexibilitet – om en ändring av formulärfälten krävs, räcker det med en uppdatering av JSON-konfigurationen. Denna anpassningsnivå gör dynamiska webbformulär till en ideal lösning för Logto-anslutningar, som kräver olika formulärkonfigurationer som är okända för Logto." }), "\n", _jsxs(_components.h2, { id: "designa-schema", children: ["Designa Schema", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#designa-schema", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Vi designade schemat att vara en rad formulärartiklar, där varje artikel kan ha namn, etikett, platshållare och viktigast av allt, typ. Vi har 6 typer av formulärartiklar och definierat som ett enum:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "enum FormItemType {\n Text = 'Text',\n Number = 'Number',\n MultilineText = 'MultilineText',\n Switch = 'Switch',\n Select = 'Select',\n Json = 'Json',\n}\n" }) }), "\n", _jsx(_components.p, { children: "Och typdefinitionen av formulärartikeln är:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "type FormItem = {\n type: FormItemType;\n name: string;\n label: string;\n placeholder?: string;\n required?: string;\n description?: string;\n tooltip?: string;\n};\n" }) }), "\n", _jsx(_components.p, { children: "Sedan är det fullständiga schemat:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "type Form = FormItem[];\n" }) }), "\n", _jsxs(_components.p, { children: ["Men det finns ett litet problem, formulärtypen \"välj\" kräver en lista med alternativ, så lägg till detta fält till ", _jsx(_components.code, { children: "FormItem" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "type BaseFormItem = {\n name: string;\n label: string;\n placeholder?: string;\n required?: string;\n description?: string;\n tooltip?: string;\n};\n\ntype FormItem =\n | ({\n type:\n | FormItemType.Text\n | FormItemType.Number\n | FormItemType.MultilineText\n | FormItemType.Switch\n | FormItemType.Json;\n } & BaseFormItem)\n | ({ type: FormItemType.Select } & BaseFormItem & {\n options: Array<{ value: string; title: string }>;\n });\n" }) }), "\n", _jsxs(_components.h2, { id: "bygga-formuläret-med-react-hook-form", children: ["Bygga formuläret med React-Hook-Form", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#bygga-formuläret-med-react-hook-form", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Nu när schemat är fastställt kan vi bygga formuläret i front-end baserat på schemat. Vi kommer att använda React Hook Form för att uppnå det." }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://react-hook-form.com/", children: "React-Hook-Form" }), " är ett kraftfullt verktyg för att bygga effektiva, användarvänliga formulär i React."] }), "\n", _jsxs(_components.p, { children: ["Det första är att initiera ett formulär, anta att JSON-konfigurationen hämtas och kallas ", _jsx(_components.code, { children: "formItems" }), ", och datan i formuläret är ", _jsx(_components.code, { children: "formData" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "type FormData = Record;\n\ntype Props = {\n formItems: FormItem[];\n formData: FormData;\n};\n\nconst Form = ({ formItems, formData }: Props) => {\n const { register, control, handleSubmit } = useForm({ defaultValues: formData });\n\n const onSubmit = handleSubmit(async (data: FormData) => {\n await submitFormToServer(data);\n });\n\n return ;\n};\n" }) }), "\n", _jsx(_components.p, { children: "Sedan, implementera formulärkontrollelementet enligt typen, här är en enkel demonstration:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "

\n {formItems.map((formItem) => (\n

{formItem.label}

\n {formItem.type === FormItemType.Text && (\n \n )}\n {formItem.type === FormItemType.Number && (\n \n )}\n {formItem.type === FormItemType.MultilineText && (\n

\n        )}\n        {formItem.type === FormItemType.Switch && (\n          <input type=\"checkbox\" {...register(formItem.name, { required: formItem.required })} />\n        )}\n        {formItem.type === FormItemType.Select && (\n          <select {...register(formItem.name, { required: formItem.required })}>\n            {formItem.options.map((option) => (\n              <option key={option.value} value={option.value}>\n                {option.title}\n              </option>\n            ))}\n          </select>\n        )}\n      </div>\n    </div>\n  ))}\n</form>\n"
      })
    }), "\n", _jsxs(_components.h2, {
      id: "slutsats",
      children: ["Slutsats", _jsx(_components.a, {
        "aria-hidden": "true",
        tabIndex: "-1",
        href: "#slutsats",
        children: _jsx(_components.span, {
          children: "#"
        })
      })]
    }), "\n", _jsx(_components.p, {
      children: "Mångsidigheten med Konfigurationsbaserad Utveckling (CDD) lyser igenom när den tillämpas på dynamisk formulärskapande, särskilt när det gäller Logtos anslutningar. Fördelarna är tvåfaldiga:"
    }), "\n", _jsxs(_components.ol, {
      children: ["\n", _jsx(_components.li, {
        children: "För utvecklare, det förenklar processen att skapa interaktiva och användarvänliga formulär. Istället för att hantera invecklade kodningskomplexiteter behöver utvecklare bara definiera en JSON-fil för att få de bättre designade, intuitiva användargränssnitten designade av Logto-teamet."
      }), "\n", _jsx(_components.li, {
        children: "För användare, detta tillvägagångssätt förenklar processen att ställa in en anslutning avsevärt. Det tar bort komplexiteten ur integrationen, vilket gör det enklare för användare att integrera Logto med sociala inloggningsfunktioner, liksom e-post- eller SMS-tjänster."
      }), "\n"]
    }), "\n", _jsx(_components.p, {
      children: "Nyligen är artiklar som främjar Low Code allestädes närvarande på internet. Denna lösning utvecklades utifrån perspektivet av faktiska användarbehov, och vi tror att det är en bra representation av Low Code."
    }), "\n", _jsx(_components.p, {
      children: "Vill du prova? Gå till Logto Cloud och välj en anslutning."
    }), "\n", _jsx(LogtoCloudButton, {
      children: "Prova Logto Idag"
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = {
    ..._provideComponents(),
    ...props.components
  };
  return MDXLayout ? _jsx(MDXLayout, {
    ...props,
    children: _jsx(_createMdxContent, {
      ...props
    })
  }) : _createMdxContent(props);
}
return {
  headings,
  readingTime,
  frontmatter,
  default: MDXContent
};
function _missingMdxReference(id, component) {
  throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it.");
}
</article></body></html>