"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "achtergrond", "hProperties": { "id": "achtergrond" } }, "depth": 2, "value": "Achtergrond" }, { "data": { "id": "vereisten", "hProperties": { "id": "vereisten" } }, "depth": 2, "value": "Vereisten" }, { "data": { "id": "maak-je-aangepaste-aanmeld-ui", "hProperties": { "id": "maak-je-aangepaste-aanmeld-ui" } }, "depth": 2, "value": "Maak je aangepaste aanmeld-UI" }, { "data": { "id": "logto-tunnel-cli-instellen", "hProperties": { "id": "logto-tunnel-cli-instellen" } }, "depth": 2, "value": "Logto tunnel CLI instellen" }, { "data": { "id": "aanmelden-starten-vanuit-je-applicatie", "hProperties": { "id": "aanmelden-starten-vanuit-je-applicatie" } }, "depth": 2, "value": "Aanmelden starten vanuit je applicatie" }, { "data": { "id": "interactie-met-logto-experience-api", "hProperties": { "id": "interactie-met-logto-experience-api" } }, "depth": 2, "value": "Interactie met Logto Experience API" }, { "data": { "id": "test-je-aangepaste-aanmeldpagina", "hProperties": { "id": "test-je-aangepaste-aanmeldpagina" } }, "depth": 2, "value": "Test je aangepaste aanmeldpagina" }, { "data": { "id": "implementeer-je-aangepaste-aanmeld-ui-naar-logto-cloud", "hProperties": { "id": "implementeer-je-aangepaste-aanmeld-ui-naar-logto-cloud" } }, "depth": 2, "value": "Implementeer je aangepaste aanmeld-UI naar Logto Cloud" }, { "data": { "id": "conclusie", "hProperties": { "id": "conclusie" } }, "depth": 2, "value": "Conclusie" }]; const readingTime = { "minutes": 3, "words": 1028, "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: "achtergrond", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#achtergrond", children: _jsx(_components.span, { children: "#" }) }), "Achtergrond"] }), "\n", _jsx(_components.p, { children: "Logto biedt een kant-en-klare aanmeldervaring-UI die alle Logto-functies dekt, inclusief aanmelden, registratie, wachtwoordherstel, single sign-on (SSO) en meer.\nGebruikers kunnen ook het uiterlijk van de aanmeldervaring-UI aanpassen met onze \"Aangepaste CSS\"-functie." }), "\n", _jsx(_components.p, { children: "Echter, sommige gebruikers willen hun aanmeldervaring (zowel UI als verificatiestromen) nog dieper aanpassen om te voldoen aan hun merk en specifieke zakelijke vereisten.\nWe hebben jullie gehoord! En we zijn verheugd aan te kondigen dat de \"Breng je eigen UI\"-functie nu beschikbaar is in Logto Cloud." }), "\n", _jsx(_components.p, { children: "In deze handleiding leiden we je door de stappen om je eigen aangepaste aanmeld-UI naar Logto Cloud te maken en te implementeren." }), "\n", _jsxs(_components.h2, { id: "vereisten", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#vereisten", children: _jsx(_components.span, { children: "#" }) }), "Vereisten"] }), "\n", _jsx(_components.p, { children: "Voordat je begint, zorg ervoor dat je het volgende hebt:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Een ", _jsx(_components.a, { href: "http://cloud.logto.io/?sign_up=true", children: "Logto Cloud" }), " account met een abonnement"] }), "\n", _jsxs(_components.li, { children: ["Een applicatie geïntegreerd met Logto (", _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" }), " geïnstalleerd"] }), "\n", _jsx(_components.li, { children: "Basiskennis van HTML, CSS en JavaScript" }), "\n"] }), "\n", _jsx(_components.p, { children: "Voor de eenvoud gebruiken we de klassieke \"gebruikersnaam & wachtwoord\" aanmeldmethode in de volgende stappen. Vergeet niet je aanmeldmethode in Logto Console te wijzigen." }), "\n", _jsx("center", { children: _jsx("img", { width: "600", src: "https://uploads.strapi.logto.io/1/username_password_sign_in_78a7d8588c.webp", alt: "Gebruikersnaam wachtwoord aanmelden" }) }), "\n", _jsxs(_components.h2, { id: "maak-je-aangepaste-aanmeld-ui", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#maak-je-aangepaste-aanmeld-ui", children: _jsx(_components.span, { children: "#" }) }), "Maak je aangepaste aanmeld-UI"] }), "\n", _jsxs(_components.p, { children: ["De minimale vereiste voor een aanmeld-UI is om een ", _jsx(_components.code, { children: "index.html" }), " bestand te hebben, met een aanmeldformulier dat ten minste een gebruikersnaamveld, een wachtwoordveld en een verzendknop bevat.\nIk gebruikte ChatGPT om een voorbeeld HTML te genereren, en hier kom ik met deze roze mooie aanmeldpagina."] }), "\n", _jsx("center", { children: _jsx("img", { width: "600", src: "https://uploads.strapi.logto.io/1/pinky_sign_in_page_b11e43251d.webp", alt: "Aangepaste aanmeldpagina" }) }), "\n", _jsx(_components.p, { children: "Ik heb de CSS-stijlen weggelaten voor eenvoud, en zo eenvoudig ziet de HTML eruit:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n\n \n \n \n Leuke Aanmeldpagina\n \n \n

