Databases
StackOverflow2013
Postsdbo
POMVC Authentication and Antiforgery token with Durandal SPA template
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMVC Authentication and Antiforgery token with Durandal SPA template
    primarykey
    data
    text
    <p>Some areas of my SPA need to be open to all users, and some areas require authentication. In these areas, it's the data loaded via AJAX that I want to protect.</p> <p>I have an authentication service (see below), which I add as a dependency in my durandal <strong>main.js</strong>. The service is called:</p> <pre><code>authentication </code></pre> <p>In my <strong>main.js</strong> I call</p> <pre><code>authentication.handleUnauthorizedAjaxRequest(function () { app.showMessage('You are not authorized, please login') .then(function () { router.navigateTo('#/user/login'); }); }); </code></pre> <p>It warns the user they are not authorized, and navigates user to a login view/viewmodel where they can enter details and try logging in. </p> <p>Some questions that come to mind when building this authentication viewModel:</p> <ul> <li>Are there any obvious concerns with what I'm doing?</li> <li>Is this how I'm 'meant' to do things in Durandal?</li> <li>Am I re-inventing the wheel? I couldn't see anything like this within Durandal.</li> </ul> <p>Most people seem to be creating seperate <strong>cshtml</strong> pages; one for login (if the user is not authenticated), and the usual <strong>index.cshtml</strong> Is there any good reasons for me to switch to that method?</p> <p>My login action on my the server-side 'user controller' has the [ValidateAntiForgeryToken] attribute I need to send that as well.<br> I also have an 'antiforgery' service (see below) which I also add as a dependency in my <strong>main.js</strong> viewModel file then (also in my main.js).</p> <pre><code>antiforgery.addAntiForgeryTokenToAjaxRequests(); </code></pre> <p>This intercepts all ajax requests (along with content), and adds the MVC AntiForgeryToken value to the data. Seems to work exactly as I want it to. Please let me know if there's any errors/mistakes.</p> <p>Complete authentication service below.</p> <pre><code>// services/authentication.js define(function (require) { var system = require('durandal/system'), app = require('durandal/app'), router = require('durandal/plugins/router'); return { handleUnauthorizedAjaxRequests: function (callback) { if (!callback) { return; } $(document).ajaxError(function (event, request, options) { if (request.status === 401) { callback(); } }); }, canLogin: function () { return true; }, login: function (userInfo, navigateToUrl) { if (!this.canLogin()) { return system.defer(function (dfd) { dfd.reject(); }).promise(); } var jqxhr = $.post("/user/login", userInfo) .done(function (data) { if (data.success == true) { if (!!navigateToUrl) { router.navigateTo(navigateToUrl); } else { return true; } } else { return data; } }) .fail(function (data) { return data; }); return jqxhr; } }; }); // services/antiforgery.js define(function (require) { var app = require('durandal/app'); return { /* this intercepts all ajax requests (with content) and adds the MVC AntiForgeryToken value to the data so that your controller actions with the [ValidateAntiForgeryToken] attribute won't fail original idea came from http://stackoverflow.com/questions/4074199/jquery-ajax-calls-and-the-html-antiforgerytoken to use this 1) ensure that the following is added to your Durandal Index.cshml &lt;form id="__AjaxAntiForgeryForm" action="#" method="post"&gt; @Html.AntiForgeryToken() &lt;/form&gt; 2) in main.js ensure that this module is added as a dependency 3) in main.js add the following line antiforgery.addAntiForgeryTokenToAjaxRequests(); */ addAntiForgeryTokenToAjaxRequests: function () { var token = $('#__AjaxAntiForgeryForm input[name=__RequestVerificationToken]').val(); if (!token) { app.showMessage('ERROR: Authentication Service could not find __RequestVerificationToken'); } var tokenParam = "__RequestVerificationToken=" + encodeURIComponent(token); $(document).ajaxSend(function (event, request, options) { if (options.hasContent) { options.data = options.data ? [options.data, tokenParam].join("&amp;") : tokenParam; } }); } }; }); </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USstooboo
    1. USstooboo
    plurals
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POMVC Authentication and Antiforgery token with Durandal SPA template
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POMVC Authentication and Antiforgery token with Durandal SPA template
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POMVC Authentication and Antiforgery token with Durandal SPA template
      1. This table or related slice is empty.
      1. VTApproveEditSuggestion
    1. COHi Stuart, Your idea is great, and I'm trying to apply it in my Hot Towel/Durandal project. I got the auth and antiforgery services, but I'm not getting the auth service to intercept unauthorized users and redirect them to the login page. How do I do that? do I need to add something to Index.cshtml? Thanks
      singulars
      1. POMVC Authentication and Antiforgery token with Durandal SPA template
      1. USAli B
    2. COThis is also on DurandalJs Google Group - there's been updates from other people on there and I've also added some code examples - they won't really fit in a comment here ... so ;-) .. here's the link https://groups.google.com/forum/?hl=en&fromgroups=#!topic/durandaljs/iq9OPprfob0
      singulars
      1. POMVC Authentication and Antiforgery token with Durandal SPA template
      1. USstooboo
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload