Bolt.Newin ja Logton käyttäminen: Rakenna omat kirjautumisprosessisi nopeasti
Opi käyttämään Bolt.newia täyden pään web-sovelluksen rakentamiseen, jossa on Logton tunnistautuminen. Oppaassa käydään läpi merkittävimmät vaiheet: kirjautumisprosessien konfigurointi, leijuvan kirjautumispaneelin luonti sekä sosiaalisten kirjautumisten aktivointi – sekä asennus että muokkaus.
Mikä on Bolt.New
Bolt.new on selainpohjainen työkalu, jolla voi luoda ja ajaa täyden pään web-sovelluksia hetkessä. Se perustuu StackBlitzin WebContainer-teknologiaan, ja tarjoaa kehittäjille siistin, valmiiksi konfiguroidun stackin, joka kattaa Next.js:n (App Router), Tailwind CSS:n, Supabasen, Prismansa ja ShadCN UI:n. Koko ympäristö pyörii paikallisesti selaimessa, ilman asennuksia, pilvirakennusvaiheita tai rekisteröitymistä.
Toisin kuin työkalut, jotka auttavat tekoälyllä olemassa olevan projektin parissa, Bolt.new keskittyy nimenomaan kehityksen aloitusvaiheeseen. Se poistaa projektirakenteiden, riippuvuuksien ja paikallisten palvelimien pystytyksen vaivan, mahdollistaen siirtymisen ideasta toimivaan prototyyppiin sekunneissa.
Miten Bolt.new eroaa Cursorista tai Lovablesta?
Siinä missä Cursor ja Lovable toimivat tekoälyapureina olemassa olevan koodieditorin sisällä, Bolt.new tähtää täysin eri asiaan: välittömään täyden pään projektin luomiseen ja ajamiseen.
- Cursor parantaa VS Code -työskentelyä tekoälyllä, auttaen muokkaamaan tai luomaan koodia nykyisessä ympäristössäsi.
- Bolt.new luo toimivan sovelluksen tyhjästä pyynnön tai mallin perusteella ja ajaa sen välittömästi selaimessa WebContainerin avulla.
Missään vaiheessa ei tarvitse käyttää paikallisia työkaluja tai etäpalvelimia: kaikki pyörii selaimessa ja tukee suoraan Node.js:ää, pakettienhallintaa ja täyden pään kehitystä. Tämä tekee siitä erityisen sopivan nopeaan prototyyppaukseen ja paikallislähtöiseen kokeiluun, etenkin tekoäly- tai SaaS-projekteissa.
Kenelle Bolt.new on suunnattu?
Bolt.new on tarkoitettu kehittäjille, jotka aloittavat projektinsa usein tyhjästä, kuten:
- Indie-hakkerit, jotka validoivat tuoteideoita
- Tekoälyrakentajat, jotka testaavat työnkulkuja tai integroivat malleja
- Perustajat, jotka prototypoivat MVP:tä
- Kehittäjät, jotka tekevät sisäisiä työkaluja tai demoja
Nämä käyttäjät osaavat yleensä modernin web-stackin ja suosivat nopeita, siistejä ja ei-mielipideohjattuja työkaluja. Bolt.new ei ole visuaalinen sivustorakentaja tai opastettu tutoriaalialusta. Se olettaa, että tunnet Reactin ja täyden pään kehityksen perusteita ja poistaa asennusvaiheen kitkan.
Bolt.newin historia ja kehitys
Bolt.newin loivat StackBlitzin takana oleva tiimi, jonka perustivat vuonna 2017 Eric Simons ja Albert Pai. StackBlitz oli edelläkävijä WebContainerin kehittämisessä, selain-natiivissa WebAssembly-ajoympäristössä, joka mahdollistaa Node.js-ympäristön suoran ajon selaimessa. Tämä poisti tarpeen pilvipalvelimille ja paikallisille asennuksille modernien JavaScript-sovellusten kehityksessä.
Vuonna 2023 StackBlitz kohtasi taitekohdan. Kasvu hidastui, ja tiimi suuntasi radikaalimpaan kokeiluun: yhdistää WebContainerin ja tekoälyn, jotta luonnollisen kielen syötteellä voitaisiin generoida täysin toimivia sovelluksia.
Tästä kokeilusta syntyi Bolt.new, joka julkaistiin lokakuussa 2024. 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öjen eristyksen, nopeat asennukset, ja jaettavuuden – AI-rajapintaan, joka ymmärsi yleisiä kehittäjätarpeita.
Bolt.new merkitsi muutosta kehittäjätyökaluissa: koodin nopean kirjoittamisen sijaan kehittäjä voi nyt aloittaa jo toimivalla koodilla, joka on räätälöity hänen tarkoitukseensa.
Opas: Lisää Logto ja Bolt.New omaan kirjautumiskokemukseesi
Rekisteröi sovellus Logto-konsolissa
Tässä esimerkissä käytin Bolt.newia CMS-sovelluksen luomiseen. Ohitin kehotusvaiheen ja menin suoraan asiaan: pyysin agenttia rakentamaan CMS:n, jossa Logto toimii tunnistautumispalveluna.
Ohjeiden mukaan tarvittiin kaksi tärkeää tietoa:
Logto-päätepiste
Sovelluksen ID
Koska sovellus on yksisivuinen React-ohjelma, sovelluksen salaisuutta ei tarvita. Agentti hoiti loput: se asensi uusimman Logto React SDK:n, rakensi tunnistautumiskomponentit ja yhdisti ne.
Asennuksen viimeistelyyn avasin Logto Cloud Console -hallintapaneelin, loin uuden yksisivuisen sovelluksen ja kopioin Logto-päätepisteen ja Sovelluksen ID:n Bolt.newiin.
Sitten konfiguroin Uudelleenohjaus-URI:t ja Post sign-out redirect URI:t.
Huomioitava yksityiskohta: koska Bolt.new toimii selaimessa, eikä paikallisessa IDE:ssä, http://localhost:3000/
ei voi olla uudelleenohjaus-URI:nasi. Käytä Bolt.new-selaimen välilehdessä näkyvää esikatselu-URL:ää.
Muokkaa Logton valmista kirjautumiskokemusta
Logto tarjoaa muokattavan, valmiin kirjautumisprosessin, jota voi säätää Konsolissa. Aloita menemällä kohtaan Kirjautumiskokemus > Kirjaudu sisään & Luo tili ja valitse haluamasi kirjautumistavat (esim. sähköposti, käyttäjätunnus, puhelinnumero tai sosiaalinen kirjautuminen).
Kun olet konfiguroinut asetukset, kirjautumisflow ohjaa käyttäjän Logton omaan kirjautumissivuun valintojesi mukaisesti. Koko tunnistautuminen hoituu Logton toimesta, ja käyttäjä palaa sovellukseesi kirjautumisen jälkeen.
Luo leijuva kirjautumispaneeli tuotteesi päälle
Haluan mennä vielä pidemmälle ja rakentaa räätälöidymmän kirjautumiskokemuksen, kuten Perplexityssä. Erillisen sivulle ohjaamisen sijaan haluan leijuvan kirjautumispaneelin suoraan tuotteen UI:n päälle. Näin käyttäjä pysyy kontekstissa, samalla kun Logton tunnistautuminen toimii taustalla.
Käytän siis tätä kehotetta:
Haluan, että kirjautumissivun ulkoasu on parempi – yksinkertainen tausta ja kaksi painiketta: toinen “Kirjaudu sisään” ja toinen “Luo tili.” Kummankin pitäisi ohjata eri näkymiin, jotka Logto käsittelee. Käytä first-screen-kokemusta Logton dokumentaation mukaan https://docs.logto.io/end-user-flows/authentication-parameters/first-screen
Hyvä puoli tässä on, että kun painat Kirjaudu sisään, se vie suoraan kirjautumissivulle. Jos klikkaat Luo tili, avautuu suoraan tilinluontinäkymä.
Lisää sosiaalinen kirjautuminen
Voit antaa agentille Logton suoran kirjautumisen dokumentaation ja esimerkiksi kehotteen “lisää sosiaalinen kirjautumisflow.” Näin voit ohittaa Logton oletus-aloitussivun. Esimerkiksi, kun käyttäjä klikkaa Kirjaudu Googlella -painiketta, Google-tunnistautuminen käynnistyy välittömästi ja kirjautuminen on nopeampaa ja käyttäjäystävällisempää.
Logton tulossa oleva päivitys tuo tekoälyavusteisen tunnistautumisintegraation
Tämä on vain perusesimerkki. Logto rakentaa parhaillaan MCP-palvelimia, jotka toimivat suoraan omassa IDE:ssäsi – näin voit käyttää Logto Consolea ja Management API:a siirtymättä development-ympäristöstäsi pois.
Tällä uudistuksella voit:
- Luoda ja hallita käyttäjiä
- Tarkastella ja suodattaa lokeja
- Konfiguroida kirjautumis- ja rekisteröitymisprosessit
- Määrittää API-resursseja, oikeuksia ja rooleja
- Hallinnoida sovelluksia ja pääsyoikeuksia
- Ja paljon muuta
Yhdistämällä paikallistyökalut, tekoälyn ja Logton infrastruktuurin tunnistautuminen ei enää ole kivulias integraatiovaihe, vaan saumaton osa kehitysprosessiasi.