Welkom Terug

\n \n

\n \n\n" }) }), "\n", _jsx(_components.p, { children: "Je kunt ook beginnen met een sjabloon van je favoriete front-end framework, zoals Create React App, Next.js, of Vue CLI." }), "\n", _jsxs(_components.p, { children: ["Aangezien Logto open source is, is een andere aanbeveling om het ", _jsx(_components.a, { href: "https://github.com/logto-io/logto/tree/master/packages/experience", children: "Logto Experience project" }), " te klonen en de code aan te passen aan je behoeften. Dit is de volledige functie Logto ingebouwde aanmeldervaring-UI, geschreven in React en TypeScript."] }), "\n", _jsxs(_components.h2, { id: "logto-tunnel-cli-instellen", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#logto-tunnel-cli-instellen", children: _jsx(_components.span, { children: "#" }) }), "Logto tunnel CLI instellen"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://docs.logto.io/docs/references/tunnel-cli/", children: "Logto tunnel CLI" }), " is een tool die niet alleen je HTML-pagina's bedient, maar je ook toestaat om te communiceren met Logto's Experience API vanuit je HTML-pagina's in een lokale dev-omgeving."] }), "\n", _jsxs(_components.p, { children: ["Aangenomen dat je ", _jsx(_components.code, { children: "index.html" }), " pagina zich bevindt in ", _jsx(_components.code, { children: "/path/to/your/custom-ui" }), " en je Logto-tenant-ID ", _jsx(_components.code, { children: "foobar" }), " is, kun je de opdracht op deze manier uitvoeren:"] }), "\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: ["Of, als je een UI-framework gebruikt met een ingebouwde ontwikkelserver, en je pagina wordt weergegeven op ", _jsx(_components.code, { children: "http://localhost:4000" }), ", kun je de opdracht op deze manier uitvoeren:"] }), "\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: ["Na het uitvoeren van de opdracht, wordt de tunneldienst gestart op je lokale machine ", _jsx(_components.code, { children: "http://localhost:9000/" }), "."] }), "\n", _jsxs(_components.h2, { id: "aanmelden-starten-vanuit-je-applicatie", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#aanmelden-starten-vanuit-je-applicatie", children: _jsx(_components.span, { children: "#" }) }), "Aanmelden starten vanuit je applicatie"] }), "\n", _jsxs(_components.p, { children: ["Ga naar de applicatie die je eerder hebt gemaakt, en wijzig het Logto-endpoint van ", _jsx(_components.code, { children: "https://foobar.logto.app/" }), " naar ", _jsx(_components.code, { children: "http://localhost:9000/" }), " in je Logto SDK-configuratie."] }), "\n", _jsx(_components.p, { children: "Laten we ons React-voorbeeldproject als voorbeeld nemen:" }), "\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/', // origineel Logto Cloud endpoint\n endpoint: 'http://localhost:9000/', // tunnel service adres\n appId: '',\n};\n\nconst App = () => (\n \n \n \n);\n" }) }), "\n", _jsx(_components.p, { children: "Klik op de \"Aanmelden\" knop in je applicatie. In plaats van de ingebouwde Logto aanmeld-UI te zien, zou je nu worden doorgestuurd naar je aangepaste aanmeldpagina." }), "\n", _jsxs(_components.h2, { id: "interactie-met-logto-experience-api", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#interactie-met-logto-experience-api", children: _jsx(_components.span, { children: "#" }) }), "Interactie met Logto Experience API"] }), "\n", _jsxs(_components.p, { children: ["In deze stap gaan we interageren met de Logto Experience API in je aangepaste UI. Laten we eerst een ", _jsx(_components.code, { children: "script.js" }), " bestand maken en de referentie toevoegen in je ", _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: ["Zet de volgende code in je ", _jsx(_components.code, { children: "script.js" }), " bestand."] }), "\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('Oeps!', error);\n }\n });\n};\n" }) }), "\n", _jsx(_components.p, { children: "Dit script zal de gebruikersnaam en wachtwoord aanmeldstroom voltooien met behulp van deze API's:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "PUT /api/experience" }), " - Start de aanmeldinteractie"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "POST /api/experience/verification/password" }), " - Verifieer de gebruikersnaam en wachtwoord"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "POST /api/experience/identification" }), " - Identificeer de gebruiker voor de huidige interactie"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "POST /api/experience/submit" }), " - Dien de aanmeldinteractie in"] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Raadpleeg ", _jsx(_components.a, { href: "https://openapi.logto.io/group/endpoint-experience", children: "Logto Experience API docs" }), " voor meer details."] }), "\n", _jsxs(_components.h2, { id: "test-je-aangepaste-aanmeldpagina", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#test-je-aangepaste-aanmeldpagina", children: _jsx(_components.span, { children: "#" }) }), "Test je aangepaste aanmeldpagina"] }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Ga naar je applicatie en klik op de \"Aanmelden\" knop." }), "\n", _jsxs(_components.li, { children: ["Je zou moeten worden doorgestuurd naar je aangepaste aanmeldpagina op ", _jsx(_components.code, { children: "http://localhost:9000/" }), "."] }), "\n", _jsx(_components.li, { children: "Voer gebruikersnaam en wachtwoord in, en klik op de \"Verzenden\" knop." }), "\n", _jsx(_components.li, { children: "Als alles correct is ingesteld, zou je moeten worden doorgestuurd naar je applicatie, met geauthenticeerde gebruikersinformatie." }), "\n"] }), "\n", _jsxs(_components.h2, { id: "implementeer-je-aangepaste-aanmeld-ui-naar-logto-cloud", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#implementeer-je-aangepaste-aanmeld-ui-naar-logto-cloud", children: _jsx(_components.span, { children: "#" }) }), "Implementeer je aangepaste aanmeld-UI naar Logto Cloud"] }), "\n", _jsx(_components.p, { children: "Nadat je klaar bent met het ontwikkelen en testen van je aangepaste aanmeld-UI lokaal, kun je deze implementeren naar Logto Cloud.\nMaak eenvoudig een zip-bestand van je aangepaste UI-map en upload deze naar de \"Aangepaste UI\" sectie in je Logto Console." }), "\n", _jsx("center", { children: _jsx("img", { src: "https://uploads.strapi.logto.io/1/upload_custom_ui_assets_d5d99b43d9.webp", alt: "Upload aangepaste UI" }) }), "\n", _jsx(_components.p, { children: "Na het uploaden, sla de wijzigingen op, en je aangepaste aanmeld-UI zal live gaan in je Logto Cloud-tenant, en de ingebouwde Logto aanmeldervaring vervangen." }), "\n", _jsx("center", { children: _jsx("img", { src: "https://uploads.strapi.logto.io/1/sie_custom_ui_enabled_53f4445188.webp", alt: "Aangepaste UI ingeschakeld" }) }), "\n", _jsxs(_components.p, { children: ["Ga ten slotte terug naar je applicatie en wijzig de endpoint-URI terug naar je Logto cloud endpoint: ", _jsx(_components.code, { children: "https://foobar.logto.app/" }), ".\nDit keer kun je de Logto-tunnelsessie stoppen, en je applicatie zou nu direct met de online gehoste aangepaste UI moeten werken."] }), "\n", _jsxs(_components.h2, { id: "conclusie", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#conclusie", children: _jsx(_components.span, { children: "#" }) }), "Conclusie"] }), "\n", _jsx(_components.p, { children: "In deze handleiding hebben we je door het proces geleid van het implementeren en implementeren van je eigen aangepaste aanmeld-UI naar Logto Cloud." }), "\n", _jsx(_components.p, { children: "Met deze functie kun je nu je aanmeld-UI en verificatiestromen diepgaand aanpassen om te voldoen aan je merk en specifieke zakelijke vereisten." }), "\n", _jsx(_components.p, { children: "Veel codeerplezier! 🚀" }), "\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."); }