"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "aloita", "hProperties": { "id": "aloita" } }, "depth": 2, "value": "Aloita" }, { "data": { "id": "integroi-logto-sdkn-kanssa", "hProperties": { "id": "integroi-logto-sdkn-kanssa" } }, "depth": 2, "value": "Integroi Logto SDK:n kanssa" }, { "data": { "id": "asennus", "hProperties": { "id": "asennus" } }, "depth": 3, "value": "Asennus" }, { "data": { "id": "init-logto--tarjoaja", "hProperties": { "id": "init-logto--tarjoaja" } }, "depth": 3, "value": "Init Logto -tarjoaja" }, { "data": { "id": "toteuta-sisäänkirjautuminen-ja-uloskirjautuminen", "hProperties": { "id": "toteuta-sisäänkirjautuminen-ja-uloskirjautuminen" } }, "depth": 3, "value": "Toteuta sisäänkirjautuminen ja uloskirjautuminen" }, { "data": { "id": "näytä-käyttäjätiedot", "hProperties": { "id": "näytä-käyttäjätiedot" } }, "depth": 3, "value": "Näytä käyttäjätiedot" }, { "data": { "id": "tarkistuspiste-käynnistä-sovellus", "hProperties": { "id": "tarkistuspiste-käynnistä-sovellus" } }, "depth": 2, "value": "Tarkistuspiste: Käynnistä sovellus" }, { "data": { "id": "lisälukemista", "hProperties": { "id": "lisälukemista" } }, "depth": 2, "value": "Lisälukemista" }]; const readingTime = { "minutes": 1, "words": 294, "text": "less than a minute read" }; const frontmatter = undefined; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", h3: "h3", li: "li", p: "p", pre: "pre", span: "span", ul: "ul", ..._provideComponents(), ...props.components }, {Checkpoint, GetStarted, LogtoCloudButton, Note} = _components; if (!Checkpoint) _missingMdxReference("Checkpoint", true); if (!GetStarted) _missingMdxReference("GetStarted", true); if (!LogtoCloudButton) _missingMdxReference("LogtoCloudButton", true); if (!Note) _missingMdxReference("Note", true); return _jsxs(_Fragment, { children: [_jsxs(_components.h2, { id: "aloita", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#aloita", children: _jsx(_components.span, { children: "#" }) }), "Aloita"] }), "\n", _jsx(GetStarted, { framework: { name: 'Expo (React Native)', url: 'https://expo.dev/', description: 'on ekosysteemi työkaluja, jotka auttavat sinua luomaan universaaleja alkuperäisiä sovelluksia Reactilla, jotka toimivat Androidilla, iOS:llä ja verkossa.' }, programmingLanguage: "TypeScript", applicationType: "Native" }), "\n", _jsxs(_components.h2, { id: "integroi-logto-sdkn-kanssa", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#integroi-logto-sdkn-kanssa", children: _jsx(_components.span, { children: "#" }) }), "Integroi Logto SDK:n kanssa"] }), "\n", _jsxs(_components.h3, { id: "asennus", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#asennus", children: _jsx(_components.span, { children: "#" }) }), "Asennus"] }), "\n", _jsx(_components.p, { children: "Asenna Logto SDK ja sen vertaisriippuvuudet suosikki pakettinhallintasi kautta:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "# tai pnpm, yarn, jne.\nnpm i @logto/rn\nnpm i expo-crypto expo-secure-store expo-web-browser @react-native-async-storage/async-storage\n" }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "@logto/rn" }), " -paketti on SDK Logto:lle. Loput paketit ovat sen vertaisriippuvuuksia. Niitä ei voitu luetteloida suoraan riippuvuuksina, koska Expo CLI vaatii, että kaikki natiivimoduulien riippuvuudet asennetaan suoraan pääprojektin ", _jsx(_components.code, { children: "package.json" }), " -tiedostoon."] }), "\n", _jsx(Note, { children: _jsxs(_components.p, { children: ["Jos asennat tämän ", _jsx(_components.a, { href: "https://docs.expo.dev/bare/overview", children: "bare React Native -sovellukseen" }), ",\nsinun tulisi myös noudattaa näitä ", _jsx(_components.a, { href: "https://docs.expo.dev/bare/installing-expo-modules/", children: "lisäasennusohjeita" }), "."] }) }), "\n", _jsxs(_components.h3, { id: "init-logto--tarjoaja", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#init-logto--tarjoaja", children: _jsx(_components.span, { children: "#" }) }), "Init Logto -tarjoaja"] }), "\n", _jsxs(_components.p, { children: ["Tuo ja käytä ", _jsx(_components.code, { children: "LogtoProvider" }), " -luokkaa tarjotaksesi Logto-kontekstin:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "import { LogtoProvider, LogtoConfig } from '@logto/rn';\n\nconst config: LogtoConfig = {\n endpoint: '',\n appId: '',\n};\n\nconst App = () => (\n \n \n \n);\n" }) }), "\n", _jsxs(_components.h3, { id: "toteuta-sisäänkirjautuminen-ja-uloskirjautuminen", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#toteuta-sisäänkirjautuminen-ja-uloskirjautuminen", children: _jsx(_components.span, { children: "#" }) }), "Toteuta sisäänkirjautuminen ja uloskirjautuminen"] }), "\n", _jsxs(_components.p, { children: ["Siirry Logto Consolen sovellusasetusten sivulle. Lisää alkuperäinen uudelleenohjaus-URI (esimerkiksi ", _jsx(_components.code, { children: "io.logto://callback" }), "), napsauta sitten \"Tallenna\"."] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["\n", _jsxs(_components.p, { children: ["iOS:llä uudelleenohjaus-URI-skeemalla ei ole merkitystä, koska ", _jsx(_components.code, { children: "ASWebAuthenticationSession" }), " -luokka kuuntelee uudelleenohjaus-URI:a riippumatta siitä, onko se rekisteröity."] }), "\n"] }), "\n", _jsxs(_components.li, { children: ["\n", _jsxs(_components.p, { children: ["Androidilla uudelleenohjaus-URI-skeema on täytettävä Expon ", _jsx(_components.code, { children: "app.json" }), " -tiedostossa, esimerkiksi:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-json", children: "{\n \"expo\": {\n \"scheme\": \"io.logto\"\n }\n}\n" }) }), "\n"] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Nyt takaisin sovellukseesi, voit käyttää ", _jsx(_components.code, { children: "useLogto" }), " -hookia kirjautumiseen ja uloskirjautumiseen:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "import { useLogto } from '@logto/rn';\nimport { Button } from 'react-native';\n\nconst Content = () => {\n const { signIn, signOut, isAuthenticated } = useLogto();\n\n return (\n

\n {isAuthenticated ? (\n

\n );\n};\n" }) }), "\n", _jsxs(_components.h3, { id: "näytä-käyttäjätiedot", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#näytä-käyttäjätiedot", children: _jsx(_components.span, { children: "#" }) }), "Näytä käyttäjätiedot"] }), "\n", _jsxs(_components.p, { children: ["Käyttäjän tietojen näyttämiseksi voit käyttää ", _jsx(_components.code, { children: "getIdTokenClaims()" }), " -menetelmää:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "import { useLogto } from '@logto/rn';\nimport { Button, Text } from 'react-native';\n\nconst Content = () => {\n const { getIdTokenClaims, isAuthenticated } = useLogto();\n const [user, setUser] = useState(null);\n\n useEffect(() => {\n if (isAuthenticated) {\n getIdTokenClaims().then((claims) => {\n setUser(claims);\n });\n }\n }, [isAuthenticated]);\n\n return (\n

\n {isAuthenticated ? (\n <>\n {user?.name}\n {user?.email}\n

\n );\n};\n" }) }), "\n", _jsxs(_components.h2, { id: "tarkistuspiste-käynnistä-sovellus", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#tarkistuspiste-käynnistä-sovellus", children: _jsx(_components.span, { children: "#" }) }), "Tarkistuspiste: Käynnistä sovellus"] }), "\n", _jsx(Checkpoint, {}), "\n", _jsxs(_components.h2, { id: "lisälukemista", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#lisälukemista", children: _jsx(_components.span, { children: "#" }) }), "Lisälukemista"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://docs.logto.io/docs/recipes/customize-sie/", children: "Mukauta sisäänkirjautumiskokemus" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://docs.logto.io/docs/recipes/configure-connectors/", children: "Määritä liittimet" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://docs.logto.io/docs/recipes/protect-your-api/", children: "Suojaa API:si" }) }), "\n"] }), "\n", _jsx(LogtoCloudButton, { children: "Kokeile Logtoa tänään" })] }); } 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."); }