"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "hintergrund", "hProperties": { "id": "hintergrund" } }, "depth": 2, "value": "Hintergrund" }, { "data": { "id": "voraussetzungen", "hProperties": { "id": "voraussetzungen" } }, "depth": 2, "value": "Voraussetzungen" }, { "data": { "id": "erstelle-dein-benutzerdefiniertes-anmelde-ui", "hProperties": { "id": "erstelle-dein-benutzerdefiniertes-anmelde-ui" } }, "depth": 2, "value": "Erstelle dein benutzerdefiniertes Anmelde-UI" }, { "data": { "id": "einrichtung-von-logto-tunnel-cli", "hProperties": { "id": "einrichtung-von-logto-tunnel-cli" } }, "depth": 2, "value": "Einrichtung von Logto tunnel CLI" }, { "data": { "id": "auslösen-der-anmeldung-von-deiner-anwendung-aus", "hProperties": { "id": "auslösen-der-anmeldung-von-deiner-anwendung-aus" } }, "depth": 2, "value": "Auslösen der Anmeldung von deiner Anwendung aus" }, { "data": { "id": "interaktion-mit-der-logto-experience-api", "hProperties": { "id": "interaktion-mit-der-logto-experience-api" } }, "depth": 2, "value": "Interaktion mit der Logto Experience-API" }, { "data": { "id": "teste-deine-benutzerdefinierte-anmeldeseite", "hProperties": { "id": "teste-deine-benutzerdefinierte-anmeldeseite" } }, "depth": 2, "value": "Teste deine benutzerdefinierte Anmeldeseite" }, { "data": { "id": "bereitstellung-deiner-benutzerdefinierten-anmelde-ui-in-logto-cloud", "hProperties": { "id": "bereitstellung-deiner-benutzerdefinierten-anmelde-ui-in-logto-cloud" } }, "depth": 2, "value": "Bereitstellung deiner benutzerdefinierten Anmelde-UI in Logto Cloud" }, { "data": { "id": "fazit", "hProperties": { "id": "fazit" } }, "depth": 2, "value": "Fazit" }]; const readingTime = { "minutes": 3, "words": 990, "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: "hintergrund", children: ["Hintergrund", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#hintergrund", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Logto bietet eine sofort einsatzbereite Anmeldeerfahrung, die alle Logto-Funktionen abdeckt, einschließlich Anmeldung, Registrierung, Passwort-Wiederherstellung, Single Sign-On (SSO) und mehr.\nBenutzer können das Erscheinungsbild der Anmeldeoberfläche auch mit unserer Funktion \"Custom CSS\" anpassen." }), "\n", _jsx(_components.p, { children: "Dennoch möchten einige Benutzer ihre Anmeldeerfahrung (sowohl UI als auch Authentifizierungsabläufe) tiefgehend an ihre Marke und spezifischen Geschäftsanforderungen anpassen.\nWir haben euch gehört! Und wir freuen uns, bekannt zu geben, dass die Funktion \"Bringe dein eigenes UI\" jetzt in Logto Cloud verfügbar ist." }), "\n", _jsx(_components.p, { children: "In diesem Tutorial führen wir dich durch die Schritte, um deine eigene benutzerdefinierte Anmeldeoberfläche in Logto Cloud zu erstellen und bereitzustellen." }), "\n", _jsxs(_components.h2, { id: "voraussetzungen", children: ["Voraussetzungen", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#voraussetzungen", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Bevor du beginnst, stelle sicher, dass du Folgendes hast:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Ein ", _jsx(_components.a, { href: "http://cloud.logto.io/?sign_up=true", children: "Logto Cloud" }), "-Konto mit einem Abonnement-Plan"] }), "\n", _jsxs(_components.li, { children: ["Eine mit Logto integrierte Anwendung (", _jsx(_components.a, { href: "https://docs.logto.io/quick-starts", children: "Quick-starts" }), ")"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.a, { href: "https://docs.logto.io/docs/references/tunnel-cli/", children: "Logto tunnel CLI" }), " installiert"] }), "\n", _jsx(_components.li, { children: "Grundkenntnisse in HTML, CSS und JavaScript" }), "\n"] }), "\n", _jsx(_components.p, { children: "Der Einfachheit halber werden wir in den folgenden Schritten die klassische Methode \"Benutzername & Passwort\" zur Anmeldung verwenden. Denke daran, deine Anmeldemethode in der Logto-Konsole zu ändern." }), "\n", _jsx("center", { children: _jsx("img", { width: "600", src: "https://uploads.strapi.logto.io/1/username_password_sign_in_78a7d8588c.webp", alt: "Anmeldung mit Benutzername und Passwort" }) }), "\n", _jsxs(_components.h2, { id: "erstelle-dein-benutzerdefiniertes-anmelde-ui", children: ["Erstelle dein benutzerdefiniertes Anmelde-UI", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#erstelle-dein-benutzerdefiniertes-anmelde-ui", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Die Mindestanforderung für eine Anmeldeoberfläche ist eine ", _jsx(_components.code, { children: "index.html" }), "-Datei mit einem Anmeldeformular, das mindestens ein Benutzernamenfeld, ein Passwortfeld und einen Senden-Button enthält.\nIch habe ChatGPT verwendet, um ein Beispiel-HTML zu generieren, und hier komme ich mit dieser süßen, rosa Anmeldeseite."] }), "\n", _jsx("center", { children: _jsx("img", { width: "600", src: "https://uploads.strapi.logto.io/1/pinky_sign_in_page_b11e43251d.webp", alt: "Benutzerdefinierte Anmeldeseite" }) }), "\n", _jsx(_components.p, { children: "Ich habe die CSS-Stile der Einfachheit halber weggelassen, und so einfach sieht das HTML aus:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n\n \n \n \n Fun Anmeldeseite\n \n \n

Willkommen zurück

\n \n

\n \n\n" }) }), "\n", _jsx(_components.p, { children: "Du kannst auch mit einem Boilerplate von deinem bevorzugten Frontend-Framework starten, wie z. B. Create React App, Next.js oder Vue CLI." }), "\n", _jsxs(_components.p, { children: ["Da Logto Open Source ist, ist eine weitere Empfehlung, das ", _jsx(_components.a, { href: "https://github.com/logto-io/logto/tree/master/packages/experience", children: "Logto Experience-Projekt" }), " zu klonen und den Code nach deinen Bedürfnissen anzupassen. Dies ist die komplette Logto-eingebaute Anmeldeerfahrung, geschrieben in React und TypeScript."] }), "\n", _jsxs(_components.h2, { id: "einrichtung-von-logto-tunnel-cli", children: ["Einrichtung von Logto tunnel CLI", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#einrichtung-von-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" }), " ist ein Tool, das nicht nur deine HTML-Seiten bereitstellt, sondern dir auch ermöglicht, in deiner lokalen Entwicklungsumgebung mit der Logto Experience-API zu interagieren."] }), "\n", _jsxs(_components.p, { children: ["Angenommen, deine ", _jsx(_components.code, { children: "index.html" }), "-Seite befindet sich unter ", _jsx(_components.code, { children: "/path/to/your/custom-ui" }), ", und deine Logto-Mandanten-ID ist ", _jsx(_components.code, { children: "foobar" }), ", kannst du den Befehl folgendermaßen ausführen:"] }), "\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: ["Oder, wenn du ein UI-Framework verwendest, das über einen eingebauten Entwicklungsserver verfügt und deine Seite unter ", _jsx(_components.code, { children: "http://localhost:4000" }), " bereitgestellt wird, kannst du den Befehl so ausführen:"] }), "\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: ["Nachdem der Befehl ausgeführt wurde, wird der Tunneldienst auf deinem lokalen Rechner unter ", _jsx(_components.code, { children: "http://localhost:9000/" }), " gestartet."] }), "\n", _jsxs(_components.h2, { id: "auslösen-der-anmeldung-von-deiner-anwendung-aus", children: ["Auslösen der Anmeldung von deiner Anwendung aus", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#auslösen-der-anmeldung-von-deiner-anwendung-aus", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Gehe zu der Anwendung, die du zuvor erstellt hast, und ändere den Logto-Endpunkt in der Konfiguration des Logto-SDKs von ", _jsx(_components.code, { children: "https://foobar.logto.app/" }), " auf ", _jsx(_components.code, { children: "http://localhost:9000/" }), "."] }), "\n", _jsx(_components.p, { children: "Nehmen wir unser React-Beispielprojekt als Beispiel:" }), "\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/', // ursprünglicher Logto Cloud-Endpunkt\n endpoint: 'http://localhost:9000/', // Adresse des Tunneldienstes\n appId: '',\n};\n\nconst App = () => (\n \n \n \n);\n" }) }), "\n", _jsx(_components.p, { children: "Klicke auf den \"Anmelden\"-Button in deiner Anwendung. Statt der eingebauten Logto-Anmeldeoberfläche solltest du jetzt zu deiner benutzerdefinierten Anmeldeseite weitergeleitet werden." }), "\n", _jsxs(_components.h2, { id: "interaktion-mit-der-logto-experience-api", children: ["Interaktion mit der Logto Experience-API", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#interaktion-mit-der-logto-experience-api", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["In diesem Schritt werden wir mit der Logto Experience-API in deinem benutzerdefinierten UI interagieren. Zunächst erstellen wir eine ", _jsx(_components.code, { children: "script.js" }), "-Datei und fügen die Referenz in deiner ", _jsx(_components.code, { children: "index.html" }), " hinzu."] }), "\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: ["Füge den folgenden Code in deine ", _jsx(_components.code, { children: "script.js" }), "-Datei ein."] }), "\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('Ups!', error);\n }\n });\n};\n" }) }), "\n", _jsx(_components.p, { children: "Dieses Skript wird den Anmeldeprozess mit Benutzername und Passwort mit Hilfe dieser APIs vervollständigen:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "PUT /api/experience" }), " - Start der Anmeldeinteraktion"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "POST /api/experience/verification/password" }), " - Überprüfung von Benutzername und Passwort"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "POST /api/experience/identification" }), " - Identifikation des Benutzers für die aktuelle Interaktion"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "POST /api/experience/submit" }), " - Absenden der Anmeldeinteraktion"] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Sieh dir die ", _jsx(_components.a, { href: "https://openapi.logto.io/group/endpoint-experience", children: "Logto Experience API-Dokumente" }), " für mehr Details an."] }), "\n", _jsxs(_components.h2, { id: "teste-deine-benutzerdefinierte-anmeldeseite", children: ["Teste deine benutzerdefinierte Anmeldeseite", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#teste-deine-benutzerdefinierte-anmeldeseite", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Gehe zu deiner Anwendung und klicke auf den \"Anmelden\"-Button." }), "\n", _jsxs(_components.li, { children: ["Du solltest zu deiner benutzerdefinierten Anmeldeseite unter ", _jsx(_components.code, { children: "http://localhost:9000/" }), " weitergeleitet werden."] }), "\n", _jsx(_components.li, { children: "Gib Benutzername und Passwort ein, und klicke auf den \"Senden\"-Button." }), "\n", _jsx(_components.li, { children: "Wenn alles korrekt eingerichtet ist, solltest du zurück zu deiner Anwendung weitergeleitet werden, mit authentifizierten Benutzerinformationen." }), "\n"] }), "\n", _jsxs(_components.h2, { id: "bereitstellung-deiner-benutzerdefinierten-anmelde-ui-in-logto-cloud", children: ["Bereitstellung deiner benutzerdefinierten Anmelde-UI in Logto Cloud", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#bereitstellung-deiner-benutzerdefinierten-anmelde-ui-in-logto-cloud", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Nachdem du deine benutzerdefinierte Anmeldeoberfläche lokal entwickelt und getestet hast, kannst du sie in Logto Cloud bereitstellen.\nErstelle einfach eine Zip-Datei von deinem benutzerdefinierten UI-Ordner und lade sie im Abschnitt \"Custom UI\" deiner Logto-Konsole hoch." }), "\n", _jsx("center", { children: _jsx("img", { src: "https://uploads.strapi.logto.io/1/upload_custom_ui_assets_d5d99b43d9.webp", alt: "Hochladen von benutzerdefiniertem UI" }) }), "\n", _jsx(_components.p, { children: "Nach dem Hochladen speichere die Änderungen, und deine benutzerdefinierte Anmeldeoberfläche wird in deinem Logto Cloud-Mandanten live geschaltet und ersetzt die eingebaute Logto-Anmeldeerfahrung." }), "\n", _jsx("center", { children: _jsx("img", { src: "https://uploads.strapi.logto.io/1/sie_custom_ui_enabled_53f4445188.webp", alt: "Benutzerdefiniertes UI aktiviert" }) }), "\n", _jsxs(_components.p, { children: ["Gehe schließlich zurück zu deiner Anwendung und ändere die Endpunkt-URI wieder auf deinen Logto-Cloud-Endpunkt: ", _jsx(_components.code, { children: "https://foobar.logto.app/" }), ".\nDieses Mal kannst du den Logto-Tunneldienst beenden, und deine Anwendung sollte jetzt direkt mit dem online gehosteten benutzerdefinierten UI arbeiten."] }), "\n", _jsxs(_components.h2, { id: "fazit", children: ["Fazit", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#fazit", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "In diesem Tutorial haben wir dich durch den Prozess der Implementierung und Bereitstellung deiner eigenen benutzerdefinierten Anmelde-UI in Logto Cloud geführt." }), "\n", _jsx(_components.p, { children: "Mit dieser Funktion kannst du jetzt deine Anmelde-UI und Authentifizierungsabläufe tiefgreifend an deine Marke und spezifische Geschäftsanforderungen anpassen." }), "\n", _jsx(_components.p, { children: "Viel Spaß beim Programmieren! 🚀" }), "\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."); }