Fórum Root.cz

Hlavní témata => Vývoj => Téma založeno: PeterS 29. 04. 2017, 15:46:46

Název: React v .NET projekte
Přispěvatel: PeterS 29. 04. 2017, 15:46:46
Ahojte, popri skole pracujem na svojom projekte, na ktorom som sa ucil ASP.NET MVC, a rad by som toto vzdelavanie rozsiril o React. Visual Studio nema prave najlepsiu podporu pre pisanie UI, a preto som trocha prechadzal fora, a narazil som na spravu ze UI chalan robi v Reacte ako samostatny projekt, napr. vo WebStorme. Cele toto studium realizujem na nejakom informacnom systeme ktory som si vymyslel, a planoval som priamo do View zakomponovat React, no po tejto informacii som zmateny ako to teda funguje v praxy. Moje otazky teda su:
1. Ti ktory vyuzivate React, pouzivate ho teda priamo vo View, alebo tiez vytvarate oddelene projekty kde UI robite zvlast.
2. Tiez ako je to s bezpecnostou? Kedze som v takychto veciach neskuseny, staci spravit v .NET Api, a na serveri nastavit SSL certifikat? Budem moct cez to riesit aj prihlasovanie uzivatelov? Pretoze taky mam momentelne plan ak mi ho niekto nevyvrati. Spravit web api v .net core ako radil chalan, a UI zvlast.
3. Ak pouzivate React priamo vo view .NETu, ako strukturujete projekt, a ktory react pouzivate? Pretoze narazil som aj na React urceny cisto pre .NET a zakomponovanie do MC. Ide mi len o to, ze pisat vo visualku HTML kod v js suboroch musi byt za trest, pokial neexistuje nejaky tool ktory by riesil tu syntax.
Dakujem za odpovede.
Název: Re:React v .NET projekte
Přispěvatel: gll 29. 04. 2017, 20:37:51
asi bych nejdřív zkusil něco o tom přečíst.

třeba tohle:

https://reactjs.net/getting-started/tutorial.html
Název: Re:React v .NET projekte
Přispěvatel: PeterS 29. 04. 2017, 22:27:52
to som nasiel, ale niektory vyuzivaju cisty ReactJS, takze fakt neviem ktory zvolit, nevyznam sa v tom ... cakal som nejaku radu z praxe.
Název: Re:React v .NET projekte
Přispěvatel: pepe 01. 05. 2017, 10:52:02
Asi pouzit to co mistr predemnou poslal, udelat si api a zkouset, vic googlit mene se ptat, servirovat :'( si to primo dotnetem
Název: Re:React v .NET projekte
Přispěvatel: PeterS 01. 05. 2017, 18:11:53
Chcel som pocut nazory ludi ktory to pouzli v praxy ... odpovede typu "vygoogli si" maju nulovu hodnotu, a touto logikou by ziadne fora nemuseli existovat

btw. googlil som a nasiel som obe moznosti, lenze to mi nic nepovie o tom co sa realne (castejsie) vyuziva
Název: Re:React v .NET projekte
Přispěvatel: gll 01. 05. 2017, 18:32:47
Chcel som pocut nazory ludi ktory to pouzli v praxy ... odpovede typu "vygoogli si" maju nulovu hodnotu, a touto logikou by ziadne fora nemuseli existovat

btw. googlil som a nasiel som obe moznosti, lenze to mi nic nepovie o tom co sa realne (castejsie) vyuziva

Já v tom tutoriálu vidím jen jeden způsob. O žádném odděleném projektu ve webstormu se tam nepíše.
Název: Re:React v .NET projekte
Přispěvatel: PeterS 01. 05. 2017, 20:03:30
lenze ja nehovorim o tomto tutoriale ale vseobecne, ten react.net ma nejaku funkcionalitu vraj obmedzenu, ale neviem ako to je realne .. ci su to len nejake drobnosti alebo nieco co treba zvazit
Název: Re:React v .NET projekte
Přispěvatel: TJK 03. 05. 2017, 16:50:06
Pouzivam podobne technologie v architekture stavajiciho projektu.

1) backend v .NET - ciste backend web service - dava API - ted jsem v Linuxu a developim v Jetbrains Rider - early access program zadarmo, kdysi jsem vyvijel ve Visual Studiu.

