"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "edellytykset", "hProperties": { "id": "edellytykset" } }, "depth": 2, "value": "Edellytykset" }, { "data": { "id": "määritä-logto", "hProperties": { "id": "määritä-logto" } }, "depth": 2, "value": "Määritä Logto" }, { "data": { "id": "aseta-nextjs-sovellus", "hProperties": { "id": "aseta-nextjs-sovellus" } }, "depth": 2, "value": "Aseta Next.js-sovellus" }, { "data": { "id": "määritä-logto-kirjasto", "hProperties": { "id": "määritä-logto-kirjasto" } }, "depth": 2, "value": "Määritä Logto-kirjasto" }, { "data": { "id": "lisää-kirjaudu-sisään-ja-ulos--painikkeet", "hProperties": { "id": "lisää-kirjaudu-sisään-ja-ulos--painikkeet" } }, "depth": 2, "value": "Lisää kirjaudu sisään ja ulos -painikkeet" }, { "data": { "id": "kirjaudu-sisään", "hProperties": { "id": "kirjaudu-sisään" } }, "depth": 3, "value": "Kirjaudu sisään" }, { "data": { "id": "kirjaudu-ulos", "hProperties": { "id": "kirjaudu-ulos" } }, "depth": 3, "value": "Kirjaudu ulos" }, { "data": { "id": "valmistaudu-takaisinsoitosivuun", "hProperties": { "id": "valmistaudu-takaisinsoitosivuun" } }, "depth": 2, "value": "Valmistaudu takaisinsoitosivuun" }, { "data": { "id": "näytä-käyttäjäkonteksti-ja-suojattu-sivu", "hProperties": { "id": "näytä-käyttäjäkonteksti-ja-suojattu-sivu" } }, "depth": 2, "value": "Näytä käyttäjäkonteksti ja suojattu sivu" }, { "data": { "id": "päätelmä", "hProperties": { "id": "päätelmä" } }, "depth": 2, "value": "Päätelmä" }]; const readingTime = { "minutes": 3, "words": 892, "text": "3 min read" }; const frontmatter = undefined; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", h3: "h3", img: "img", li: "li", p: "p", pre: "pre", span: "span", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }, {LogtoCloudButton} = _components; if (!LogtoCloudButton) _missingMdxReference("LogtoCloudButton", true); return _jsxs(_Fragment, { children: [_jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://nextjs.org/docs/app/api-reference/functions/server-actions", children: "Server Actions" }), " esittelee uudenlaisen lähestymistavan luoda vahvoja verkkosovelluksia ilman perinteisiä REST-rajapintoja. Olemme aiemmin käsitelleet tätä ", _jsx(_components.a, { href: "https://blog.logto.io/nextjs-server-actions-stateless-session/", children: "artikkelissamme" }), "."] }), "\n", _jsxs(_components.p, { children: ["Tänään olemme innoissamme voidessamme ilmoittaa virallisesta Server Actions -tuesta ", _jsx(_components.a, { href: "https://github.com/logto-io/js/tree/master/packages/next", children: "Next.js SDK:ssämme" }), ", vaikka se onkin kokeellinen ominaisuus."] }), "\n", _jsxs(_components.p, { children: ["Yleiskatsauksen saamiseksi tutustu ", _jsx(_components.a, { href: "https://github.com/logto-io/js/tree/master/packages/next-server-actions-sample", children: "tähän esimerkkiin" }), " ja seuraa mukana, kun kerromme, kuinka integroida Logto Server Actions -toimintojen avulla tässä oppaassa."] }), "\n", _jsxs(_components.h2, { id: "edellytykset", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#edellytykset", children: _jsx(_components.span, { children: "#" }) }), "Edellytykset"] }), "\n", _jsx(_components.p, { children: "Aloittaaksesi varmista, että sinulla on seuraavat asiat:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Käynnissä oleva Logto-instanssi tai pääsy Logto Cloud -tiliin." }), "\n", _jsx(_components.li, { children: "Next.js-projekti, jossa Server Actions -ominaisuus on käytössä." }), "\n"] }), "\n", _jsxs(_components.h2, { id: "määritä-logto", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#määritä-logto", children: _jsx(_components.span, { children: "#" }) }), "Määritä Logto"] }), "\n", _jsxs(_components.p, { children: ["Jos isännöit Logtoa itse, viittaa Logto \"", _jsx(_components.a, { href: "https://docs.logto.io/docs/tutorials/get-started/", children: "Get started" }), "\" -dokumentaatioon asentaaksesi Logto-instanssisi."] }), "\n", _jsxs(_components.p, { children: ["Avaa Logto Console syöttämällä URL ", _jsx(_components.code, { children: "https://cloud.logto.io/" }), ", jos käytät Logto Cloudia, tai päätepiste, jonka olet asettanut itse isännöinnille."] }), "\n", _jsx(LogtoCloudButton, { children: "Avaa Logto Cloud ja suorita kokoonpano vaivattomasti" }), "\n", _jsx(_components.p, { children: "Seuraavaksi siirry \"Applications\"-välilehdelle ja napsauta \"Create application\"." }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/1/applications_tab_67594608b6.png", alt: "Applications-välilehti" }) }), "\n", _jsx(_components.p, { children: "Näkyviin tulevassa modalissa valitse \"Next.js (App Router)\" ja anna sovellukselle nimi, esimerkiksi \"Next.js App\". Napsauta sitten \"Create application\"." }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/1/create_application_73ae186100.webp", alt: "Luo sovellus" }) }), "\n", _jsx(_components.p, { children: "Sinut ohjataan opassivulle Logtossa. Napsauta \"Finish and done\" jatkaaksesi Sovelluksen tietosivulle." }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/1/application_details_e27b24d4a0.webp", alt: "Sovelluksen tiedot" }) }), "\n", _jsx(_components.p, { children: "\"Redirect URIs\" -kohdassa syötä seuraava arvo:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { children: "[your-nextjs-base-url]/callback\n" }) }), "\n", _jsxs(_components.p, { children: ["Esimerkiksi, jos isännöit Next.js:ää ", _jsx(_components.strong, { children: _jsx(_components.code, { children: "http://localhost:3000" }) }), ", arvo tulisi olla:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { children: "http://localhost:3000/callback\n" }) }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/1/save_changes_2314e02212.webp", alt: "Tallenna muutokset" }) }), "\n", _jsx(_components.p, { children: "Napsauta \"Save Changes\" -painiketta alareunassa. Kun onnistut, pidä tämä sivu auki, sillä se on hyödyllinen Next.js-konfiguraatiolle." }), "\n", _jsxs(_components.h2, { id: "aseta-nextjs-sovellus", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#aseta-nextjs-sovellus", children: _jsx(_components.span, { children: "#" }) }), "Aseta Next.js-sovellus"] }), "\n", _jsxs(_components.p, { children: ["Varmista, että sinulla on projekti uusimmalla Next.js-versiolla. Jos sinulla ei ole vielä sellaista, voit seurata ", _jsx(_components.a, { href: "https://nextjs.org/docs/getting-started/installation", children: "virallista asennusopasta" }), " luodaksesi sellaisen."] }), "\n", _jsxs(_components.p, { children: ["Tämän oppaan kirjoittamisen aikaan ominaisuus on kokeellinen ja vaatii aktivoinnin ", _jsx(_components.code, { children: "next.config.js" }), "-tiedostossa:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "module.exports = {\n experimental: {\n serverActions: true,\n },\n};\n" }) }), "\n", _jsxs(_components.h2, { id: "määritä-logto-kirjasto", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#määritä-logto-kirjasto", children: _jsx(_components.span, { children: "#" }) }), "Määritä Logto-kirjasto"] }), "\n", _jsxs(_components.p, { children: ["Aloita asentamalla ", _jsx(_components.code, { children: "@logto/next" }), "-moduuli käyttämällä ", _jsx(_components.code, { children: "npm" }), " seuraavasti:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "npm i @logto/next\n" }) }), "\n", _jsxs(_components.p, { children: ["Voit myös käyttää ", _jsx(_components.code, { children: "yarn" }), " tai ", _jsx(_components.code, { children: "pnpm" }), "."] }), "\n", _jsxs(_components.p, { children: ["Luo sitten joitakin toimintoja \"server actionseiksi\", luo uusi tiedosto ", _jsx(_components.code, { children: "libraries/logto.ts" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "'use server';\n\nimport LogtoClient from '@logto/next/server-actions';\nimport { cookies } from 'next/headers';\n\nconst config = {\n appId: process.env.APP_ID ?? '', // Löydät tämän tietosivulta.\n appSecret: process.env.APP_SECRET ?? '', // Löydät tämän tietosivulta.\n endpoint: process.env.ENDPOINT ?? 'http://localhost:3001', // Löydät tämän tietosivulta.\n baseUrl: process.env.BASE_URL ?? 'http://localhost:3000',\n cookieSecret: process.env.COOKIE_SECRET ?? 'monimutkainen_salasana_vähintään_32_merkkiä_pitkä',\n cookieSecure: process.env.NODE_ENV === 'production',\n};\n\nconst logtoClient = new LogtoClient(config);\n\nconst cookieName = `logto:${config.appId}`;\n\nconst setCookies = (value?: string) => {\n if (value === undefined) {\n return;\n }\n\n cookies().set(cookieName, value, {\n maxAge: 14 * 3600 * 24,\n secure: config.cookieSecure,\n });\n};\n\nconst getCookie = () => {\n return cookies().get(cookieName)?.value ?? '';\n};\n\nexport const signIn = async () => {\n const { url, newCookie } = await logtoClient.handleSignIn(\n getCookie(),\n `${config.baseUrl}/callback`\n );\n\n setCookies(newCookie);\n\n return url;\n};\n\nexport const handleSignIn = async (searchParams: Record) => {\n // Muunna searchParams-objekti kyselymerkkijonoksi.\n const search = new URLSearchParams(searchParams).toString();\n\n const newCookie = await logtoClient.handleSignInCallback(\n getCookie(),\n `${config.baseUrl}/callback?${search}`\n );\n\n setCookies(newCookie);\n};\n\nexport const signOut = async () => {\n const url = await logtoClient.handleSignOut(getCookie(), `${config.baseUrl}/callback`);\n\n setCookies('');\n\n return url;\n};\n\nexport const getLogtoContext = async () => {\n return await logtoClient.getLogtoContext(getCookie());\n};\n" }) }), "\n", _jsxs(_components.p, { children: ["Tässä tiedostossa viemme neljä funktiota tunnistusta varten. Huomaa ensimmäinen rivi, ", _jsx(_components.code, { children: "\"use server\"" }), ", joka osoittaa, että tiedoston koodi voi ajaa vain palvelimen puolella. Käytämme ", _jsx(_components.code, { children: "\"next/headers\"" }), " hallitsemaan evästepohjaisia istuntoja."] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Viite ", _jsx(_components.code, { children: "\"use server\"" }), "-käytöstä: ", _jsx(_components.a, { href: "https://react.dev/reference/react/use-server", children: "https://react.dev/reference/react/use-server" })] }), "\n", _jsxs(_components.li, { children: ["Viite ", _jsx(_components.code, { children: "\"next/headers\"" }), "-käytöstä evästeiden hallintaan: ", _jsx(_components.a, { href: "https://nextjs.org/docs/api-reference/next/headers", children: "https://nextjs.org/docs/api-reference/next/headers" })] }), "\n"] }), "\n", _jsx(_components.p, { children: "Yllä olevia toimintoja voidaan kutsua suoraan asiakaspuolen React-komponentista. Tämä on Server Actions -toimintojen tärkein etu. Mennään seuraavaan lukuun katsomaan, kuinka näitä toimintoja käytetään." }), "\n", _jsxs(_components.h2, { id: "lisää-kirjaudu-sisään-ja-ulos--painikkeet", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#lisää-kirjaudu-sisään-ja-ulos--painikkeet", children: _jsx(_components.span, { children: "#" }) }), "Lisää kirjaudu sisään ja ulos -painikkeet"] }), "\n", _jsx(_components.p, { children: "Kun tunnistustoiminnot ovat paikoillaan, rakennamme sivun. Luomme kaksi asiakaskomponenttia aloittamaan kirjautumis- ja kirjautumisnäkymät." }), "\n", _jsxs(_components.h3, { id: "kirjaudu-sisään", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#kirjaudu-sisään", children: _jsx(_components.span, { children: "#" }) }), "Kirjaudu sisään"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "/app/sign-in.tsx" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "'use client';\n\nimport { useRouter } from 'next/navigation';\nimport { signIn } from '../libraries/logto';\n\nconst SignIn = () => {\n const router = useRouter();\n\n const handleClick = async () => {\n const redirectUrl = await signIn();\n\n router.push(redirectUrl);\n };\n\n return ;\n};\n\nexport default SignIn;\n" }) }), "\n", _jsxs(_components.p, { children: ["Tässä tuodaan ", _jsx(_components.code, { children: "signIn" }), "-funktio, joka juuri määriteltiin edellisessä luvussa. Vaikka koodi suoritetaan palvelimen puolella, tämä funktio voidaan kutsua suoraan ", _jsx(_components.code, { children: ";\n};\n\nexport default SignOut;\n" }) }), "\n", _jsx(_components.p, { children: "Uloskirjautumisprosessi on samankaltainen kuin sisäänkirjautumisprosessi." }), "\n", _jsxs(_components.h2, { id: "valmistaudu-takaisinsoitosivuun", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#valmistaudu-takaisinsoitosivuun", children: _jsx(_components.span, { children: "#" }) }), "Valmistaudu takaisinsoitosivuun"] }), "\n", _jsx(_components.p, { children: "Vakiona olevana OIDC-identiteetin tarjoajana Logto ohjaa käyttäjät takaisinsoitoosoitteeseen tunnistautumisen jälkeen. Meidän on siis valmisteltava takaisinsoitosivu käsittelemään kirjautumistulosta." }), "\n", _jsx(_components.p, { children: _jsx(_components.code, { children: "/app/callback/page.tsx" }) }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "'use client';\n\nimport { useRouter } from 'next/navigation';\nimport { handleSignIn } from '../../libraries/logto';\nimport { useEffect } from 'react';\n\ntype Props = {\n searchParams: Record;\n};\n\nexport default function Callback({ searchParams }: Props) {\n const router = useRouter();\n\n useEffect(() => {\n handleSignIn(searchParams).then(() => {\n router.push('/');\n });\n }, [router, searchParams]);\n\n return

Kirjaudutaan sisään...

;\n}\n" }) }), "\n", _jsxs(_components.p, { children: ["Tässä käytämme asiakaskomponenttia ", _jsx(_components.code, { children: "useEffect" }), "in kanssa, joka tekee helppoa näyttää \"ladataan\"-sivun paremman käyttäjäkokemuksen saavuttamiseksi."] }), "\n", _jsxs(_components.h2, { id: "näytä-käyttäjäkonteksti-ja-suojattu-sivu", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#näytä-käyttäjäkonteksti-ja-suojattu-sivu", children: _jsx(_components.span, { children: "#" }) }), "Näytä käyttäjäkonteksti ja suojattu sivu"] }), "\n", _jsxs(_components.p, { children: ["Nyt teemme minimaalisen kotisivun esittämään Logto SDK:n hyödyntämistä. Tarvittaessa suojaa mikä tahansa resurssi tuntemattomilta käyttäjiltä tarkistamalla ", _jsx(_components.code, { children: "isAuthenticated" }), "-arvo ja ohjaamalla kirjautumissivulle tai näyttämällä virheilmoitukset."] }), "\n", _jsx(_components.p, { children: _jsx(_components.code, { children: "app/page.tsx" }) }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "import { getLogtoContext } from '../libraries/logto';\nimport styles from './page.module.css';\nimport SignIn from './sign-in';\nimport SignOut from './sign-out';\n\nexport default async function Home() {\n const { isAuthenticated, claims } = await getLogtoContext();\n return (\n

Hei Logto.

{isAuthenticated ? : }

\n {claims && (\n

Vaatimukset:

\n \n \n \n \n \n \n \n \n {Object.entries(claims).map(([key, value]) => (\n \n \n \n \n ))}\n \n

Nimi	Arvo
{key}	{value}

\n )}\n

\n );\n}\n" }) }), "\n", _jsxs(_components.p, { children: ["Kuten voit, tämä on ", _jsx(_components.a, { href: "https://nextjs.org/docs/app/building-your-application/rendering/server-components", children: "palvelinkomponentti" }), ", joka poistaa tarpeen ", _jsx(_components.code, { children: "useEffect" }), "ille ja monimutkaisten tilamuutosten hallinnalle."] }), "\n", _jsxs(_components.h2, { id: "päätelmä", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#päätelmä", children: _jsx(_components.span, { children: "#" }) }), "Päätelmä"] }), "\n", _jsx(_components.p, { children: "Palvelintoiminnot tarjoavat virtaviivaisen ja yksinkertaisen tavan toteuttaa tunnistus verrattuna perinteisiin Next.js-sovelluksiin, jotka tukeutuvat REST-rajapintoihin." }), "\n", _jsxs(_components.p, { children: ["Koko koodiesimerkki löytyy tästä tietovarastosta: ", _jsx(_components.a, { href: "https://github.com/logto-io/js/tree/master/packages/next-server-actions-sample", children: "https://github.com/logto-io/js/tree/master/packages/next-server-actions-sample" })] }), "\n", _jsx(_components.p, { children: "Miksi et kokeilisi Logto Cloudia ja näkisi käytännössä sen helppoutta?" }), "\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."); }