Toucan

This is an opinionated multi-project solution template, combining .NET Core and Vue.js.

The main objective is to provide scaffolding for a responsive SPA web application, that incorporates SOLID design principles.

See releases for a history of recent changes

Features

global application state/event bus
form validation
token-based authentication for local & external providers
multiple optimized entry points
hot module reloading for development
comprehensive localization (new)
loading screen (new)

Preview

Getting Started

These instructions will get a copy of the project up and running on your local machine for development purposes.

Prerequisites

.NET Core SDK 2.0.0
Visual Studio Code (or a similar text-based editor like Sublime)
TypeScript
Node.js
PostgreSQL or SQL Server

Installing

via Yeoman

npm install generator-toucan
yo toucan

or using setup instructions

Architecture

Be sure to check out README for details on MVC middleware and filters being used in the pipeline.

An outline on how localization works can be found in I18N

.NET Core

See the readme files for each project

Vue.js, Webpack & Bootstrap

See the readme file below

Overview

Authentication

JWT Bearer tokens are issued by the server. These tokens contain profile data and claims relating to a user. Authentication can be done in two different ways.

via Local Provider

This requires a user to create an account using the signup form. In this scenario, the server

enforces a minimum password complexity rule when signing up
generates a salt, and stores hashed password to the database
retreives and maps user profile data and permissions when generating client tokens

via External Providers

This is performed using a variation on the implicit workflow. The sequence of events is as follows.

browser obtains a one-use nonce from local server (which must be redeemed/used before it expires)
the browser is redirected to external provider, and authenticated
external provider issues a redirect, and returns the nonce and access token details via uri (ie. http://localhost:5000/#state=XYZ&access_token=4/P7q7W91&token_type=Bearer&expires_in=3600)
the Vue.js application is bootstrapped, and checks the uri hash for nonce and access_token
if present, these are passed to the local server
the local server validates the nonce and access token, and if satisfied, issues the client with a local token (the external access token is also revoked)

If this is the first time a user has logged in using this external provider, a user account will be created for them based on data from external profile data APIs.

Verification

Before a site user can access restricted content they need to verify their account details using some form of two-factor authentication. They are redirected to the verification page when appropriate.

The default implementation is as follows

user asks site to issue a verification code
server returns verification code
client browser outputs the verification code using console.info() and displays form on page
the verification code is submitted, and a new access token (with updated details) is issued by the server

Authorization

Server-side routes are protected via policies which provide more flexibility than traditional role-based models.

Client-side routes are protected via navigation guards, which check user claims contained in access tokens issued by the server.

If an authorization check on the web server fails, a challenge is issued to the client browser. Normally this results in a 302 redirect, but this behaviour has been modified using custom middleware in src/server/Startup.Auth.cs*. This middleware instead returns a 401 Unauthorized response whilst setting Response header Location=XXX. The client-side Axios library then handles this appropriately, by way of a global http response interceptor.

Security

Support for CSRF has been provided.

The site sets CSRF session cookies whenever an access token is issued

The Axios library automatically uses this cookie to append the anti-forgery token to outbound POST, PUT and DELETE requests.

Tests

For .NET Core, a sample XUnit test is provided as a starting point /test/ directory

Built With

.NET Core - .NET Core is a general purpose development platform maintained by Microsoft and the .NET community on GitHub.
TypeScript - TypeScript is a typed superset of Javascript that compiles to plain JavaScript
Vue.js - Simple yet powerful library for building modern web interfaces
Bootstrap - Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
Axios - Promise based HTTP client for the browser and node.js
StructureMap - IOC/DI container

Contributing

It is what it is.

Authors

mrellipse

License

This project is licensed under the MIT License - see the LICENSE file for details

Acknowledgments

Wille Ristimäki for vue.js-starter-template
Nate Barbettini for SimpleTokenProvider
Monterail for Vuelidate

*[EF]: Entity Framework

kryndex / toucan Goto Github PK

toucan's Introduction