Kuinka erottaa käyttöliittymä + taustaohjelma Rails API: lla, Nuxt.js: lla ja Devise-JWT: llä

Olen ollut valtava Ruby on Rails -fani jo varhaisista ajoista lähtien, ja vaikka verkkomaailmassa on siitä lähtien tapahtunut paljon edistystä, Railsillä on edelleen paikkansa tässä maisemassa nopeaan sovellusten kehittämiseen puhtaalla, ylläpidettävällä koodilla.

Mutta verkkomaailma on muuttunut. Progressiivisten Web-sovellusten (ja niiden edessä olevien mobiilisovellusten) nousu on johtanut maailmaan, jossa käyttäjät haluavat vahvan vuorovaikutteisen käyttöliittymän verkkosovelluksista: napsauttamalla linkkejä ja lataamalla seuraavan käyttöliittymän sivun palvelimelta tuntuu siltä, ​​kuin ihmiset tekivät 2000-luvun.

Minusta on äskettäin tullut suuri Nuxt.js-fani, jota olen alkanut ajatella ”eturintaman kiskot”. Nuxt on sovelluskehityskehys, joka perustuu Webpackiin ja Vue.js. Sillä on taustakuva, mutta kokemukseni mukaan se todella loistaa, kun sitä käytetään generointitilassa rakentaa palvelimettomia sovelluksia, jotka voidaan ottaa käyttöön palveluissa, jotka yleensä tarjoavat staattista sisältöä, kuten GitHub Pages tai S3. Esimerkkejä palvelimettomista sovelluksista, jotka olen luonut Nuxtilla, ovat Maple ja yrityksen verkkosivustot, molemmat näkyvät GitHub-sivuilla.

Rails-maailmassa on juuri nyt paljon buzzia Rails-sovellusliittymän ympärillä: Rails-sovelluksen riisuttu versio, jota voidaan käyttää vain sovellusliittymien API-palvelinsovellusten rakentamiseen, jotka sitten liitetään haluamaasi käyttöliittymään: mobiilisovellukset tai selainpohjaiset sovellukset, kuten kuten ne, jotka on rakennettu Nuxtilla.

Mutta näyttää siltä, ​​että oppaista siitä, miten te itse teette tämän, varsinkin kun tarkastelet todennusta. Kuinka voit tarjota käyttöliittymän käyttöliittymässä, joka kirjaa käyttäjät käyttäjän taustakuvaan?

Joten tässä menee. Hieman pitkä blogin viesti, joka käy läpi vaihe vaiheelta prosessin, jolla rakennetaan yksinkertainen irrotettu web-sovellus Rails API: ssa ja Nuxtissa, ja rakennetaan uskomattoman perustason todennusjärjestelmä Devise-JWT: n avulla.

Huomaa: Tämä opas edellyttää kohtuullisen hyvää Rails-tietämystä, Vue.js: n läpäisevää tietoa ja ainakin perustietoa Dockerista.

Jos haluat nähdä valmiin sovelluksen tai jumiudut mihin tahansa kohtaan, voit viitata lähdekoodiin GitHubissa.

Osa 1: Kehitysympäristön luominen

Ennen koodauksen aloittamista tarvitsemme kehitysympäristön. Haluan käyttää siihen Dockeria, koska se pitää kaiken erillään. Tietokannan tuotannossa on mahdollisuuksia, kaikki taustaohjelmat ja käyttöliittymät toimivat eri paikoissa, joten aloitetaan, kun tarkoitamme jatkaa, jotta vältetään vahingossa tapahtuva kytkentä.

Ensin luodaan tyhjät Rails-sovellusliittymä- ja Nuxt-sovellukset:

Tämä edellyttää, että sinulla on kiskot ja vue-CLI: t asennettuna isäntäkoneellesi. Voit tietysti käyttää Docker-kuvia näihin CLI: iin, jos et.

Uudet kiskot ovat erilaisia, joten se ohittaa testien, toimintakaapelin ja jousen lisäämisen sekä estää sitä toimimasta kimppua isäntäkoneellasi (haluamme käyttää tätä Dockerin sisällä). Vastaavasti käytämme langan generointi-lukitus-merkintää yarn.lock-tiedoston luomiseen ilman, että paketteja tarvitsee asentaa.

Luo seuraavaksi pienet Docker-tiedostot käyttöliittymä- ja taustaohjelmaympäristöjen rakentamiseksi, ja docker-compose.yml kuvaamaan, kuinka ne ja tietokanta sopivat yhteen:

