Kuidas eraldada esikülge + taustaprogrammi Rails API, Nuxt.js ja Devise-JWT abil

Olen juba esimestest päevadest alates olnud Ruby on Rails'i suur fänn ja ehkki veebimaailm on sellest ajast alates palju edasi liikunud, on Railsil sellel maastikul endiselt koht kiire, hooldatava koodiga rakenduste kiireks arendamiseks.

Kuid veebimaailm on muutunud. Progressiivsete veebirakenduste (ja nende ees olevate mobiilirakenduste) esiletõus on viinud maailma, kus kasutajad soovivad oma veebirakendustelt tugevat interaktiivset liidest: linkidele klõpsamisel ja kasutajaliidese järgmise lehe serverist allalaadimisel on tunne, nagu inimesed seda tegid 2000ndad.

Olen viimasel ajal saanud suureks Nuxt.js fänniks, mida olen hakanud mõtlema kui „Rons of frontend”. Nuxt on rakenduste arendamise raamistik, mis põhineb Webpackil ja Vue.js. Sellel on küll taustaprogramm, kuid minu kogemuse kohaselt paistab see tõesti säravana, kui seda kasutatakse genereerimisrežiimis serverivabade rakenduste loomiseks, mida saab kasutada teenustes, mis tavaliselt pakuvad staatilist sisu, näiteks GitHub Pages või S3. Näited serverivabadest rakendustest, mille olen Nuxt abil ehitanud, hõlmavad Maple ja minu ettevõtte veebisait, mõlemad töötavad GitHubi lehtedel.

Praegu on Rails-maailmas palju buzzi Rails API ümber: Rails-i eemaldatud versioon, mida saab kasutada ainult API-liidesega serverirakenduste ehitamiseks, mis ühendavad seejärel kõik teile meeldivad esiküljed: mobiilirakendused või brauseripõhised rakendused, nt nagu need, mis on ehitatud koos Nuxt'iga.

Kuid näib, et puuduvad juhised selle kohta, kuidas te seda tegelikult teeksite, eriti kui kaalute autentimist. Kuidas saate kasutajaliidesesse sisselogimisliidese pakkuda, mis logib teie kasutajad taustaprogrammi?

Nii et siin läheb. Mõnevõrra pikk blogipostitus, mis läbib samm-sammult Rails API ja Nuxt lihtsa lahtiühendatud veebirakenduse loomise ning Devise-JWT abil uskumatult lihtsa autentimissüsteemi loomise protsessi.

Märkus. Selles juhendis eeldatakse mõistlikult häid teadmisi Railsist, läbitavaid teadmisi Vue.js-st ja vähemalt põhioskusi Dockerist.

Kui soovite näha valmis rakendust või takerdute mis tahes kohas, võite viidata GitHubi lähtekoodile.

1. osa: arengukeskkonna loomine

Enne kodeerimise alustamist vajame arenduskeskkonda. Mulle meeldib selleks kasutada Dockerit, kuna see hoiab kõik lahus. Võimalik, et teie andmebaas toodetakse, nii taustprogramm kui ka kasutajaliides töötab kõik erinevates kohtades, nii et alustame juhusliku ühendamise vältimiseks seda, mida kavatseme jätkata.

Kõigepealt loogem tühjad Rails API ja Nuxt rakendused:

See eeldab, et teie masinasse on installitud rööpad ja vue CLI-d. Muidugi võite nende CLI-de jaoks kasutada Dockeri pilte, kui te seda ei tee.

Uute rööbaste mitmesugused valikud panevad testide, tegevuskaabli ja vedru lisamise vahele ning lisaks sellele ei saa see teie hostmasinas kimpu käitada (tahame seda Dockeri sees käivitada). Samamoodi kasutame faili yarn.lock genereerimiseks lõnga genereeri-lukusta-sisestust ilma pakette installimata.

Järgmisena looge väikesed dokkerfailid, et ehitada ette- ja taustkeskkonnad, ning docker-compose.yml, et kirjeldada, kuidas need ja andmebaas omavahel sobivad:

Siin on mõned märkused:

  • Vääriskivid ja lõngapakid paigaldatakse monteeritud kogustesse. See ei võimalda teil kogu Dockeri pilti iga kord uuesti üles ehitada, kui muudate Gemfile või package.json.
  • Eeldusel, et teie hostinime ID on 1001 ja luuakse igas konteineris sama kasutaja ID-ga kasutaja. Kui teie kasutajatunnus on erinev, saate enne ehitamist seada keskkonnamuutuja UID ja see edastatakse ehitamisele argina.
  • Tõenäoliselt soovite lisada node_modules kasutajaliidese .dockerignore & .gitignore ja hankija / komplekti, logi, tmp, taustaprogrammidesse. Nii ei kopeerita neid ehituse ajal.

Nüüd on aeg ehitada kõik:

Pärast ehitamist tuleb kimbu ja lõnga käivitada seetõttu, et doki koostamise fail ühendab teie hostimahud konteineritesse, nii et peate installima nii paketid hostimahtudesse kui ka piltidena, mida konteinerite loomiseks kasutatakse.

Paar viimast asja enne, kui saate selle keskkonna üles tuua:

  1. Muutke andmebaas.yml, et hostinimi oleks „db” ja kasutajal „postgres”.
  2. Redigeerige package.json, et muuta skripti „dev” väärtuseks „HOST = 0.0.0.0 nuxt” (nii et see on teie hostimasinas nähtav).
  3. Arendusandmebaasi loomiseks käivitage 'docker-compose run backend rööpad db: looge'.

Kõik hästi, peaksite nüüd saama kirjutada:

dokkija-komponeerima

Ja teie keskkond (andmebaas, taustaprogramm ja kasutajaliides) keerleb üles. Veebiliideseid saate kontrollida: 8080 ja: 3000 ning te peaksite nägema nende kõigi vaikelehti.

Esipaneel on tegelikult webpack-dev-server, millega te pole võib-olla harjunud, kui olete vana kooli Rails-kooder. Kasutajaliideses tehtud muudatused kajastuvad teie brauseris kohe, ilma et peaksite uuesti laadima. See on põnev vaheldus!

Õige! Pange oma projekt pühenduma versioonikontrollile ja alustame siis mõne asja ehitamist!

2. osa: Pange nad omavahel rääkima

Ehitagem meie esimene API-meetod. Loome lihtsalt nime ja värviga ressursi nimega “näide” ning loome neist 3 testimiseks.

Redigeeri route.rb, et teisaldada uus marsruut api ulatusse ja lisada näidete kontrollerile lihtne indekseerimise meetod:

Veenduge, et teie ApplicationController teataks kõigile lastele, et nad saaksid JSON-i päringutele vastata (see on vajalik mõne kalliskive jaoks, näiteks Devise):

[Redigeerimine: võib-olla peate selle tegemiseks ootama, kuni Devise installitakse, kuna tundub, et kui teete seda nii varakult, on sõltuvusprobleem. Andke teada, kui teil on ideid selle tutvustamiseks varakult.]

Nüüd peaks teil kohe olema võimalus külastada saiti http: // localhost: 8080 / api / näited, et näha oma API-t toimimas:

Nüüd lõbusamaks osaks: haakime esipaneeli tagakülje külge. Kuid kõigepealt ärge unustage pühenduda versioonikontrollile!

