Draft of using Yesod as an API server to a Javascript frontend #76

MaxGabriel · 2015-06-06T05:05:37Z

In #73 there was some discussion about adding an example of using Yesod as an API server. I took a quick stab at that; this PR just adds a link you can click on the homepage, which triggers an AJAX request to the server to create a new user. The server inserts the user into the database and returns the data to the client, which updates adds the user to an <ul>.

Is this roughly what we're looking for? I wrote functions to request all users and to delete specific ones as well, if we want to add more API server example code.

gregwebs · 2015-06-06T13:42:38Z

Thanks for taking a stab at it! Unfortunately this specific example is very problematic from a security perspective. If instead of a User it used a different (new) model (lets say SiteComment), then it would be great.

gregwebs · 2015-06-06T14:00:44Z

Interestingly someone just made a similar example for servant.
https://github.com/parsonsmatt/servant-persistent/blob/master/src/Main.hs
Note that for servant they don't bother presenting a UI in the browser.
However, for us not using the browser means adding API authentication, but Yesod is setup out of the box for cookie authentication.

I still maintain that an an API to users is normally admin code. Adding admin code to the scaffolding would be quite useful, but it seems out of the scope of this PR.

MaxGabriel · 2015-06-07T00:00:48Z

@gregwebs Good point about the security issues. Updated based on your suggestion to create comments instead.

gregwebs · 2015-06-07T18:52:25Z

Want to add an optional UserId field to the Comment to make it more realistic?

gregwebs · 2015-06-13T00:52:32Z

sorry, I didn't notice the update. The UserId should come from maybeAuthId. Sorry for asking for tedious changes; I can also finish this off later.

MaxGabriel · 2015-06-15T03:38:02Z

It's no problem! Updated to use maybeAuthId and insertEntity.

MaxGabriel · 2015-06-15T03:45:28Z

I could also add comments to all of this code, much like Application.hs has. As well as tests. I also realized that postCommentR doesn't have CSRF protection. Should I add those things?

gregwebs · 2015-06-15T18:59:48Z

Thanks for the change.

I always use an Id suffix such as commentUserId because I often want to make a joined form without the Id
insertEntity seems wrong

A test and CSRF protection would be great.

MaxGabriel · 2015-06-15T19:49:35Z

@gregwebs I agree on adding an Id suffix to the record field; I only didn't do so because it'd be inconsistent with Email:

Email
    email Text
    user UserId Maybe
    verkey Text Maybe
    UniqueEmail email
Comment json
    message Text
    user UserId Maybe

I can change both, though.

For insertEntity, that's just this code, which is doing a regular insert and using the returned key to create the Entity. The only thing I see potentially wrong with that is that if the database makes changes to your data during the insert (with triggers or default values or something)—but that seems like a general problem with insertEntity.

gregwebs · 2015-06-16T14:39:17Z

sorry, I got confused about insertEntity. I would like to change both to have the Id suffix.

gregwebs · 2015-08-25T16:50:04Z

templates/homepage.julius

