Bolt.Newin ja Logton avulla nopea mukautetun kirjautumisprosessin rakentaminen
Opi käyttämään Bolt.newtä rakentaaksesi full stack -sovelluksen Logto-tunnistautumisella. Oppaassa käydään läpi niin kirjautumisprosessien määrittäminen, kelluvan kirjautumispaneelin luonti kuin sosiaalisten kirjautumistapojen ottaminen käyttöön – sekä perusasetukset että mukautus.
Bolt.new on selainpohjainen työkalu, jolla voi generoida ja ajaa full stack -verkkosovelluksia hetkessä. Se perustuu StackBlitzin WebContainer-teknologiaan ja tarjoaa kehittäjille puhtaan, valmiiksi konfiguroidun teknologiapinon, johon kuuluvat Next.js (App Router), Tailwind CSS, Supabase, Prisma ja ShadCN UI. Koko ympäristö toimii paikallisesti selaimessa – ei asennuksia, ei pilvirakennusvaiheita, eikä rekisteröitymistä tarvita.
Toisin kuin työkalut, jotka panostavat tekoälyavusteiseen koodaukseen olemassa olevassa projektissa, Bolt.new keskittyy kehitysprosessin alkuvaiheeseen. Se poistaa projektirakenteen, riippuvuuksien ja paikallisten palvelimien pystyttämisen tuoman ylimääräisen työn, jolloin ideasta toimivaan prototyyppiin pääsee sekunneissa.
Vaikka työkalut kuten Cursor ja Lovable toimivat AI-kopilottina koodieditorissa, Bolt.new keskittyy täysin eri asiaan: välittömään, täysin toimivan full stack -projektin generointiin ja ajoon.
Cursor parantaa VS Code -työskentelyä tekoälyn avulla, auttaen muokkaamaan tai tuottamaan koodia olemassa olevassa ympäristössäsi.
Bolt.new luo toimivan sovelluksen tyhjästä kehoteen tai mallin perusteella ja ajaa sen suoraan selaimessa WebContainerien avulla.
Paikallisia työkaluja tai pilviympäristöjä ei tarvita. Kaikki toimii selaimessa ja tukee natiivisti Node.js:ää, pakettien hallintaa ja full stack -kehitystä. Se tekee Bolt.newstä erityisen sopivan nopeaan prototyyppaukseen ja local-first-kokeiluihin, etenkin tekoäly- ja SaaS-projekteissa.
Bolt.new on suunnattu kehittäjille, jotka usein aloittavat projekteja alusta:
Indie-kehittäjät, jotka validoivat tuoteideoita
AI-rakentajat, jotka testaavat työnkulkuja tai upottavat malleja
Perustajat, jotka prototyyppaavat MVP:tä
Insinöörit, jotka tekevät sisäisiä työkaluja tai demoja
Nämä käyttäjät tuntevat yleensä modernin web-pinon ja suosivat työkaluja, jotka ovat nopeita, selkeitä ja joustavia. Bolt.new ei ole visuaalinen sivunrakennin tai tutoriaalipohjainen alusta – se olettaa, että sinulla on hallussa Reactin ja full stack -kehityksen perusteet, mutta poistaa alkusäätämisen kitkaa.
Bolt.newin on luonut StackBlitzin tiimi, jonka perustajia ovat Eric Simons ja Albert Pai (vuosi 2017). StackBlitz loi WebContainerit, selain-natiivin WebAssembly-ympäristön, joka pystyy ajamaan Node.js:ää suoraan selaimessa. Tämä poisti tarpeen pilvipalvelimille tai paikallisille asennuksille nykyaikaisten JavaScript-sovellusten kehityksessä.
Vuonna 2023 StackBlitz kohtasi uuden vaiheen. Kasvu hidastui, ja tiimi kokeili radikaalimpaa suuntaa: yhdistää WebContainerit ja tekoälyn, jotta luonnollisen kielen kehotteista syntyisi toimivia sovelluksia.
Kokeilusta syntyi Bolt.new, joka julkaistiin lokakuussa 2024. Vain muutamassa viikossa se saavutti suuren suosion kehittäjien keskuudessa yksinkertaisuutensa ja nopeutensa ansiosta. Työkalu yhdisti kaiken, mitä StackBlitz oli kehittänyt vuosien aikana – ympäristön eristäminen, nopeat riippuvuusasennukset ja helposti jaettavat ympäristöt – sekä tekoälyliittymän, joka ymmärsi tavallisia kehitystarpeita.
Bolt.new muutti kehittäjätyökalujen paradigmaa: koodia ei vain kirjoiteta nopeammin – voit aloittaa koodista, joka on jo käynnissä ja tarpeisiisi räätälöity.
Opas: Näin lisäät mukautetun kirjautumisen Logtolla ja Bolt.Newillä#
Tässä esimerkissä käytin Bolt.newtä CMS-sovelluksen tekoon. Ohitin kehotteen ja menin suoraan asiaan: pyysin agenttia rakentamaan CMS:n, jossa Logto toimii tunnistautumisen tarjoajana.
Ohjeiden mukaan tarvitsin kaksi tärkeää tietoa:
Logto endpoint
App ID
Koska sovellus on yksisivuinen React-sovellus, sovelluksen salaisuutta ei tarvita. Agentti hoiti kaiken muun: asensi uusimman Logto React SDK:n, konfiguroi tunnistautumiskomponentit ja yhdisti kaiken toisiinsa.
Jotta käyttöönotto valmistuu, menin Logto Cloud Consoleen, loin uuden yksisivuisen sovelluksen ja kopioin Logto endpointin ja App ID:n Bolt.newiin.
Seuraavaksi määritä Redirect URI:t sekä Post sign-out redirect URI:t.
Tärkeä huomio: koska Bolt.new toimii selaimessa eikä paikallisessa IDE:ssä, et voi käyttää http://localhost:3000/ -osoitetta uudelleenohjaus-URI:na. Käytä sen sijaan Bolt.new-selaimen esikatseluosoitetta.
Mukauta Logton valmiiksi rakennettua kirjautumiskokemusta#
Logto tarjoaa muokattavissa olevan, valmiiksi rakennetun kirjautumisprosessin, jonka voi räätälöidä Consolessa. Aloittaaksesi mene kohtaan Sign-in Experience > Sign-in & Sign-up, ja valitse haluamasi kirjautumistavat (esim. sähköposti, käyttäjänimi, puhelinnumero tai sosiaalinen kirjautuminen).
Kun asetukset on määritetty, kirjautumisprosessin käynnistäminen ohjaa käyttäjän Logton ylläpitämälle kirjautumissivulle määrittämilläsi asetuksilla. Koko tunnistautuminen hoidetaan Logtossa ja käyttäjä ohjautuu kirjautumisen jälkeen takaisin sovelluksesi pariin.
Luo kelluva kirjautumispaneeli sovelluksesi päälle#
Nyt haluan mennä askeleen pidemmälle ja rakentaa mukautetumman kirjautumiskokemuksen, samantyylisen kuin Perplexityllä. Erillisen sivulle ohjauksen sijaan sijoitan kelluvan kirjautumispaneelin suoraan sovelluksen käyttöliittymän päälle. Näin käyttäjät pysyvät kontekstissa, mutta silti Logton tunnistautuminen on taustalla käytössä.
Käytän vain tätä kehotetta:
Haluan parantaa kirjautumissivun ulkonäköä, vain kelluva paneeli oikeaan alakulmaan. Kaksi painiketta: toinen “Kirjaudu sisään” ja toinen “Luo tili”. Jokaisen painikkeen tulee ohjata eri näkymään, Logton käsittelemänä. Käytä Logton dokumentoimaa first-screen experience -toiminnallisuutta: https://docs.logto.io/end-user-flows/authentication-parameters/first-screen
Hienointa on, että kun klikkaat Kirjaudu sisään, pääset suoraan kirjautumissivulle. Jos klikkaat Luo tili, avautuu heti tilinluontinäkymä.
Voit antaa agentille Logton suoran kirjautumisen dokumentaation sekä kehotteen, kuten “lisää sosiaalisen kirjautumisen prosessit”. Näin ohitat Logton oletusaloitusnäkymän. Esimerkiksi, kun klikkaat Google Sign-In -painiketta, Google-tunnistautuminen avautuu välittömästi, mikä tekee kirjautumisesta nopeamman ja käyttäjäystävällisemmän.
Tämä on vain perusesimerkki. Logtolla on työn alla MCP-palvelimet, jotka toimivat suoraan IDE:ssäsi ja mahdollistavat vuorovaikutuksen Logto Consolen ja Management API:n kanssa jättämättä kehitysympäristöäsi.
Tällä kattaa muun muassa seuraavat:
Luo ja hallitse käyttäjiä
Näe ja suodata lokitietoja
Määritä kirjautumis- ja rekisteröitymisprosessit
Määrittele API-resurssit, käyttöoikeudet ja roolit
Hallitse sovelluksia ja käyttöasetuksia
Ja paljon muuta
Yhdistämällä paikalliset työkalut tekoälyyn sekä Logton infrastruktuuriin, tunnistautuminen ei enää tunnu työläältä integraatiolta, vaan osalta kehityksen luontevaa työnkulkua.