Kavatseme API-ga rääkida ja UI-komplektina kasutada aksioose. (Vue'is saate kasutada HTML-i ja CSS-i, kuid on ka sügavamaid kasutajaliidese integratsioone: vuetify on materjali kujundamisel põhinev kasutajaliidese komplekt.) Mõlemal neist on integratsioon Nuxt-iga, mis on kogukonnas saadaval, nii et installime need:

doki-komponeerimise käitamisriba lõng lisage @ nuxtjs / axios @ nuxtjs / vuetify

ja lisage Nuxt-konfiguratsioonifaili:

(Ilmselt soovite tootmises aksiooside konfiguratsiooni keskkonda viia, kuid praegu on kõva kood kodeerida.)

Asendame nüüd Nuxt meie jaoks loodud küljendused / default.vue ja pages / index.vue:

Vaikimisi.vue on tavapärane vuetify-paigutus, mille tööriistariba sisaldab linki kodulehele. Lingi nuxt suvand käsib lingi käsitsemiseks kasutada Nuxt ruuterit, selle asemel et seda brauseris teha.

index.vue on natuke keerukam: ühendatud () meetod kutsutakse välja, kui mall alguse tehakse, ja see kutsub omakorda välja updateExamples (), mis kasutab axios integratsiooni, et seada näited muutujaks API meetodi tulemustele. sisaldab reaktiivset paanide komplekti, mis täidetakse automaatselt vastavalt näites toodud andmetele (nii et see on alguses tühi ja täidetakse siis, kui API-meetod lõpule jõuab).

Kuid kui proovite seda nüüd külastada, saate veatu vea:

JavaScriptil ei ole lubatud teiste domeenide lõpp-punktidest päringuid teha, välja arvatud juhul, kui need domeenid määravad CORS-i päised sobivalt. Õnneks on Rails API ennustanud, et me tahame seda!

Tühjendage Gemfile'is rida „rack-cors” ja tühistage kood cors.rb-s, muutes saidil example.com kohalikuhost: 3000 (või *). Paigaldage kalliskivi:

docker-compose run -u root taustaprogrammi kimp

ja taaskäivitage dokkimismahutid, vajutades töötavatele klahvidele Ctrl-C ja tehes uuesti dokkide komponeerimise. Nüüd on sõrmed ületatud, näete midagi sellist:

Woohoo! Teie kasutajaliidese rakendus kuvab andmeid otse taustaprogrammist! Proovige andmebaasi lisada uus näide (nt „qux / tsüaan”), et kinnitada, et teie esikülg tõepoolest hangib andmeid teie taustaprogrammist.

Pühenduge versioonikontrollile ja saate endale kohvi. Järgmine samm on autentimine ja see on natuke keerulisem!

3. osa: autentimine Devise-JWT abil

Devise-JWT on populaarse Rails autentimiskogu teegi laiendus Devise, et lisada tugi JSON Web Tokenile, mis on populaarne ühekordse sisselogimise rakendus. Kui asute Google'i ümber, leiate palju inimesi, kes ütlevad, et JWT on lihtne enda väljatöötamiseks lisada, kuid mitte siis, kui soovite kõiki Devise funktsioone õigesti kasutada, mitte aga siis, kui soovite välja logida (st luua märk kehtetu).

Esiteks lisage oma Gemfile'ile "devise" ja "devise-jwt" ja käivitage:

docker-compose run -u root taustaprogrammi kimp

Siis soovite Devise installimiseks järgida juhiseid. Kuna kasutame API-d, ei pea te vaatamiskihi värvide pärast liiga palju muretsema. Ma just tegin:

> rööpad g devise: installige
> rööpad g devise kasutaja
> rööpad db: rändavad

Devise-JWT-l pole installijat, kuid sellel on head paigaldusjuhised. Peate otsustama, kuidas soovite sümboleid kehtetuks muuta. Otsisin musta nimekirja varianti. Näiteks:

> rööpad g mudel jwt_blacklist jti: string: index exp: datetime

Muutke migratsiooni, et lisada null: false, eemaldage ajatemplid ja lisage mudelisse „kaas Devise :: JWT :: RevocationStrategies :: Blacklist“.

JWT lubamiseks peate faili secrets.yml lisama jwt_secret (saate luua uusi saladusi jaotisega “rööbaste salajane”) ja lisada see saidile devise.rb:

lisamiseks peate värskendama oma kasutajamudelis olevat loorea:

: jwt_authenticatable, jwt_revocation_strategy: JwtBlacklist

Musta nimekirja koostamiseks käivitage uuesti „rööpad db: migreerige”.

Liigutage marsruudil devise_for marsruudil rr.rb oma: api ulatusse ja taaskäivitage oma konteinerid.

Nüüd peaksite saama oma API-d testida, kasutades midagi sellist nagu YARC. Esiteks looge ise Rails-konsoolis kasutaja:

> rööpad c
>> Kasutajaloome! (E-post: 'test@example.com', parool: 'parool')

Seejärel proovige luua POST-sõnum oma lõpp-punktile / api / users / sign_in, mis näeb välja järgmine:

Ja peaksite nägema, et volituse päis naaseb eduka sisselogimisega:

Vinge. Me jõuame sinna, ma luban!

Soovime kasutada Nuxi enda autentimiskogu, mis eeldab, et JWT tagastatakse sisselogimistaotluse sisus, ning soovib teha ka eraldi API-päringu, et saada teada kasutaja üksikasjad, näiteks tema profiiliteave. Alustame siis Devise seansikontrolleri alistumist.

Muutke marsruudil rr.rb asuvat konfiguratsiooni, et öelda, et olete kontrolleri ületanud, ja lisage täiendav „praegune” lõpp-punkt:

Seejärel lisage see kontrolleri fail ja kaks vaadet. Kui kasutate siin jbuilderit, peate Gemfile'is tühistama jbuilderi, käivitama „docker-compose run -u root backend kimp“ ja taaskäivitama oma mahutid.

Proovige nüüd neid meetodeid. Tehke varasemat POSTi ja seekord peaks sümbol tagasi jõudma nii reageerimiskehasse kui ka päistesse.

Proovige teha GET väljale / api / users / praegusesse lõpp-punkti koos selle päisega „Autoriseerimine: kandja $ token” ja vaadake, kas saate kasutaja ID ja e-posti tagasi.

Woop! Viimane asi: pangem näidetController autentimist nõudma. Lisage sellele kontrollerile:

enne_toimingut: autentima_kasutaja!

Kui naasete kasutajaliidese rakenduse juurde, peaksite nüüd nägema, et see tõrkub 401 Volitamata tõrke tõttu. Aeg lisada kasutajaliidesele autentimine!

Installige Nuxt autentimiskogu:

Enne uue konfiguratsiooni lubamist jätkake konteinerite taaskäivitamist.

Loome kasutaja lehel login.vue sisselogimise / väljalogimise juhtelementidega, mis põhinevad kasutaja praegusel olekul:

Siin toimub üsna palju, kuid selle treenimine peaks olema mõistlikult lihtne. Sisselogimismeetod () kutsub samaväärse meetodi autentimiskogus, edastades vastava JSON-objekti, mida Devise ootab. Kui ilmneb tõrge, määrab see vea, mida jälgib .

Ja lõpuks, soovite, et kasutajad suunataks ümber, kui nad pole sisse logitud. Vaikimisi suunab autentne vahetarkvara kasutajad login.vue, kui nad pole sisse logitud, nii et me peame lihtsalt lubama indeksi autentimise vahevara .vue:

vahevara: ['auth'],

Võib-olla soovite lisada linki vaikimisi.vue tööriistaribale / sisse logida. See on sinu teha.

Proovige nüüd uuesti oma kasutajaliidese rakendust!

Välja logimisel suunatakse ümber sisselogimisleheleKuid näen oma sisselogimisel oma näiteid!

Siin ma jätan teid! See on tõesti alles autentimisintegratsiooni algus, kuid ma loodan, et te näete, et selle alustamiseks pole vaja suurt tööd. Soovite lisada registreerimise ja toimige näiteks järgmiselt: veenduge, et aegunud märgid ei oleks sisselogimisel ülimuslikud mandaadi suhtes. [Redigeerimine: autentimismooduli hooldajad on kokku leppinud, et aegunud märke ei tohiks sisselogimistaotlusega saata, ja @ nuxtjs / auth 4.2.0 parandab probleemi.] Autentimisdokumentatsioon ja demorakendused on hea koht alustamiseks.

Kui sellest artiklist on abi olnud, jagage seda, viskage mulle mõni klamber või andke mulle kommentaarides teada, kuidas teil läheb.

Värskendus: nüüd saate lugeda seda järge selle kohta, kuidas Herokusse juurutada!