Tässä joitain huomioitavia asioita:

  • Jalokivet ja lankapaketit asennetaan asennettuihin tilavuuksiin. Tämän vuoksi sinun ei tarvitse rakentaa koko Docker-kuvaa uudelleen joka kerta, kun muutat Gemfilea tai package.json.
  • Tämä olettaa, että isäntätunnuksesi on 1001 ja luo käyttäjän jokaisessa säilössä, jolla on sama käyttäjätunnus. Jos käyttäjätunnuksesi on erilainen, voit asettaa UID-ympäristömuuttujan ennen rakennusta ja se välittää sen argina rakennukselle.
  • Haluat todennäköisesti lisätä node_modules käyttöliittymän .dockerignore & .gitignore ja myyjä / nippu, loki, tmp, taustakuvaksi. Tällä tavalla niitä ei kopioida rakennusaikana.

Nyt on aika rakentaa kaikki:

Nipun ja langan suorittaminen rakennuksen jälkeen johtuu siitä, että docker-compose-tiedosto liittää isäntätasot astioihin, joten sinun on asennettava paketit isäntätaltioihin samoin kuin kuvat, joita säiliöiden luomiseen käytetään.

Muutama viimeinen asia, ennen kuin voit tuoda tämän ympäristön esiin:

  1. Muokkaa tietokanta.symmeää asettaaksesi isäntänimen arvoksi 'db' ja käyttäjän 'postgres'.
  2. Muokkaa package.json -sovellusta, kun haluat muuttaa dev-komentosarjan tilalle HOST = 0.0.0.0 nuxt (joten se näkyy isäntäkoneellasi).
  3. Suorita 'docker-compose run backend rails db: create' luodaksesi kehitystietokanta.

Kaikki hyvin, sinun pitäisi nyt pystyä kirjoittamaan:

telakointiasema

Ja ympäristösi (tietokanta, taustaohjelma ja käyttöliittymä) spin up. Voit tarkistaa verkkoliittymät: 8080 ja: 3000, ja sinun pitäisi nähdä jokaiselle oletussivut.

Käyttöliittymä on oikeastaan ​​webpack-dev-palvelin, johon et ehkä ole tottunut, jos olet vanhan koulun Rails-koodaaja. Käyttöliittymään tekemäsi muutokset heijastuvat heti selaimeesi ilman, että sinun tarvitsee ladata niitä uudelleen. Tämä on jännittävä muutos!

Oikein! Sitoutu projektisi sitoutumaan versionhallintaan ja ala sitten rakentaa joitain juttuja!

Osa 2: Saa heidän keskustelemaan keskenään

Rakennetaan ensimmäinen sovellusliittymämenetelmämme. Aiomme vain luoda resurssin nimeltä “esimerkki”, jolla on nimi ja väri, ja luoda niistä 3 testausta varten.

Muokkaa reittejä.rb siirtääksesi uuden reitin api-laajuuteen ja lisäämällä yksinkertainen hakemistomenetelmä esimerkkihallintaan:

Varmista, että ApplicationController kertoo kaikille lapsilleen, että he voivat vastata JSON-pyyntöihin (tämä on välttämätöntä joillekin jalokiville, kuten Devise):

[Muokkaa: Saatat joutua odottamaan, kunnes Devise asennetaan, jotta se tehdään, koska näyttää siltä, ​​että riippuvuusongelma ilmenee, jos teet sen niin aikaisin. Kerro minulle, jos sinulla on ideoita, miten esitellä nämä aikaisin.]

Nyt sinun pitäisi voida käydä osoitteessa http: // localhost: 8080 / api / esimerkkejä nähdäksesi sovellusliittymäsi toiminnassa:

Nyt hauskanpuolena: kiinnitämme etuosan takaosaan. Mutta ensin, älä unohda sitoutua versionhallintaan!

Aion käyttää keskustelua API: n kanssa ja vahvistaa käyttöliittymäpaketiksi. (Voit käyttää HTML: ää ja CSS: ää Vuessa, mutta on myös syvempiä käyttöliittymäintegraatioita: vuetify on materiaalisuunnitteluun perustuva käyttöliittymäpaketti.) Molemmissa on integroinnit Nuxt: n kanssa, jotka ovat saatavilla yhteisössä, joten asennetaan:

docker-compose run frontend lanka lisää @ nuxtjs / axios @ nuxtjs / vuetify

ja lisää Nuxt-asetustiedostoon:

