Monthly Archives: November 2016

ASP.Net Encode Token

TL;DR – In ASP.Net MVC use the HttpServerUtility.UrlTokenEncode() and HttpServerUtility.UrlTokenDecode() for encoding and decoding tokens/keys with unprintable characters.

Every so often we use a throw away token for generating a link. An example of this would be a link to reset a password. You don’t want to send the password to your user in an email (you should never send a password to a user in an email). Instead, you create a link with a token they can click on to create a new password. Encoding the token is straight forward, however I always seem to forget the utility to use.

I always seem to go down this progression:

    • Base64 – Convert.ToBase64String()
      • Nope. This has issues with ?token= query params due to the potential `=` signs at the end.
    • Encoded using HttpUtility.UrlEncode()
      • Nope. UrlEncode does not handle unprintable characters, when you try to decode it you get the wrong results.
    • Encoded using HttpServerUtility.UrlTokenEncode()
      • YES. That’s the one we need.

Having to use the UrlTokenEncode has been fairly rare, which is why I can’t remember it immediately. The default IdentityProvider has the email reset feature built in with the encoding/decoding happening automatically. Knowing the UrlTokenEncode comes in handy when creating links for QR Codes or other purposes.

Setting up Gulp for compiling SASS in Visual Studio 2015

I’ve been meaning to use gulp for compiling sass files in Visual Studio for a while. Using gulp instead of a Visual Studio extension gives the advantage of not always having to be in visual studio. I’ve used gulp in other projects where it was already setup and working, but have never set it up myself. I figured it was time for that to change.

Step 1: Install nodejs if you haven’t already. This gives access to the Node Package Manager (NPM). You can download nodejs using the link below.
https://nodejs.org/en/download/

Step 2; Add the variable NODE_PATH with a value of %AppData%\npm\node_modules. If it’s already in your environment, then you don’t need to do anything. This will give you access to globally installed packages from the command line without having to type the full path.

Step 3: Install gulp using NPM. In a command window or PowerShell type the command below and press enter.
npm install -g gulp
NPM will start installing gulp globally for your system, as denoted by the -g flag.

Step 4: Start up Visual Studio 2015 and create a new project or open an existing project.

Step 5: Add two new files in Visual Studio called “NPM Configuration File” and “Gulp Configuration File”.

  • package.json – NPM Configuration File
  • gulpfile.js – Gulp Configuration File

Note: If the templates aren’t available in Visual Studio you can create a normal json and a js file, and name them package.json and gulpfile.js.

Step 6: Modify the package.json file so it looks like the configuration below. You can change the values as you like, but the important part is the devDependencies section.

{
  "name": "ASP.NET",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-plumber": "1.0.1",
    "gulp-autoprefixer": "^2.0.0",
    "gulp-sass": "2.0.4"
  }
 }

Step 7: In the solution explorer of Visual Studio, right click on the package.json file and select Restore Packages. This will download the dependencies we set up in step 7.

Note: Now would be a good time to say if you are using version control, it would be wise to add an exclusion for the node_modules directory.

Step 8: Let’s now update the gulpfile.js to compile our scss file.

var gulp         = require('gulp');
var sass         = require('gulp-sass');
var plumber      = require('gulp-plumber');
var autoprefixer = require('gulp-autoprefixer');

gulp.task("styles", function () {
  // We start with the main scss file (site.scss) and include all others from there.
  return gulp.src(["content/scss/site.scss", "content/scss/*.css"])
             .pipe(plumber())
             .pipe(sass())
             .on('error', function(err) {
                 console.error(err.message);
                 this.emit('end');
             })
             .pipe(autoprefixer("last 1 version", { cascade: true }))
             // The destination directory to output the compiled css.
             .pipe(gulp.dest("content/"));
});

gulp.task("default",["styles"]);

Step 9: At this point, it’s now just a matter of creating the content/scss/ directory and creating your sass styles.

Note: When you want to compile your css, open the “Task Runner Explorer” by right clicking the gulpfile.js in the “Solution Explorer” pane, or in the menu click on “View” -> “Other Windows” -> “Task Runner Explorer”. After doing that you should see our two tasks of “default” and “styles”. You can double click either one to compile your new files.

If you want to get really crazy, you can create a task that will watch your content/scss/ directory for changes and have them be automatically compiled.