"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "bakgrund", "hProperties": { "id": "bakgrund" } }, "depth": 2, "value": "Bakgrund" }, { "data": { "id": "förutsättningar", "hProperties": { "id": "förutsättningar" } }, "depth": 2, "value": "Förutsättningar" }, { "data": { "id": "skapa-din-anpassade-inloggnings-ui", "hProperties": { "id": "skapa-din-anpassade-inloggnings-ui" } }, "depth": 2, "value": "Skapa din anpassade inloggnings-UI" }, { "data": { "id": "ställ-in-logto-tunnel-cli", "hProperties": { "id": "ställ-in-logto-tunnel-cli" } }, "depth": 2, "value": "Ställ in Logto tunnel CLI" }, { "data": { "id": "starta-inloggning-från-din-applikation", "hProperties": { "id": "starta-inloggning-från-din-applikation" } }, "depth": 2, "value": "Starta inloggning från din applikation" }, { "data": { "id": "interagera-med-logto-experience-api", "hProperties": { "id": "interagera-med-logto-experience-api" } }, "depth": 2, "value": "Interagera med Logto Experience API" }, { "data": { "id": "testa-din-anpassade-inloggningssida", "hProperties": { "id": "testa-din-anpassade-inloggningssida" } }, "depth": 2, "value": "Testa din anpassade inloggningssida" }, { "data": { "id": "distribuera-din-anpassade-inloggnings-ui-till-logto-cloud", "hProperties": { "id": "distribuera-din-anpassade-inloggnings-ui-till-logto-cloud" } }, "depth": 2, "value": "Distribuera din anpassade inloggnings-UI till Logto Cloud" }, { "data": { "id": "slutsats", "hProperties": { "id": "slutsats" } }, "depth": 2, "value": "Slutsats" }]; const readingTime = { "minutes": 3, "words": 999, "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", ul: "ul", ..._provideComponents(), ...props.components }, {LogtoCloudButton} = _components; if (!LogtoCloudButton) _missingMdxReference("LogtoCloudButton", true); return _jsxs(_Fragment, { children: [_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: "Logto tillhandahåller en färdig inloggningsupplevelse-UI som täcker alla Logtos funktioner, inklusive inloggning, registrering, återställning av lösenord, single sign-on (SSO), och mer.\nAnvändare kan också anpassa utseendet och känslan av inloggningsupplevelsen-UI med vår \"Anpassad CSS\"-funktion." }), "\n", _jsx(_components.p, { children: "Men vissa användare vill fortfarande djupt anpassa sin inloggningsupplevelse (både UI och autentiseringsflöden) för att matcha deras varumärke och specifika affärskrav.\nVi har hört er! Och vi är glada att meddela att funktionen \"Ta med din egen UI\" nu är tillgänglig i Logto Cloud." }), "\n", _jsx(_components.p, { children: "I denna handledning kommer vi att guida dig genom stegen för att skapa och distribuera din egen anpassade inloggnings-UI till Logto Cloud." }), "\n", _jsxs(_components.h2, { id: "förutsättningar", children: ["Förutsättningar", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#förutsättningar", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Innan du börjar, se till att du har följande:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Ett ", _jsx(_components.a, { href: "http://cloud.logto.io/?sign_up=true", children: "Logto Cloud" }), " konto med en prenumerationsplan"] }), "\n", _jsxs(_components.li, { children: ["En applikation integrerad med Logto (", _jsx(_components.a, { href: "https://docs.logto.io/quick-starts", children: "Snabbstartsguider" }), ")"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.a, { href: "https://docs.logto.io/docs/references/tunnel-cli/", children: "Logto tunnel CLI" }), " installerad"] }), "\n", _jsx(_components.li, { children: "Grundläggande kunskap om HTML, CSS och JavaScript" }), "\n"] }), "\n", _jsx(_components.p, { children: "För enkelhetens skull kommer vi att använda den klassiska \"användarnamn och lösenord\"-inloggningsmetoden i de följande stegen. Kom ihåg att ändra din inloggningsmetod i Logto Console." }), "\n", _jsx("center", { children: _jsx("img", { width: "600", src: "https://uploads.strapi.logto.io/1/username_password_sign_in_78a7d8588c.webp", alt: "Användarnamn och lösenord inloggning" }) }), "\n", _jsxs(_components.h2, { id: "skapa-din-anpassade-inloggnings-ui", children: ["Skapa din anpassade inloggnings-UI", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#skapa-din-anpassade-inloggnings-ui", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Det minsta kravet för en inloggnings-UI är att ha en ", _jsx(_components.code, { children: "index.html" }), "-fil, med ett inloggningsformulär som innehåller minst ett användarnamn-input, ett lösenord-input och en inlämningsknapp.\nJag använde ChatGPT för att generera ett exempel-HTML, och här kommer jag med denna rosa, älskvärda inloggningssida."] }), "\n", _jsx("center", { children: _jsx("img", { width: "600", src: "https://uploads.strapi.logto.io/1/pinky_sign_in_page_b11e43251d.webp", alt: "Anpassad inloggningssida" }) }), "\n", _jsx(_components.p, { children: "Jag har utelämnat CSS-stilarna för enkelhetens skull, och här är hur enkelt HTML-koden ser ut:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n\n \n \n \n Rolig inloggningssida\n \n \n

Välkommen tillbaka

\n \n

\n \n\n" }) }), "\n", _jsx(_components.p, { children: "Du kan också börja med en grundläggande mall från ditt favoritfront-end-ramverk, som Create React App, Next.js eller Vue CLI." }), "\n", _jsxs(_components.p, { children: ["Eftersom Logto är öppen källkod är en annan rekommendation att klona ", _jsx(_components.a, { href: "https://github.com/logto-io/logto/tree/master/packages/experience", children: "Logto Experience projektet" }), ", och ändra koden för att passa dina behov. Detta är den fullständiga funktionen Logto inbyggd inloggningsupplevelse-UI, skriven i React och TypeScript."] }), "\n", _jsxs(_components.h2, { id: "ställ-in-logto-tunnel-cli", children: ["Ställ in Logto tunnel CLI", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#ställ-in-logto-tunnel-cli", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://docs.logto.io/docs/references/tunnel-cli/", children: "Logto tunnel CLI" }), " är ett verktyg som inte bara serverar dina HTML-sidor, utan också tillåter dig att interagera med Logtos Experience API från dina HTML-sidor i lokal utvecklingsmiljö."] }), "\n", _jsxs(_components.p, { children: ["Förutsatt att din ", _jsx(_components.code, { children: "index.html" }), "-sida är placerad i ", _jsx(_components.code, { children: "/path/to/your/custom-ui" }), ", och din Logto hyresgäst-ID är ", _jsx(_components.code, { children: "foobar" }), ", kan du köra kommandot på detta sätt:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "npx @logto/tunnel --path /path/to/your/custom-ui --endpoint https://foobar.logto.app/ -p 9000\n" }) }), "\n", _jsxs(_components.p, { children: ["Eller, om du använder ett UI-ramverk som har en inbyggd utvecklingsserver och din sida serveras på ", _jsx(_components.code, { children: "http://localhost:4000" }), ", kan du köra kommandot på detta sätt:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "npx @logto/tunnel --uri http://localhost:4000 --endpoint https://foobar.logto.app/ -p 9000\n" }) }), "\n", _jsxs(_components.p, { children: ["Efter att ha kört kommandot kommer tunnelservicen att startas på din lokala maskin ", _jsx(_components.code, { children: "http://localhost:9000/" }), "."] }), "\n", _jsxs(_components.h2, { id: "starta-inloggning-från-din-applikation", children: ["Starta inloggning från din applikation", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#starta-inloggning-från-din-applikation", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Gå till applikationen du skapade tidigare och ändra Logto-endpoint från ", _jsx(_components.code, { children: "https://foobar.logto.app/" }), " till ", _jsx(_components.code, { children: "http://localhost:9000/" }), " i din Logto SDK-konfiguration."] }), "\n", _jsx(_components.p, { children: "Låt oss ta vårt React-exempelprojekt som exempel:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", title: "src/App.tsx", children: "import { LogtoProvider, LogtoConfig } from '@logto/react';\n\nconst config: LogtoConfig = {\n // endpoint: 'https://foobar.logto.app/', // ursprunglig Logto Cloud endpoint\n endpoint: 'http://localhost:9000/', // tunnelserviceadress\n appId: '',\n};\n\nconst App = () => (\n \n \n \n);\n" }) }), "\n", _jsx(_components.p, { children: "Klicka på \"Logga in\"-knappen i din applikation. Istället för att se den inbyggda Logto inloggnings-UI, bör du nu omdirigeras till din anpassade inloggningssida." }), "\n", _jsxs(_components.h2, { id: "interagera-med-logto-experience-api", children: ["Interagera med Logto Experience API", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#interagera-med-logto-experience-api", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["I detta steg kommer vi att interagera med Logto Experience API i din anpassade UI. Låt oss först skapa en ", _jsx(_components.code, { children: "script.js" }), "-fil och lägga till referensen i din ", _jsx(_components.code, { children: "index.html" }), "."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", title: "index.html", children: "\n \n \n \n \n \n\n" }) }), "\n", _jsxs(_components.p, { children: ["Sätt följande kod i din ", _jsx(_components.code, { children: "script.js" }), "-fil."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", title: "script.js", children: "window.onload = function() {\n const form = document.getElementById('loginForm');\n form.addEventListener('submit', async function(event) {\n event.preventDefault();\n const formData = new FormData(event.target);\n \n try {\n await fetch('/api/experience', {\n method: 'PUT',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ interactionEvent: 'SignIn' }),\n });\n\n const verificationResponse = await fetch('/api/experience/verification/password', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({\n identifier: { type: 'username', value: formData.get('username') },\n password: formData.get('password'),\n }),\n });\n\n const { verificationId } = await verificationResponse.json();\n\n await fetch('/api/experience/identification', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ verificationId }),\n });\n\n const submitReponse = await fetch('/api/experience/submit', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n });\n\n const { redirectTo } = await submitReponse.json();\n window.location.replace(redirectTo);\n\n } catch (error) {\n console.error('Oops!', error);\n }\n });\n};\n" }) }), "\n", _jsx(_components.p, { children: "Detta skript kommer att slutföra användarnamnet och lösenords-inloggningsflödet med hjälp av dessa API:er:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "PUT /api/experience" }), " - Starta inloggningsinteraktion"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "POST /api/experience/verification/password" }), " - Verifiera användarnamn och lösenord"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "POST /api/experience/identification" }), " - Identifiera användare för den nuvarande interaktionen"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "POST /api/experience/submit" }), " - Skicka in inloggningsinteraktionen"] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Se ", _jsx(_components.a, { href: "https://openapi.logto.io/group/endpoint-experience", children: "Logto Experience API dokumentation" }), " för mer information."] }), "\n", _jsxs(_components.h2, { id: "testa-din-anpassade-inloggningssida", children: ["Testa din anpassade inloggningssida", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#testa-din-anpassade-inloggningssida", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Gå till din applikation och klicka på \"Logga in\"-knappen." }), "\n", _jsxs(_components.li, { children: ["Du bör omdirigeras till din anpassade inloggningssida på ", _jsx(_components.code, { children: "http://localhost:9000/" }), "."] }), "\n", _jsx(_components.li, { children: "Ange användarnamn och lösenord, och klicka på \"Submit\"-knappen." }), "\n", _jsx(_components.li, { children: "Om allt är rätt inställt bör du omdirigeras tillbaka till din applikation, med autentiserad användarinformation." }), "\n"] }), "\n", _jsxs(_components.h2, { id: "distribuera-din-anpassade-inloggnings-ui-till-logto-cloud", children: ["Distribuera din anpassade inloggnings-UI till Logto Cloud", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#distribuera-din-anpassade-inloggnings-ui-till-logto-cloud", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "När du har slutfört utvecklingen och testning av din anpassade inloggnings-UI lokalt, kan du distribuera den till Logto Cloud.\nSkapa helt enkelt en zip-fil av din anpassade UI-mapp och ladda upp den till \"Anpassad UI\"-sektionen i din Logto Console." }), "\n", _jsx("center", { children: _jsx("img", { src: "https://uploads.strapi.logto.io/1/upload_custom_ui_assets_d5d99b43d9.webp", alt: "Ladda upp anpassad UI" }) }), "\n", _jsx(_components.p, { children: "Efter att ha laddat upp, spara ändringarna, och din anpassade inloggnings-UI kommer att gå live i din Logto Cloud-hyresgäst och ersätta den inbyggda Logto inloggningsupplevelsen." }), "\n", _jsx("center", { children: _jsx("img", { src: "https://uploads.strapi.logto.io/1/sie_custom_ui_enabled_53f4445188.webp", alt: "Anpassad UI aktiverad" }) }), "\n", _jsxs(_components.p, { children: ["Slutligen, gå tillbaka till din applikation och ändra endpoint-URI tillbaka till din Logto moln-endpoint: ", _jsx(_components.code, { children: "https://foobar.logto.app/" }), ".\nDenna gång kan du stoppa Logto tunnel-servicen, och din applikation bör nu fungera direkt med den anpassade UI som är värd online."] }), "\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: "I den här handledningen har vi gått igenom processen att implementera och distribuera din egen anpassade inloggnings-UI till Logto Cloud." }), "\n", _jsx(_components.p, { children: "Med den här funktionen kan du nu djupt anpassa din inloggnings-UI och autentiseringsflöden för att matcha ditt varumärke och specifika affärskrav." }), "\n", _jsx(_components.p, { children: "Lycka till med kodningen! 🚀" }), "\n", _jsx(LogtoCloudButton, {})] }); } 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."); }