(On selvää, että tuotannossa haluat siirtää aksiokonfiguraatiot ympäristöön, mutta kova koodata on nyt hyvä.)

Korvataan nyt asettelut / default.vue ja sivut / index.vue, jotka Nuxt on meille luonut:

Default.vue on vakioarvioitu asettelu, jonka työkalurivi sisältää linkin kotisivulle. Linkin nuxt-vaihtoehto kertoo sen käyttävän Nuxtin reititintä linkin käsittelemiseen sen sijaan, että se toimittaisi selaimessa.

index.vue on hiukan monimutkaisempi: kytkettyä () menetelmää kutsutaan, kun malli alustetaan, ja se puolestaan ​​kutsuu updateExamples (): ta, joka käyttää axios-integraatiota asettaaksesi esimerkit muuttujaksi API-menetelmän tuloksiin. sisältää reaktiivisen laattasarjan, joka täytetään automaattisesti esimerkkien perusteella (joten se on aluksi tyhjä ja täyttää sitten, kun API-menetelmä on valmis).

Mutta jos yrität käydä tässä nyt, saat valitettavan virheen:

JavaScriptin ei sallita kysyä muiden verkkotunnusten päätepisteitä, paitsi jos kyseiset verkkotunnukset ovat asettaneet CORS-otsikot asianmukaisesti. Onneksi Rails API on ennustanut, että haluamme sen!

Poista Gemfile-rivin rivirivit ja kommentoi koodia cors.rb, muuttamalla esimerkki.com localhost: 3000 (tai *). Asenna helmi:

docker-compose run -u root backend -paketti

ja käynnistä telakointikonttorit uudelleen napsauttamalla Ctrl-C käynnissä oleviin astioihin ja tekemällä telakointiasema uudelleen. Sormet ristissä nyt näet jotain tällaista:

Hyvä! Käyttöliittymäsovelluksesi näyttää tietoja suoraan taustalta! Kokeile lisätä uusi esimerkki tietokantaan (esim. 'Qux / syaani') varmistaaksesi, että käyttöliittymäsi todella hakee tietoja taustalta.

Sitoudu versionhallintaan ja hanki kahvi. Seuraavaksi on todennus ja se on vähän hankalampi!

Osa 3: Todennus Devise-JWT: llä

Devise-JWT on jatkoa suositulle Rails-todennuskirjastoon Devise lisätäkseen tukea JSON Web Tokenille, joka on suosittu kertakirjautumisen toteutus. Jos käytät Googlea, löydät paljon ihmisiä sanomalla, että JWT: n lisääminen Deviseun on helppoa, mutta et, jos haluat hyödyntää kaikkia Devise-ominaisuuksia kunnolla, etkä jos haluat kirjautua ulos (ts. tunnus virheellinen).

Lisää ensin 'devise' ja 'devise-jwt' Gemfilesi ja suorita:

docker-compose run -u root backend -paketti

Sitten haluat seurata ohjeita asentaaksesi Devise. Koska käytämme sovellusliittymää, sinun ei tarvitse huolehtia liikaa näyttökerroksen asioista. Tein juuri:

> kiskot g devise: asenna
> kiskot g devise user
> kiskot db: siirtyä

Devise-JWT: llä ei ole asennusohjelmaa, mutta sillä on hyvät asennusohjeet. Sinun on päätettävä, kuinka haluat tehdä kelvottomia merkkejä. Etsin mustan listan vaihtoehtoa. Esimerkiksi:

> kiskot g malli jwt_blacklist jti: merkkijono: hakemisto exp: päivämäärä

Muokkaa siirtoa lisätäksesi nolla: vääriä ja poista aikaleimat ja lisää malliin ”sisällytä Devise :: JWT :: RevocationStrategies :: Blacklist”.

JWT: n käyttöönotto edellyttää, että jwt_secret lisätään secrets.yml-tiedostoon (voit luoda uusia salaisuuksia “rails secret” -sivustolla) ja lisätä tämän devise.rb:

sinun on päivitettävä käyttömallisi devise-rivi lisätäksesi:

: jwt_authenticatable, jwt_revocation_strategy: JwtBlacklist

Suorita “rails db: migrate” uudelleen luodaksesi mustan listan.

Siirrä devise_for -reitti reitillä route.rb omaan: api-laajuuteen ja käynnistä säilytysastiat uudelleen.

Sinun pitäisi nyt pystyä testaamaan sovellusliittymäsi jotain YARC: n kaltaista. Luo ensin käyttäjä Rails-konsoliin:

> kiskot c
>> Luo käyttäjä! (Sähköposti: 'testi@esimerkki.com', salasana: 'salasana')

Yritä sitten luoda POST-viesti / api / users / sign_in -päätepisteeseen, joka näyttää tältä:

Ja valtuutusotsikon pitäisi tulla takaisin onnistuneen kirjautumisen yhteydessä:

Mahtava. Olemme tulossa sinne, lupaan!

Haluamme käyttää Nuxtin omaa autentikirjastoa, joka odottaa JWT: n palauttavan kirjautumispyynnön runkoon, ja haluaa myös tehdä erillisen sovellusliittymäpyynnön saadaksesi selville käyttäjän tiedot, kuten hänen profiilitiedot. Joten ohitetaan Devise-istunnonohjain.

Muuta suunnittelukokoonpanoa route.rb: ssä sanoaksesi, että olet ohittanut ohjaimen, ja lisää "nykyinen" päätepiste:

Lisäämme sitten kyseinen ohjaintiedosto ja kaksi näkymää. Jos käytät jbuilderia täällä, jbuilder on purettava Gemfilessa, suorita “docker-compose run -u root backend -paketti” ja käynnistä säilytysastiat uudelleen.

Kokeile nyt näitä menetelmiä. Tee aikaisempi POST ja tällä kertaa tunnuksen tulee palata vastauskappaleeseen samoin kuin otsikot.

Kokeile tehdä GET / api / users / nykyiseen päätepisteeseen kyseisellä ”Authorization: Bearer $ token” -otsakkeella ja katso, voitko palauttaa käyttäjän tunnuksen ja sähköpostin.

Woop! Viimeinen asia: Tehdään EsimerkkejäKontrollerista todennus. Lisää tähän ohjaimeen:

ennen_toimintaa: todenna_käyttäjä!

Jos palaat takaisin käyttöliittymäsovellukseen, sinun pitäisi nyt nähdä, että se epäonnistuu 401: n luvattoman virheen vuoksi. Aika lisätä todennus käyttöliittymään!

Asenna Nuxt auth -kirjasto:

Käynnistä säilytysastiat uudelleen, ennen kuin jatkat tämän uuden kokoonpanon käyttöönottoa.

Luodaan käyttäjäsivulle login.vue kirjautumis- / uloskirjautumissäätimillä käyttäjän nykyisen tilan perusteella:

Täällä tapahtuu melko paljon, mutta sen pitäisi olla melko helppoa treenata. Sisäänkirjautumismenetelmä () kutsuu vastaavan menetelmän todennuskirjastoon, ohittaen sopivan JSON-objektin, jota Devise odottaa. Jos tapahtuu virhe, se asettaa virheen, jota tarkkailee.

Ja lopuksi, haluat, että käyttäjiä ohjataan uudelleen, jos he eivät ole kirjautuneena sisään. Auth middleware ohjaa oletuksena käyttäjät login.vue-sivulle, jos he eivät ole kirjautuneena sisään, joten meidän on vain sallittava auth middleware hakemistossa. .vue:

väliohjelmisto: ['auth'],

Voit myös lisätä linkin / login työkalupalkkiin oletus.vue. Se on sinusta kiinni.

Kokeile nyt käyttöliittymäsovellusta uudelleen!

Uudelleenohjattu kirjautumissivulle kirjautuneena ulosMutta näen esimerkkejäni sisäänkirjautumisen yhteydessä!

Tässä jätän sinut! Se on vasta autenttisen integroinnin alku, mutta toivon, että näette, ettei meneminen vaadi paljon työtä. Haluat lisätä rekisteröinnin ja tehdä muun muassa varmistaa, että vanhentuneet tunnusmerkit eivät ole etusijalla kirjautumistietoihin nähden. [Muokkaa: Auth-moduulin ylläpitäjät ovat sopineet, että vanhentuneita merkkejä ei pitäisi lähettää sisäänkirjautumispyynnön avulla, ja @ nuxtjs / auth 4.2.0 korjaa ongelman.] Auth-dokumentaatio ja demosovellukset ovat hyvä paikka aloittaa.

Jos tästä artikkelista on ollut apua, jaa se ympäri, heittäkää minulle muutama claps tai kerro, kuinka pärjäät kommentteissa.

Päivitys: Voit nyt lukea tämän seurannan siitä, kuinka asentaa Heroku!