2) frontend v HTML Javascript - cisty frontend klient, data si natahne pres API z backendu pres AJAX. Javascript framework pouzivam Aurelia - coz je ale srovnatelne s React. Editor pouzivam Jetbrains WebStorm (je pro Windows i Linux - placene, pokud jde o open source projekt, lze pozadat o licenci zdarma).

V projektu mam zdrojove kody .NETu a HTML Javascriptu oddelene v ruznych adresarich.

Pokud nejsi jeste definitivne rozhodnuty pro React a umis anglicky, stoji za shlednuti prednaska Roba Eisenberga - Choosing Javascript Framework https://www.youtube.com/watch?v=6I_GwgoGm1w
Kdo nema cas, tak shrnuti: doporucuje jako Javascript framework spise Aurelia (on je autorem) nebo Ember, pred React a Angular (Angular 2). Proc? - viz prednaska.
Název: Re:React v .NET projekte
Přispěvatel: Mirek Prýmek 04. 05. 2017, 15:38:52
lenze ja nehovorim o tomto tutoriale ale vseobecne
Všeobecně máš s jakýmkoliv backendem a jakýmkoliv frontendem několik možností, jak to celé řešit. V principu se liší v tom, kolik funkcionality/logiky/kódu máš na BE a kolik na FE:

1. BE řeší routování, servírování jednotlivých stránek a částečně i templaty - na stránku jenom vložíš pár Reactem (nebo libovolným jiným FE nástrojem) vykreslovaných prvků
2. BE řeší routování, servírování jednotlivých stránek, ale stránka se kompletně vykresluje frontendovým nástrojem
3. SPA = BE jenom servíruje data (nějaké HTTP nebo websocket API), vše ostatní se děje na frontendu

Tohle jsou takové základní typy, mezi nimi je spoustu odstínů šedi podle toho, jaké části aplikace umístíš kam. Obecná rada, kam co máš dát, není. To záleží na tobě, jestli chceš víc psát v backendovém frameworku (ve tvém případě .NET), nebo ve frontendovém (React, Vue.js, klidně i Elm... cokoli). Všechny tyhle možnosti dávají v nějaké situaci smysl a každá má svoje výhody a nevýhody. Je to designerské rozhodnutí, žádný silver bullet není.
Název: Re:React v .NET projekte
Přispěvatel: PeterS 04. 05. 2017, 19:04:10
Skor by som asi uprednostnil verziu s WEB API ka strane servera a klien samotny SPA. Otazka je ci je mozem informacie o prihlasenom uzivatelovi ukladat napr. do localStorage/sesionStorage? Pretoze sme to vacsinou ukladali uzivatela do Session v Controlleri.
Název: Re:React v .NET projekte
Přispěvatel: Mirek Prýmek 04. 05. 2017, 20:20:43
Skor by som asi uprednostnil verziu s WEB API ka strane servera a klien samotny SPA. Otazka je ci je mozem informacie o prihlasenom uzivatelovi ukladat napr. do localStorage/sesionStorage? Pretoze sme to vacsinou ukladali uzivatela do Session v Controlleri.
Dobře udělaná SPA je asi nejlepší pro UX (nemusí se načítat pořád dokola ta stejná data), ale zároveň je to asi nejtěžší varianta. K té otázce: hlavně musíš vycházet z toho, že klientovi nesmíš v ničem věřit. Tj. tak jako tak nemůžeš od klienta převzít informaci "jsem uživatel Pepa". Musíš ho nechat se autorizovat, po úspěšné autorizaci mu předat třeba nějaký token a při každém dotazu na API pak ověřovat, že daný token je platný a že uživatel, kterému patří, tuhle operaci smí udělat.

Existují i způsoby komunikace, kde uživatele ověříš jednou při otevření komunikačního kanálu a pak už máš otevřený kanál svázaný s uživatelem, takže token nepotřebuješ. Jde to takhle třeba u websocketů, ale jestli to takhle umí udělat .NET, to ti neřeknu :)

Prostě, u téhle varianty musíš dost zapojit mozek, abys to udělal dobře. Pro začátečníka to asi není úplně vhodná varianta, pokud nepracuješ s frameworkem, který to všechno vyřeší za tebe...
Název: Re:React v .NET projekte
Přispěvatel: PeterS 04. 05. 2017, 20:30:29
Urcite sa s tym rad pohram, a o tej autorizacii tokenom som tiez uvazoval. Tu komunikaciu by som si predstavoval asi v takejto podobe:
Uzivatel posle HTTP pozadavek na server s menom a heslom, kde mu v pripade validnych udajov pride obratom token. Token sa ulozi niekde do localStorage, a pri kazdom poziadavku na server, sa prida ako parameter aj dany token. Pri odhlaseni sa vycisti aj localStorage.