+
+    var message = $("##{rawJS commentTextareaId}").val();
+    // (Browsers that enforce the "required" attribute on the textarea won't see this alert)
+    if (!message) {


What browser doesn't enforce required? Can be removed since we always rely on the server for final validation?

@gregwebs Currently the server won't let invalid comments be created, but it also won't give a nice error message to show to the user (IIRC the default error for requireJsonBody actually returns an HTML page with the error).

My general view on this is that client-side validation is fine (and even preferable, because it's instant) as long as it's just for UX, and the server is enforcing the actual integrity of the data, though it would be nice to get good errors from the server when it's own validation fails.

Oh, sorry, Safari doesn't enforce required. Edit: and apparently mobile safari as well http://caniuse.com/#search=required

gregwebs · 2015-08-25T16:56:06Z

This looks like it will be good to merge when rebased.

MaxGabriel · 2015-08-25T17:05:13Z

templates/default-layout-wrapper.hamlet

+      \  defaultHeaders[csrfHeaderName] = csrfToken;
+      \  $.ajaxSetup({
+      \      headers: defaultHeaders,
+      \  });


I think this should maybe only add the header if the domain the AJAX request is being sent to is the current domain. Need to look into this.

MaxGabriel · 2015-08-26T06:03:29Z

This PR needs yesod-test-1.5.0.1 for the tests to pass at runtime. Do you mind publishing that @gregwebs or @snoyberg? After that's merged I'll bump bounds on this branch, but otherwise this PR is good to merge.

gregwebs · 2015-08-26T06:19:06Z

published

* Includes frontend code making an AJAX request to post comments * Demonstrates JSON parsing/encoding * Includes CSRF protection

MaxGabriel · 2015-08-26T13:52:19Z

Updated cabal file to require yesod-test-1.5.0.1. Since Greg's reviewed this I'll merge shortly.

Draft of using Yesod as an API server to a Javascript frontend

MaxGabriel · 2015-08-26T15:08:46Z

Thanks for reviewing this so many times @gregwebs !

gregwebs · 2015-08-26T15:14:24Z

Is it adding the token from the cookie?

MaxGabriel · 2015-08-26T15:46:15Z

@gregwebs Yes, in default-layout-wrapper.hamlet

MaxGabriel force-pushed the jsonExample branch from cf9f695 to bf776cb Compare June 6, 2015 23:59

MaxGabriel force-pushed the jsonExample branch from bf776cb to 8b3d463 Compare June 7, 2015 00:21

MaxGabriel mentioned this pull request Jun 18, 2015

CSRF protection when making requests from Javascript yesodweb/yesod#1016

Closed

MaxGabriel mentioned this pull request Aug 19, 2015

Draft of adding CSRF protection for AJAX requests yesodweb/yesod#1017

Merged

MaxGabriel force-pushed the jsonExample branch from d4a8a77 to 62fa2f7 Compare August 25, 2015 14:54

MaxGabriel mentioned this pull request Aug 25, 2015

upgrade to yesod-test-1.5 #93

Merged

gregwebs reviewed Aug 25, 2015
View reviewed changes

MaxGabriel reviewed Aug 25, 2015
View reviewed changes

MaxGabriel force-pushed the jsonExample branch 2 times, most recently from ff72266 to 789170e Compare August 26, 2015 06:00

Add an example of using Yesod as an API server

8fa7e7c

* Includes frontend code making an AJAX request to post comments * Demonstrates JSON parsing/encoding * Includes CSRF protection

MaxGabriel force-pushed the jsonExample branch from 789170e to 8fa7e7c Compare August 26, 2015 13:51

MaxGabriel added a commit that referenced this pull request Aug 26, 2015

Merge pull request #76 from MaxGabriel/jsonExample

5fca106

Draft of using Yesod as an API server to a Javascript frontend

MaxGabriel merged commit 5fca106 into yesodweb:postgres Aug 26, 2015

MaxGabriel mentioned this pull request Oct 29, 2017

Add an example of using Yesod as an API server to the scaffolding #73

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Draft of using Yesod as an API server to a Javascript frontend #76

Draft of using Yesod as an API server to a Javascript frontend #76

MaxGabriel commented Jun 6, 2015

gregwebs commented Jun 6, 2015

gregwebs commented Jun 6, 2015

MaxGabriel commented Jun 7, 2015

gregwebs commented Jun 7, 2015

gregwebs commented Jun 13, 2015

MaxGabriel commented Jun 15, 2015

MaxGabriel commented Jun 15, 2015

gregwebs commented Jun 15, 2015

MaxGabriel commented Jun 15, 2015

gregwebs commented Jun 16, 2015

gregwebs Aug 25, 2015

MaxGabriel Aug 25, 2015

MaxGabriel Aug 25, 2015

gregwebs commented Aug 25, 2015

MaxGabriel Aug 25, 2015

MaxGabriel commented Aug 26, 2015

gregwebs commented Aug 26, 2015

MaxGabriel commented Aug 26, 2015

MaxGabriel commented Aug 26, 2015

gregwebs commented Aug 26, 2015

MaxGabriel commented Aug 26, 2015

Draft of using Yesod as an API server to a Javascript frontend #76

Draft of using Yesod as an API server to a Javascript frontend #76

Conversation

MaxGabriel commented Jun 6, 2015

gregwebs commented Jun 6, 2015

gregwebs commented Jun 6, 2015

MaxGabriel commented Jun 7, 2015

gregwebs commented Jun 7, 2015

gregwebs commented Jun 13, 2015

MaxGabriel commented Jun 15, 2015

MaxGabriel commented Jun 15, 2015

gregwebs commented Jun 15, 2015

MaxGabriel commented Jun 15, 2015

gregwebs commented Jun 16, 2015

gregwebs Aug 25, 2015

Choose a reason for hiding this comment

MaxGabriel Aug 25, 2015

Choose a reason for hiding this comment

MaxGabriel Aug 25, 2015

Choose a reason for hiding this comment

gregwebs commented Aug 25, 2015

MaxGabriel Aug 25, 2015

Choose a reason for hiding this comment

MaxGabriel commented Aug 26, 2015

gregwebs commented Aug 26, 2015

MaxGabriel commented Aug 26, 2015

MaxGabriel commented Aug 26, 2015

gregwebs commented Aug 26, 2015

MaxGabriel commented Aug 26, 2015