"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "taustaa", "hProperties": { "id": "taustaa" } }, "depth": 2, "value": "Taustaa" }, { "data": { "id": "ennakkovaatimukset", "hProperties": { "id": "ennakkovaatimukset" } }, "depth": 2, "value": "Ennakkovaatimukset" }, { "data": { "id": "luo-mukautettu-kirjautumiskäyttöliittymäsi", "hProperties": { "id": "luo-mukautettu-kirjautumiskäyttöliittymäsi" } }, "depth": 2, "value": "Luo mukautettu kirjautumiskäyttöliittymäsi" }, { "data": { "id": "aseta-logto-tunnel-cli", "hProperties": { "id": "aseta-logto-tunnel-cli" } }, "depth": 2, "value": "Aseta Logto tunnel CLI" }, { "data": { "id": "käynnistä-kirjautuminen-sovelluksestasi", "hProperties": { "id": "käynnistä-kirjautuminen-sovelluksestasi" } }, "depth": 2, "value": "Käynnistä kirjautuminen sovelluksestasi" }, { "data": { "id": "interaktiot-logto-experience-apin-kanssa", "hProperties": { "id": "interaktiot-logto-experience-apin-kanssa" } }, "depth": 2, "value": "Interaktiot Logto Experience API:n kanssa" }, { "data": { "id": "testaa-mukautettua-kirjautumissivuasi", "hProperties": { "id": "testaa-mukautettua-kirjautumissivuasi" } }, "depth": 2, "value": "Testaa mukautettua kirjautumissivuasi" }, { "data": { "id": "asenna-mukautettu-kirjautumisen-käyttöliittymäsi-logto-cloudiin", "hProperties": { "id": "asenna-mukautettu-kirjautumisen-käyttöliittymäsi-logto-cloudiin" } }, "depth": 2, "value": "Asenna mukautettu kirjautumisen käyttöliittymäsi Logto Cloudiin" }, { "data": { "id": "yhteenveto", "hProperties": { "id": "yhteenveto" } }, "depth": 2, "value": "Yhteenveto" }]; const readingTime = { "minutes": 3, "words": 817, "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: "taustaa", children: ["Taustaa", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#taustaa", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Logto tarjoaa valmiin kirjautumiskokemuksen käyttöliittymän, joka kattaa kaikki Logton ominaisuudet, mukaan lukien kirjautuminen, rekisteröinti, salasanan palautus, kertakirjautuminen (SSO) ja paljon muuta.\nKäyttäjät voivat myös mukauttaa kirjautumiskokemuksen käyttöliittymän ulkoasua \"Mukautettu CSS\" -ominaisuudellamme." }), "\n", _jsx(_components.p, { children: "Kuitenkin, jotkut käyttäjät haluavat silti syvällisesti mukauttaa omaa kirjautumiskokemuksiaan (sekä käyttöliittymää että todennusvirtoja) vastaamaan omaa brändäystä ja erityisiä liiketoiminnan vaatimuksiaan.\nOlemme kuulleet teitä! Ja olemme innoissamme ilmoittaa, että \"Tuo oma käyttöliittymä\" -ominaisuus on nyt saatavilla Logto Cloudissa." }), "\n", _jsx(_components.p, { children: "Tässä oppaassa ohjaamme sinut läpi vaiheet oman mukautetun kirjautumisen käyttöliittymän luomiseksi ja asentamiseksi Logto Cloudiin." }), "\n", _jsxs(_components.h2, { id: "ennakkovaatimukset", children: ["Ennakkovaatimukset", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#ennakkovaatimukset", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Ennen kuin aloitat, varmista, että sinulla on seuraavat asiat:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.a, { href: "http://cloud.logto.io/?sign_up=true", children: "Logto Cloud" }), " -tili, jossa on tilauspaketti"] }), "\n", _jsxs(_components.li, { children: ["Logtoon integroitu sovellus (", _jsx(_components.a, { href: "https://docs.logto.io/quick-starts", children: "Pika-aloitukset" }), ")"] }), "\n", _jsxs(_components.li, { children: ["Asennettuna ", _jsx(_components.a, { href: "https://docs.logto.io/docs/references/tunnel-cli/", children: "Logto tunnel CLI" })] }), "\n", _jsx(_components.li, { children: "Perustiedot HTML:stä, CSS:stä ja JavaScriptistä" }), "\n"] }), "\n", _jsx(_components.p, { children: "Yksinkertaisuuden vuoksi käytämme seuraavissa vaiheissa klassista \"käyttäjänimi & salasana\" -kirjautumistapaa. Muista vaihtaa kirjautumismenetelmäsi Logto-konsolissa." }), "\n", _jsx("center", { children: _jsx("img", { width: "600", src: "https://uploads.strapi.logto.io/1/username_password_sign_in_78a7d8588c.webp", alt: "Käyttäjänimi ja salasana kirjautuminen" }) }), "\n", _jsxs(_components.h2, { id: "luo-mukautettu-kirjautumiskäyttöliittymäsi", children: ["Luo mukautettu kirjautumiskäyttöliittymäsi", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#luo-mukautettu-kirjautumiskäyttöliittymäsi", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Kirjautumiskäyttöliittymän vähimmäisvaatimus on, että siinä on ", _jsx(_components.code, { children: "index.html" }), "-tiedosto, joka sisältää kirjautumislomakkeen, jossa on vähintään käyttäjänimi-syöte, salasana-syöte ja lähetyspainike.\nKäytin ChatGPT:tä luomaan esimerkkisivun HTML:n, ja tässä on tämä vaaleanpunainen ihana kirjautumissivu."] }), "\n", _jsx("center", { children: _jsx("img", { width: "600", src: "https://uploads.strapi.logto.io/1/pinky_sign_in_page_b11e43251d.webp", alt: "Mukautettu kirjautumissivu" }) }), "\n", _jsx(_components.p, { children: "Olen yksinkertaisuuden vuoksi jättänyt pois CSS-tyylit ja tässä on, kuinka yksinkertaiselta HTML näyttää:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n\n \n \n \n Hupaisa kirjautumissivu\n \n \n

Tervetuloa takaisin

\n \n

\n \n\n" }) }), "\n", _jsx(_components.p, { children: "Voit myös aloittaa alustalla suosikkikehitystyökalustasi, kuten Create React App, Next.js tai Vue CLI." }), "\n", _jsxs(_components.p, { children: ["Koska Logto on avoimen lähdekoodin, toinen suositus on kloonata ", _jsx(_components.a, { href: "https://github.com/logto-io/logto/tree/master/packages/experience", children: "Logto Experience -projekti" }), " ja muokata koodia tarpeidesi mukaan. Tämä on täydellinen ominaisuus Logton sisäänrakennetusta kirjautumiskokemuksesta, kirjoitettu Reactilla ja TypeScriptillä."] }), "\n", _jsxs(_components.h2, { id: "aseta-logto-tunnel-cli", children: ["Aseta Logto tunnel CLI", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#aseta-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" }), " on työkalu, joka ei ainoastaan palvele HTML-sivujasi, vaan myös mahdollistaa interaktiot Logton Experience API:n kanssa HTML-sivuistasi paikallisessa kehitysympäristössä."] }), "\n", _jsxs(_components.p, { children: ["Oletetaan, että ", _jsx(_components.code, { children: "index.html" }), "-sivusi sijaitsee ", _jsx(_components.code, { children: "./path/to/your/custom-ui" }), "-hakemistossa ja Logto tenant ID:si on ", _jsx(_components.code, { children: "foobar" }), ", voit suorittaa komennon tällä tavalla:"] }), "\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: ["Tai, jos käytät käyttöliittymäkehystä, jossa on sisäänrakennettu kehityspalvelin, ja sivusi palvellaan osoitteessa ", _jsx(_components.code, { children: "http://localhost:4000" }), ", voit suorittaa komennon näin:"] }), "\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: ["Komennon suorittamisen jälkeen tunneli-palvelu käynnistyy paikallisessa koneessasi osoitteessa ", _jsx(_components.code, { children: "http://localhost:9000/" }), "."] }), "\n", _jsxs(_components.h2, { id: "käynnistä-kirjautuminen-sovelluksestasi", children: ["Käynnistä kirjautuminen sovelluksestasi", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#käynnistä-kirjautuminen-sovelluksestasi", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Mene sovellukseen, jonka loit aikaisemmin, ja muuta Logto-päätepistettä ", _jsx(_components.code, { children: "https://foobar.logto.app/" }), " arvosta ", _jsx(_components.code, { children: "http://localhost:9000/" }), " Logto SDK-konfiguraatiossasi."] }), "\n", _jsx(_components.p, { children: "Otamme esimerkkinä React-malliprojektimme:" }), "\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/', // alkuperäinen Logto Cloud -päätepiste\n endpoint: 'http://localhost:9000/', // tunneli-palvelun osoite\n appId: '',\n};\n\nconst App = () => (\n \n \n \n);\n" }) }), "\n", _jsx(_components.p, { children: "Klikkaa \"Kirjaudu sisään\" -painiketta sovelluksessasi. Sen sijaan että näkisit sisäänrakennetun Logto-kirjautumiskäyttöliittymän, sinut pitäisi nyt ohjata mukautetulle kirjautumissivullesi." }), "\n", _jsxs(_components.h2, { id: "interaktiot-logto-experience-apin-kanssa", children: ["Interaktiot Logto Experience API:n kanssa", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#interaktiot-logto-experience-apin-kanssa", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Tässä vaiheessa tulemme tekemään interaktioita Logto Experience API:n kanssa mukautetussa käyttöliittymässäsi. Luo ensin ", _jsx(_components.code, { children: "script.js" }), "-tiedosto ja lisää viite ", _jsx(_components.code, { children: "index.html" }), "-tiedostoon."] }), "\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: ["Aseta seuraava koodi ", _jsx(_components.code, { children: "script.js" }), "-tiedostoosi."] }), "\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('Voi ei!', error);\n }\n });\n};\n" }) }), "\n", _jsx(_components.p, { children: "Tämä skripti suorittaa käyttäjänimen ja salasanan kirjautumisvirtauksen näiden API:iden avulla:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "PUT /api/experience" }), " - Käynnistä kirjautumisinteraktio"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "POST /api/experience/verification/password" }), " - Vahvista käyttäjänimi ja salasana"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "POST /api/experience/identification" }), " - Tunnista käyttäjä nykyiselle interaktiolle"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "POST /api/experience/submit" }), " - Lähetä kirjautumisinteraktio"] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Katso ", _jsx(_components.a, { href: "https://openapi.logto.io/group/endpoint-experience", children: "Logto Experience API -dokumentaatio" }), " lisätietoja."] }), "\n", _jsxs(_components.h2, { id: "testaa-mukautettua-kirjautumissivuasi", children: ["Testaa mukautettua kirjautumissivuasi", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#testaa-mukautettua-kirjautumissivuasi", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Mene sovellukseesi ja klikkaa \"Kirjaudu sisään\" -painiketta." }), "\n", _jsxs(_components.li, { children: ["Sinut pitäisi ohjata mukautetulle kirjautumissivullesi osoitteessa ", _jsx(_components.code, { children: "http://localhost:9000/" }), "."] }), "\n", _jsx(_components.li, { children: "Syötä käyttäjänimi ja salasana ja klikkaa \"Lähetä\"-painiketta." }), "\n", _jsx(_components.li, { children: "Jos kaikki on asetettu oikein, sinut pitäisi ohjata takaisin sovellukseesi, käyttäjän tiedot todennettuina." }), "\n"] }), "\n", _jsxs(_components.h2, { id: "asenna-mukautettu-kirjautumisen-käyttöliittymäsi-logto-cloudiin", children: ["Asenna mukautettu kirjautumisen käyttöliittymäsi Logto Cloudiin", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#asenna-mukautettu-kirjautumisen-käyttöliittymäsi-logto-cloudiin", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Kun olet kehittänyt ja testannut mukautettua kirjautumisen käyttöliittymääsi paikallisesti, voit asentaa sen Logto Cloudiin.\nLuo yksinkertaisesti zip-tiedosto mukautetusta käyttöliittymäkansiostasi ja lataa se \"Mukautettu käyttöliittymä\" -osioon Logto-konsolissasi." }), "\n", _jsx("center", { children: _jsx("img", { src: "https://uploads.strapi.logto.io/1/upload_custom_ui_assets_d5d99b43d9.webp", alt: "Lataa mukautettu käyttöliittymä" }) }), "\n", _jsx(_components.p, { children: "Latauksen jälkeen tallenna muutokset ja mukautettu kirjautumisen käyttöliittymäsi menee live-tilaan Logto Cloud -vuokraamossasi, korvaten sisäänrakennetun Logto-kirjautumiskokemuksen." }), "\n", _jsx("center", { children: _jsx("img", { src: "https://uploads.strapi.logto.io/1/sie_custom_ui_enabled_53f4445188.webp", alt: "Mukautettu käyttöliittymä käytössä" }) }), "\n", _jsxs(_components.p, { children: ["Lopuksi, palaa sovellukseesi ja muuta päätepisteen URI takaisin Logto Cloud -päätepisteeseesi: ", _jsx(_components.code, { children: "https://foobar.logto.app/" }), ".\nTällä kertaa voit pysäyttää Logto tunnel -palvelun, ja sovelluksesi tulisi toimia suoraan verkossa isännöidyn mukautetun käyttöliittymän kanssa."] }), "\n", _jsxs(_components.h2, { id: "yhteenveto", children: ["Yhteenveto", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#yhteenveto", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Tässä oppaassa olemme ohjanneet sinut prosessin läpi oman mukautetun kirjautumisen käyttöliittymän toteuttamiseksi ja asentamiseksi Logto Cloudiin." }), "\n", _jsx(_components.p, { children: "Tämän ominaisuuden avulla voit nyt syvällisesti mukauttaa kirjautumiskäyttöliittymääsi ja todennusvirtojasi vastaamaan omaa brändäystäsi ja erityisiä liiketoiminnan vaatimuksiasi." }), "\n", _jsx(_components.p, { children: "Onnea koodaukseen! 🚀" }), "\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."); }