Mohlo by to takto byt? Len neviem ako overovat casovu platnost tokenu. Mam ho ulozit do db s casom vytvorenia, alebo ten token by mal obsahovat zakodovany cas vytvorenia?
Název: Re:React v .NET projekte
Přispěvatel: Mirek Prýmek 04. 05. 2017, 20:37:09
Mohlo by to takto byt?
Asi jo. Anebo použít cookies.

Len neviem ako overovat casovu platnost tokenu. Mam ho ulozit do db s casom vytvorenia, alebo ten token by mal obsahovat zakodovany cas vytvorenia?
To je asi jedno. Ale typicky k tomu tokenu budeš mít v DB nějaké informace a stejně je budeš načítat, tak proč tam nedat timestamp?
Název: Re:React v .NET projekte
Přispěvatel: PeterS 04. 05. 2017, 20:50:35
Citace
To je asi jedno. Ale typicky k tomu tokenu budeš mít v DB nějaké informace a stejně je budeš načítat, tak proč tam nedat timestamp?

Akoze pridat stlpec k uzivatelovi max doba prihlasenia myslis?
Název: Re:React v .NET projekte
Přispěvatel: Mirek Prýmek 04. 05. 2017, 22:06:48
Akoze pridat stlpec k uzivatelovi max doba prihlasenia myslis?
Jo, neco takovyho.
Název: Re:React v .NET projekte
Přispěvatel: PeterS 04. 05. 2017, 23:59:02
Akoze pridat stlpec k uzivatelovi max doba prihlasenia myslis?
Jo, neco takovyho.

Oka dakujem za radu :)
Název: Re:React v .NET projekte
Přispěvatel: Mirek Prýmek 05. 05. 2017, 00:00:39
Akoze pridat stlpec k uzivatelovi max doba prihlasenia myslis?
Jo, neco takovyho.

Oka dakujem za radu :)
Jo sorry, teď na to koukám - samozřejmě ne k uživateli, ale k tomu tokenu - ten token má nějakou platnost, ne uživatel ;)
Název: Re:React v .NET projekte
Přispěvatel: Kentus 05. 05. 2017, 01:22:18
Urcite sa s tym rad pohram, a o tej autorizacii tokenom som tiez uvazoval. Tu komunikaciu by som si predstavoval asi v takejto podobe:
Uzivatel posle HTTP pozadavek na server s menom a heslom, kde mu v pripade validnych udajov pride obratom token. Token sa ulozi niekde do localStorage, a pri kazdom poziadavku na server, sa prida ako parameter aj dany token. Pri odhlaseni sa vycisti aj localStorage.

Mohlo by to takto byt? Len neviem ako overovat casovu platnost tokenu. Mam ho ulozit do db s casom vytvorenia, alebo ten token by mal obsahovat zakodovany cas vytvorenia?

Gratuluji, právě jsi vymyslel obdobu cookies.... věci která tu je několik desítek let. Ale proč používat něco co funguje když můžu vynalézt vlastní kolo, že?
Název: Re:React v .NET projekte
Přispěvatel: Mirek Prýmek 05. 05. 2017, 07:22:39
Gratuluji, právě jsi vymyslel obdobu cookies.... věci která tu je několik desítek let. Ale proč používat něco co funguje když můžu vynalézt vlastní kolo, že?
Pro http máš pravdu, ale kdyby se rozhodl používat websockety, tak cookies nemusí fungovat (viz např. https://elixirforum.com/t/accessing-cookies-in-phoenix-socket-connect/4731/3 ).

Pokud by věděl, že bude používat jenom http nebo že jeho BE framework podporuje cookies i pro websockety bezpečným způsobem, je samozřejmě jednodušší je použít.
Název: Re:React v .NET projekte
Přispěvatel: gll 05. 05. 2017, 14:30:03
V tom odkazovaném článku https://www.christian-schneider.net/CrossSiteWebSocketHijacking.html se píše, že stačí ověřovat origin. Píše se to ve všech tutoriálech k websocketům. Zakazovat kvůli tomu používání cookies je demence.

Název: Re:React v .NET projekte
Přispěvatel: Mirek Prýmek 05. 05. 2017, 15:23:23
V tom odkazovaném článku https://www.christian-schneider.net/CrossSiteWebSocketHijacking.html se píše, že stačí ověřovat origin. Píše se to ve všech tutoriálech k websocketům. Zakazovat kvůli tomu používání cookies je demence.
Ja to neumim posoudit, nikdy jsem se nad tim nezamyslel, protoze ten Phoenix framework, ktery pouzivam, cookies pro ws nepodporuje, tak jsem to vzal jako fakt a resim to taky tokenem. Jsou to asi dva radky na dvou mistech v kodu, tak je mi to jedno a nehodlam to vic resit :)
Název: Re:React v .NET projekte
Přispěvatel: gll 05. 05. 2017, 16:39:00
V tom odkazovaném článku https://www.christian-schneider.net/CrossSiteWebSocketHijacking.html se píše, že stačí ověřovat origin. Píše se to ve všech tutoriálech k websocketům. Zakazovat kvůli tomu používání cookies je demence.
Ja to neumim posoudit, nikdy jsem se nad tim nezamyslel, protoze ten Phoenix framework, ktery pouzivam, cookies pro ws nepodporuje, tak jsem to vzal jako fakt a resim to taky tokenem. Jsou to asi dva radky na dvou mistech v kodu, tak je mi to jedno a nehodlam to vic resit :)

Ten token ukládáte na straně klienta kde? V local storage?
Název: Re:React v .NET projekte
Přispěvatel: Mirek Prýmek 05. 05. 2017, 19:30:07
Ten token ukládáte na straně klienta kde? V local storage?
Ve Phoenixu se používá koncept "tajných dat" - BE svým tajným heslem zašifruje nějaká data, vloží je na stránku a klient se pak jimi může prokazovat jako tokenem (nevidí dovnitř, neví, co tam je a nemůže ani data upravit). Podle potřeby tenhle token obsahuje jenom nějaké id do databáze, nebo v něm můžou být přímo nějaká uživatelská data, pokud je jich málo.

Takže při načtení stránky přes http používám normálně cookies a pak pro ws tenhle zašifrovaný "token".
Název: Re:React v .NET projekte
Přispěvatel: gll 05. 05. 2017, 19:48:24
Ten token ukládáte na straně klienta kde? V local storage?
Ve Phoenixu se používá koncept "tajných dat" - BE svým tajným heslem zašifruje nějaká data, vloží je na stránku a klient se pak jimi může prokazovat jako tokenem (nevidí dovnitř, neví, co tam je a nemůže ani data upravit). Podle potřeby tenhle token obsahuje jenom nějaké id do databáze, nebo v něm můžou být přímo nějaká uživatelská data, pokud je jich málo.

Takže při načtení stránky přes http používám normálně cookies a pak pro ws tenhle zašifrovaný "token".

Session id tedy stejně ukládáte do cookie. Ten token je něco jako csrf token. Neslouží ke kontrole přihlášení. Pochopil jsem to správně?
Název: Re:React v .NET projekte
Přispěvatel: Mirek Prýmek 08. 05. 2017, 21:43:26
Session id tedy stejně ukládáte do cookie. Ten token je něco jako csrf token. Neslouží ke kontrole přihlášení. Pochopil jsem to správně?
To záleží na situaci. Nejradši mám, když aplikace vůbec nepotřebuje session id (konfiguračních dat je tak málo, že se dají všechna vložit zašifrovaná do cookie). Když je cookie/token zašifrovaný, tak se dá použít i ke kontrole přihlášení. Záleží to prostě, co od aplikace chci.

Vzhledem k tomu, že dělám prakticky jenom interní aplikace s malým množství uživatelů, často zavřené za http auth, nemusím spoustu věcí moc řešit...
Název: Re:React v .NET projekte
Přispěvatel: PeterS 08. 05. 2017, 23:21:52
Gratuluji, právě jsi vymyslel obdobu cookies.... věci která tu je několik desítek let. Ale proč používat něco co funguje když můžu vynalézt vlastní kolo, že?

Neviem nevyznam sa v tom velmi preto ma zaujima ako sa to robi ... len som napisal svoj napad. Takze mam to teda ukladat do cookies?
Název: Re:React v .NET projekte
Přispěvatel: Mirek Prýmek 08. 05. 2017, 23:24:22
Neviem nevyznam sa v tom velmi preto ma zaujima ako sa to robi ... len som napisal svoj napad. Takze mam to teda ukladat do cookies?
No hlavně musíš použít hlavu - ujasnit si, jaké informace chceš předat kam, jaké k tomu máš možnosti a jaké to má bezpečnostní konsekvence. Pokud tomu, jak říkáš, moc nerozumíš, neuděláš většinou chybu, pokud se podržíš toho, co je v daném frameworku standardní způsob.
Název: Re:React v .NET projekte
Přispěvatel: PeterS 08. 05. 2017, 23:26:57
Neviem nevyznam sa v tom velmi preto ma zaujima ako sa to robi ... len som napisal svoj napad. Takze mam to teda ukladat do cookies?
No hlavně musíš použít hlavu - ujasnit si, jaké informace chceš předat kam, jaké k tomu máš možnosti a jaké to má bezpečnostní konsekvence. Pokud tomu, jak říkáš, moc nerozumíš, neuděláš většinou chybu, pokud se podržíš toho, co je v daném frameworku standardní způsob.

Lenze to ukladanie tokenu na strane klienta, a nasledne posielanie na server s requestom kvoli autorizacii je skor nejaky zauzivany koncept z kategorie "the best practices", a nie sucas fw nie?
Název: Re:React v .NET projekte
Přispěvatel: Mirek Prýmek 08. 05. 2017, 23:50:52
Lenze to ukladanie tokenu na strane klienta, a nasledne posielanie na server s requestom kvoli autorizacii je skor nejaky zauzivany koncept z kategorie "the best practices", a nie sucas fw nie?
Zauzivany koncept je spis sessionId ulozene v cookie. Viz https://msdn.microsoft.com/en-us/library/ms178194.aspx
Název: Re:React v .NET projekte
Přispěvatel: PetreS 09. 05. 2017, 00:09:17
Lenze to ukladanie tokenu na strane klienta, a nasledne posielanie na server s requestom kvoli autorizacii je skor nejaky zauzivany koncept z kategorie "the best practices", a nie sucas fw nie?
Zauzivany koncept je spis sessionId ulozene v cookie. Viz https://msdn.microsoft.com/en-us/library/ms178194.aspx

Ano, to by som mohol pouzit v pripade, ze by som vyuzil Views z MVC struktury ... a teraz ma napadla este jedna vec, a to co ak by som teda to view v projekte naozaj ponechal, ale bolo by to len jedno view, popripade 2 (Index - registracia a prihlasenie, a Home - kde by bola kompletne UI aplikacie v reacte). Je to dobry alebo zly napad?
Název: Re:React v .NET projekte
Přispěvatel: Mirek Prýmek 09. 05. 2017, 07:36:37
Ano, to by som mohol pouzit v pripade, ze by som vyuzil Views z MVC struktury ... a teraz ma napadla este jedna vec, a to co ak by som teda to view v projekte naozaj ponechal, ale bolo by to len jedno view, popripade 2 (Index - registracia a prihlasenie, a Home - kde by bola kompletne UI aplikacie v reacte). Je to dobry alebo zly napad?
.NET ASP neznám, takže s detaily neporadím, ale každopádně aspoň jednu stránku musí ten backend nějak naservírovat, že jo :)

Mít nějakých pár oddělených statických stránek, servírovaných backendem, a zbytek už jako SPA je taky varianta. V jedné aplikaci to tak mám, že přihlášení je jedna stránka - ověření se provede klasicky backendem, a po ověření se spustí aplikace, což je druhá stránka (z pohledu backendu), ve které už klikání řeší čistě frontend.

Akorát pokud bys to tak dělal, tak bych doporučoval si to prvně vyzkoušet na nějakém malém demu. Mixování routování na úrovni backendu a frontendu může způsobit nečekané komplikace. Já to mám tak, že z hlediska backendu jsou tři stránky:


Stránky v aplikaci jsou pak routované pomocí hashe, takže tam máš třeba urls:

Tj. část url před hashem routuje backend, část za hashem routuje frontend. Není to jediná možnost, jak to udělat, musíš si to vyzkoušet, jestli by to takhle vyhovovalo tvému use case (pokud vůbec opravdu chceš SPA).
Název: Re:React v .NET projekte
Přispěvatel: PetreS 09. 05. 2017, 16:41:17
Oka, vdaka za tip vyskusam to podobne :)