Migration from ASP.NET Beta 4 to Beta 5

ASP.NET beta 5 was released on June 30th. See this blog post from Microsoft for details. I also recommend this video of the ASP.NET community standup from the day of the beta 5 release it has a lot of great information on the release and way forward for ASP.NET 5. This post is going to cover a migration of my contacts application from beta 4 to beta 5.

To start upgrade dnvm by opening a command prompt and running the following command.

dnvm update-self

After that is complete use dnvm to get beta 5 by running the following.

dnvm upgrade

The rest of the migration was performed from Visual Studio. Next up is an update to global.json to change the version from beta4 to beta5.

{
    "projects": [ "src", "test" ],
    "sdk": {
        "version": "1.0.0-beta5"
    }
}

In project.json the dependencies section needs values beta4 updated to beta5.

  "dependencies": {
    "EntityFramework.SqlServer": "7.0.0-beta5",
    "EntityFramework.Commands": "7.0.0-beta5",
    "Microsoft.AspNet.Mvc": "6.0.0-beta5",
    "Microsoft.AspNet.Mvc.TagHelpers": "6.0.0-beta5",
    "Microsoft.AspNet.Authentication.Cookies": "1.0.0-beta5",
    "Microsoft.AspNet.Authentication.Facebook": "1.0.0-beta5",
    "Microsoft.AspNet.Authentication.Google": "1.0.0-beta5",
    "Microsoft.AspNet.Authentication.MicrosoftAccount": "1.0.0-beta5",
    "Microsoft.AspNet.Authentication.Twitter": "1.0.0-beta5",
    "Microsoft.AspNet.Diagnostics": "1.0.0-beta5",
    "Microsoft.AspNet.Diagnostics.Entity": "7.0.0-beta5",
    "Microsoft.AspNet.Identity.EntityFramework": "3.0.0-beta5",
    "Microsoft.AspNet.Server.IIS": "1.0.0-beta5",
    "Microsoft.AspNet.Server.WebListener": "1.0.0-beta5",
    "Microsoft.AspNet.StaticFiles": "1.0.0-beta5",
    "Microsoft.AspNet.Tooling.Razor": "1.0.0-beta5",
    "Microsoft.Framework.CodeGenerators.Mvc": "1.0.0-beta5",
    "Microsoft.Framework.Configuration.Json": "1.0.0-beta5",
    "Microsoft.Framework.Configuration.UserSecrets": "1.0.0-beta5",
    "Microsoft.Framework.Logging": "1.0.0-beta5",
    "Microsoft.Framework.Logging.Console": "1.0.0-beta5",
    "Microsoft.VisualStudio.Web.BrowserLink.Loader": "14.0.0-beta5"
  }

One big thing here to note is that Microsoft.Framework.ConfigurationModel and all its children have been renamed to Microsof.Framework.Configuration. For example Microsoft.Framework.ConfigurationModel.Json is now Microsoft.Framework.Configuration.Json.

In the Views folder _GlobalImport.cshtml needs to be renamed to _ViewImports.cshtml.

Entity framework migrations had some issues as well, but I decided to just delete the existing migrations and start from scratch since the database contains a minimal amount of data.

The last set of changes are in Startup.cs. First up is a using change for the ConfigurationModel to Configuration rename.

Before:
using Microsoft.Framework.ConfigurationModel;

After:
using Microsoft.Framework.Configuration;

Next up is the Startup function. Here a builder has been added which is then used to create the actual configuration. Also note the added function parameter for IApplicationEnviroment which is used to get the application path for use by the configuration builder.

Before:
public Startup(IHostingEnvironment env)
{
    // Setup configuration sources.
    var configuration = new Configuration()
        .AddJsonFile("config.json")
        .AddJsonFile($"config.{env.EnvironmentName}.json", optional: true);

    if (env.IsEnvironment("Development"))
    {
        // This reads the configuration keys from the secret store.
        configuration.AddUserSecrets();
    }
    configuration.AddEnvironmentVariables();
    Configuration = configuration;
}

After:
public Startup(IHostingEnvironment env, IApplicationEnvironment appEnv)
{
    // Setup configuration sources.
    var configurationBuilder = new ConfigurationBuilder(appEnv.ApplicationBasePath)
        .AddJsonFile("config.json")
        .AddJsonFile($"config.{env.EnvironmentName}.json", true);

    if (env.IsEnvironment("Development"))
    {
        // This reads the configuration keys from the secret store.
        configurationBuilder.AddUserSecrets();
    }

    configurationBuilder.AddEnvironmentVariables();
    Configuration = configurationBuilder.Build();
    
}

In the ConfigureServices function Configuration.GetSubKey has been replaced by Configuration.GetConfigurationSection.

Before:
services.Configure<AppSettings>(Configuration.GetSubKey("AppSettings"));

After:
services.Configure<AppSettings>(Configuration.GetConfigurationSection("AppSettings"));

The last change was to remove app.UseBrowserLink. I am not thrilled with having to remove the use of browser link but it is throwing a System.TypeLoadException. I am going to keep looking for this issue but with UseBrowserLink commented out everything else works fine. If anyone else has this issue and finds a fix please leave a comment on how it was fixed.

If your application is still having trouble check out this page which contains a list of breaking changes from beta 4 to beta 5.

ASP.NET 5 Web Site to Azure

At the point the basics of my ASP.NET 4 contacts application have been moved to the ASP.NET 5. This is never going to be a production application, but I want it run it on a remote server just to prove it works. I decided to publish to Microsoft Azure which is Microsoft’s cloud offering. The process was a lot more challenging that I had expected, but as with all the rough spots I have hit with ASP.NET 5 I am sure the path will be made smooth for the final release.

Publishing to Azure from Visual Studio 2015 RC

To get started right click on the project to be published and select the Publish.

ProjectRightClickPublishMenu

This will load the Publish Web dialog. On the Profile tab select the Microsoft Azure Web Apps option.
PublishDialogProfile

This will show the Select Existing Web App dialog. Click the New button to add a new Web App.
AzureWebAppDialog

The new button show the Create Web App on Microsoft Azure. This dialog has a bit more to it. Web App name sets the url of the app as well as the app name with Azure. For region I just chose the closest data center. My application uses a database and I don’t have an existing database server in Azure so I chose Create new server for Database server selection. Database username and password are self explanatory. With all the options filled in click Create.
AzureCreateWebApp

After the creation process, which creates all the infrastructure need for the app in Azure, is done Visual Studio returns to the Publish Web dialog. The following is the Connection tab. The fields are editable, but are auto filled from the creation process. In case changes are need use the provided Validate Connection button to verify Visual Studio is still able to communicate with Azure.
PublishDialogConnection

The Settings tab allows selection of Release or Debug configurations as well as the target DNX version.
PublishDialogSettings

The last tab on the Publish Web dialog is Preview. It is not overly useful on a first publish since all the file for the project needed to be push, but on subsequent publishes it would be useful to verify nothing unexpected is being pushed.PublishDialogPreview

Pushing the Publish button on the Publish Web dialog push the files to Azure and opens a browser with the newly published web app.

Issues

After a few seconds I was greeted with a HTTP 500 Internal Server Error instead of my web app. I spent a lot of time on the Azure Portal trying to find my issue. I created a new project and published it without issue which means it is a problem with my app and not the publish process. I spent a lot of time digging and Googling my issues, but thankfully ended up with answers.

App Configuration

My first issues were the result of not setting up the configuration options for my user secrets. As I posted last week this was the main worry I had with user secrets. You would think with my concerns that would be the first thing I checked but it actually took me awhile to get around to checking my user secrets. Just to be clear I am not against user secrets I think they are an awesome feature I am just not used to dealing with this side of configuration. The steps to make the proper configuration for user secrets follow.

From the Azure Portal click Browse everything to get a list of all resources.

AzurePortal

From All resources click on the Web App that needs configuration. If you are paying close attention you will notice the name of my web app is different than the publication settings above. This is the result of one of my tries to get the site running before discovering the problem was configuration.
AzurePortalAllResources

Selecting a web app cause the details page to load. On the details page select Settings.
AzurePortalWebAppDetail

From the settings details page click Application Settings which will load the Web app settings page.AzurePortalWebAppSettings

In Web app settings scroll down to the App settings section. In my case I was missing the Authentication:Google:ClientId and Authentication:Google:ClientSecret settings used for OAuth with Google. Also make note of the Connection strings section as  this is the section where the connection string to the database needs to be entered.
AzurePortalWebAppSettingsAuthAndConnection

With all the above changes I was finally able to get the site to load.

Database/Entity Framework

As soon as I click on the contact list section of my app I got another HTTP 500 Internal Server Error. This happens to be the first time the app hits the database. The issue this time is that the DefaultConnection string that needs set so the app can connect to the database.

First step to fix this issue is to go back to the All resources on the Azure Portal and select the database that goes with the web app, aspnetcontacts_db in this example.

AzurePortalAllResourcesDb

This will load the SQL Database detail. Under Connection string is a link for Show database connection strings. Clicking this will load a page with a list of connection strings for this database. Copy the appropriate string and replace the dummy password with the real one. Take that connection string with the password enter and put it in your web app’s DefaultConnection. With the DefaultConnection set the 500 error went away.
AzurePortalDbDetailThe next time I ran I got a stack trace with a message that migrations needed to be run. In order to get migrations to run I made a few changes to my project.

The first change was in the ConfigureServices function of Startup.  I added the setup for the ContactsDbContext using the DefaultConnection string. In the ContactsDbContext I removed the OnConfiguring function which is where the connection string for the ContactsDbContext had been set before.

// Add EF services to the services container.
services.AddEntityFramework()
   .AddSqlServer()
   .AddDbContext<ApplicationDbContext>(options =>
       options.UseSqlServer(Configuration["Data:DefaultConnection:ConnectionString"]))
   .AddDbContext<ContactsDbContext>(options =>
       options.UseSqlServer(Configuration["Data:DefaultConnection:ConnectionString"]));

In order to actually run migrations for the ContactsDbContext I added a constructor with a call to Database.AsRelational().ApplyMigrations() which will ensure anytime the DbContext is constructed that the latest migrations will be applied. The following is the full ContactsDbContext class after the changes.

public class ContactsDbContext : DbContext
{
    private static bool _created;
    public DbSet<Contact> Contacts { get; set; }

    public ContactsDbContext()
    {
        if (!_created)
        {
            Database.AsRelational().ApplyMigrations();
            _created = true;
        }
    }
}

The last project change was to the ContactsController to allow ASP.NET to inject the ContactsDbContext instead of creating the context with in the controller.

private readonly ContactsDbContext _db;

public ContactsController(ContactsDbContext dbContext)
{
    _db = dbContext;
}

The change made above to the ConfigureServices function in the Startup class is how ASP.NET knows what to inject into the ContactsController. Build in dependence injection is one of the new features of ASP.NET 5.

After all the above changes I published to Azure and tried to access the contact list again. This resulted in a different error and a stack trace. The issue this round turned out to be that the default SQL Server created by Azure does not support the way that Entity Framework 7 is auto incrementing the ID column on contacts table. Thankfully there is an updated version of SQL available and the default server just need to be upgraded.

Back on the detail page for the SQL database there is a Server version listed as V2. Click the V2.

AzurePortalDbDetail

This will load the Latest SQL database update page. Click Upgrade This Server.

AzurePortalDbUpgrade

Currently the SQL Server created by the Visual Studio 2015 RC is in the Web tier which does not support the latest version of SQL which resulted in the warning below.
AzurePortalDbUpgradePriceWarningClick on your database name to load the Recommended pricing tier page. Since this is a new database Azure does not have enough information to recommend a tier and defaults to S0. At the very bottom of the page there is a big blue S0 link. Click it to change pricing tiers.

AzurePortalDbUpgradePriceRecommended

The Choose your pricing tier page will load. The current setting for the server is Web which shows as a retired. I chose the Basic tier but anything that is not marked as retired should support the newer version of SQL Server. After clicking on the option you want click the Select button at the bottom of the page.

AzurePortalDbUpgradePriceSelect

Now that the new pricing tier has been selected go back to the server details and click the V2 link under Server version. This round you will get a big warning. Under the warning enter the name of your server and click OK to perform the upgrade.

AzurePortalDbUpgradeTypeServerName

The upgrade process took less than 20 minutes for me. After the processes was complete the app worked as expected.

User Secrets

User secrets are a new concept in ASP.NET 5 which provide a way to use configuration values that are outside of the set of files that would be check into version control. An example of a good use case is the Google client ID and client secret I used in my OAuth post. This is information you would not want in a public repo.

If you are using the ASP.NET 5 Preview Web Site Template then user secrets is already set up and ready to go. If not check out this site which explains all about the user secrets functionality as well as how to use dnu to install the secret manager.

Even with user secrets already set up with the Visual Studio template I am going to point out some of the important bits.

In the project.json file there are a couple of items related to user secrets. The first item is the user secrets ID for the project. The ID seems to be a combination of the project name and some randomly generated text.

"userSecretsId": "Your Secret ID"

The next item in the project.json is in the dependencies section.

"Microsoft.Framework.ConfigurationModel.UserSecrets": "1.0.0-beta4"

The next reference is found in Startup.cs in the constructor where the rest of the configuration is set up.

if (env.IsEnvironment("Development"))
{
    configuration.AddUserSecrets();
}

configuration.AddEnvironmentVariables();

It is important to note that the last configuration added takes priority. Using the above configuration setup with user secrets added first and environment variables added second if both configurations contained a setting for connection string then the one in environment variables would be used. If the connection string did not exist in environment variables then the values from user secrets would be used.

To access user secrets right-click on the project file and select manage user secrets.

ManageUserSecretsMenu

The Manage User Secrets menu choice will open up the secrets.json file. This file will not be located anywhere in the project’s directory structure. The actual file location can be found at “%APPDATA%\Microsoft\UserSecrets\<userSecretsId>\” but you should not really need to know the location or edit the file outside of Visual Studio or user-secret command line tool. Especially while using the beta since the location may not be finalized.

This is my set up of my current secret.json which I am using to store the values needed for OAuth with Google.

{
  "Authentication": {
    "Google": {
      "ClientId": "Your Client Id",
      "ClientSecret": "Your Client Secret"
    }
  }
}

In Statup.cs the ConfigureServices function I was able to replace my hard-coded Client Id and Client Secret with values from my secrets.json.

services.Configure(options =>
{
    options.ClientId = Configuration["Authentication:Google:ClientId"];
    options.ClientSecret = Configuration["Authentication:Google:ClientSecret"];
});

With those changes above sensitive information will be less likely to accidentally get check in to GitHub or any other repo. The only concern I have with setup is a configuration value getting added to a developer’s user secret but that setting never making it into the other develops or production configurations. That worry exists even when checking in configuration to source control just seem more likely to get missed when the values are outside of the project. Even with that concern user secrets are a great features that should help prevent private information from making it out into the public.

AJAX with ASP.NET 5

The next feature I wanted to handle moving my contacts application from ASP.NET 4 to ASP.NET 5 was not doing a full page refresh when applying a filter. For my implementation in ASP.NET 4 check out the Partial View and Partial View with AJAX posts.

For the partial view there is currently no menu choice but it is easy enough to create the view manually. In fact my _ContactList.cshtml looks exactly as it did in ASP.NET 4.

Rendering a partial view has changed slightly to use an async using await. The following is what replaced the contact list display in the contact index page.

<div id="contactList">
    @{
        await Html.RenderPartialAsync("_ContactList");
    }
</div>

At this point I was ready to add in AJAX to refresh my partial view when the user changes filters. In ASP.NET 4 there was the Ajax.BeginForm helper for making Ajax requests, but this does not currently exist in ASP.NET 5.

After a lot of searching I came across the jquery-ajax-unobtrusive github repo. This is the same library that was being used by Ajax.BeginForm ASP.NET 4 and it is available using Bower which ASP.NET 5 and Visual Studio 2015 have great support for.

Just by adding the following line to the dependencies section of my project’s bower.json the needed files were automatically download. The great thing about making edits in bower.json is that intellisense works!

"jquery-ajax-unobtrusive": "3.2.3"

The next step was to add the following line to the copy task in my project’s gulpfile.js.

"jquery-validation-unobtrusive": "jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"

I spent a good bit of time getting the gulp task to work. This is my first usage of gulp and at this point I still don’t know if there is an indicator that the copy failed other than the file the file not being at the specified location. My problem ended up being a typo of a dot instead of a dash.

With jquery-ajax-unobtrusive.js file in place the script needs to be include in _Layout.cshtml found in the Views\Shared folder. In _Layout.cshtml you will notice sections have been added for different environments. For the time being I have only change the scripts Development section with the following.

<script src="~/lib/jquery-ajax-unobtrusive/jquery.unobtrusive-ajax.js"></script>

The Staging and Production environment share the same set of script sources by default but can be separated if needed. The default setup also uses a CDN to pull scripts from by default with fallbacks to the local version. Before an actual deployment make sure to include jquery-ajax-unobtrusive.js in the Staging and Production environments.

Back in Contacts\Index.cshtml the filter form needs to change to the following.

@using (Html.BeginForm("Index", "Contacts", FormMethod.Post, new
{
    id = "filterButton",
    data_ajax = "true",
    data_ajax_method = "POST",
    data_ajax_mode = "replace",
    data_ajax_update = "#contactList"
}))
{
    <p>
        @Html.TextBox("Filter")
        <input type="submit" value="Filter"/>
    </p>
}

This is the standard Html.BeginForm with some added HTML attributes to support the Ajax call. The data_ajax* work because of jquery-ajax-unobtrusive. To get the values needed I ran the ASP.NET 4 version of my application and used view source to determine what values I needed. If you take the approach you will notice in the view source from the browser the data attributes will contain dashes which need to be changed to underscores for use in a razor view.

The last bit that needs to change is the index action of the contacts controller.

public IActionResult Index(string filter)
{
   var contacts = from c in _db.Contacts
                  select c;

   if (!string.IsNullOrEmpty(filter))
   {
     contacts = contacts.Where(c => c.Name.Contains(filter) ||
                                    c.Address.Contains(filter) ||
                                    c.City.Contains(filter) ||
                                    c.Email.Contains(filter) ||
                                    c.Phone.Contains(filter) ||
                                    c.State.Contains(filter) ||
                                    c.ZipCode.Contains(filter));
   }

   if (Request?.Headers != null && 
       Request.Headers["X-Requested-With"] == "XMLHttpRequest")
   {
     return PartialView("_ContactList",contacts);
   }

   return View(contacts);
}

The only gotcha here when moving from ASP.NET 4 is that the request object does not currently contain an IsAjaxRequest extension. Checking the X-Requested-With key of the request headers for XMLHttpRequest indicates an ajax request and triggers the return of the _ContactList partial view.

You should now have a working ajax request. It took me a while to get this all worked out I hope it saves you some time. Information on ASP.NET 5 can be sparce, but this will improve over time.

ASP.NET 5 IIS Express Configuration and OAuth 2

I am still in the process of getting all the features from my ASP.NET 4 contacts application moved into ASP.NET 5. Today I was working on getting OAuth 2 working with Google. All the code changes are in the Startup.cs in the root of the project.

In the Configuration function the options need to be set for Google authentication. This is where you set your client ID and secret. I covered the steps of getting this information from Google in this post if you need a reference.

services.Configure<GoogleAuthenticationOptions>(options =>
{
    options.ClientId = "Your Client ID";
    options.ClientSecret = "Your Client Secret";
});

In the Configure function add the following.

app.UseGoogleAuthentication();

The above is changing the Configuration and Configure functions which are pretty similar names that could be clearer. Configuration is where services are registered withASP.NET 5’s built in dependency injection container. Examples of potential services include Entity Framework, MVC, Web API, Application Settings and in my case Google Authentication.

The Configure function is where the HTTP request pipeline is set up. This can include things like serving static files, error handlers, MVC routes and Web API routes.

At this point I tried to run and use Google to login. I was greeted with at 400 – redirect_uri_mismatch. The URL my new project was using did not match the one I used when I setup OAuth with Google. I would like to say this was not a big deal, but it took me way longer to solve than I would like to admit. The settings for which port to use when debugging is in a bit of a different place than before. It can now be found on the debug tab of the project properties.

ProjectDebugProps

Under Other IIS Express setting there is also a check box for Enable SSL which I had to check as well since the URL I used with Google was HTTPS. In addition to the settings in the project properties I also had to edit the applicationhost file which is used by IIS Express. You can find this file in a hidden folder in the same directory as the solution file. The path is .vs\config. To find the relevant section search for your project name or for “site name=” and that should get you to the right area. I tweaked the setting I found there to match the changes I had made in my project properties. I don’t think this is something everyone will have to do and more than likely was a result of a misstep on my part.

I ended up having to manually edit my Contacts.xproj file to get the port settings I needed. The project properties UI will let you set a port, but not edit the HTTPS URL which meant I could not get the URL I need to make Google happy without manual changes. Following is the relevant portion of my Contacts.xproj file and it is the SSLPort I had to edit.

<PropertyGroup>
  <SchemaVersion>2.0</SchemaVersion>
  <DevelopmentServerPort>44301</DevelopmentServerPort>
  <SSLPort>44300</SSLPort>
</PropertyGroup>

At this point I can now start the application, but I have to manually use the HTTPS URL to get auth with Google to work since I have not found away to get Visual Studio to launch the using the HTTPS URL.

The good news is Google auth does work now!

New Model Using Entity Framework 7 and ASP.NET 5

Last week I created a very basic ASP.NET 5 application based on a Visual Studio template with no changes. I am now going to take that project and add in the ability to do CRUD operations for the following Contact model.

public class Contact
{
    public int Id { get; set; }
    [Required]
    [StringLength(200)]
    public string Name { get; set; }
    [StringLength(400)]
    public string Address { get; set; }
    [StringLength(100)]
    public string City { get; set; }
    [StringLength(2)]
    public string State { get; set; }
    [Display(Name = "Zip Code")]
    [StringLength(10)]
    public string ZipCode { get; set; }
    [StringLength(100)]
    public string Country { get; set; }
    [StringLength(40)]
    public string Phone { get; set; }
    [EmailAddress]
    public string Email { get; set; }

}

I am using Entity Framework 7 to manage database interaction. Entity Framework 7 is a full rewrite just like ASP.NET 5. To get access to contacts a DbContext is need just as in EF 6. The OnConfiguring override is new in EF 7 and was needed for me to get the controller generation process to work which is covered below. Optimally this connection string would be in a configuration file, but that is out of the scope of this post.

public class ContactsDbContext : DbContext
{
    public DbSet Contacts { get; set; }

    protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
    {
        optionsBuilder.UseSqlServer("Server=(localdb)\\mssqllocaldb;" +
                                    "Database=aspnet5-Contacts;" +
                                    "Trusted_Connection=True;" +
                                    "MultipleActiveResultSets=true");
    }
}

At this point I was ready to add a migration for the new model. I ran into a few issues getting this process working. I was unable to get migrations to work using the package manager console and ended up having to use a console. This should all be smoothed out by the time final release is done.

I ran all the command while in the same folder as the project.json file. The commands are run by the .Net Execution Environment or as the exe is name dnx.  Below is a screenshot of the console after running the migration add command.

cmderEfAddMigration

dnx . ef migration add ContactsInitial -c ContactsDbContext

The next step was to apply the migration to get the database setup which is also run in the console.

dnx . ef migration appy ContactsInitial -c ContactsDbContext

ASP.NET 4 had great support for creating controllers and views from a model. That functionality is currently missing from the UI of Visual Studio. This is another thing that I am sure will be added by the final release. But for now back to the console with the following command to create a controller and associated views.

dnx . gen controller -name ContactsController --dataContext ContactsDbContext --model Contact

Now we need some way to access the new views. I added a Contacts item to the nav bar. This is done by editing _Layout.cshtml in Views/Shared folder and adding the following line to the ul with a class of “nav navbar-nav”.

<li><a asp-controller="Contacts" asp-action="Index">Contacts</a></li>

At this point contacts should be useable.  What I discovered when I clicked on my Contacts link was a useable by very ugly page. The generated views are not using the shared layout by default. To fix this open all the views and remove the following from the top of the page.

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Create</title>
</head>
<body>

And the following from the bottom.

</body>
</html>

With the above removed the views will now use _Layout.cshtml and match the rest of the site. At this point the generated items pretty much match the scaffolding option from ASP.NET 4.

Basic ASP.NET 5 with Visual Studio 2015

The next version of ASP.NET is making a lot of progress and after watching Introducing ASP.NET 5 and Deep Dive into ASP.NET 5 from Build I decided to give it a try. The idea is to get the same Contacts application running in the new version of ASP. This will be a new solution so I am not trying to convert my existing solution and projects. With ASP.NET 5 Visual Studio is not the only option (Code is another option) for development, but Visual Studio is the route I am using for now.

The first step is to download and install Visual Studio 2015. Visual Studio 2015 has a ton of new stuff which I am not going to cover, but if you are interested check out this post from the Visual Studio Blog.

Next open Visual Studio and click File > New Project. This will show the new project dialog. At the top make sure you have .NET Framework 4.6 selected. Under Installed > Templates > Visual C# > Web select ASP.NET Web Application.aspNet5NewProjectNext the New ASP.NET Project dialog shows. Under the ASP.NET 5 Preview Temples select Web Site. This template will give the closest match to my existing Contact application.

aspNet5NewAspNetProjectAfter a minute or so the new project will be created and you will have something similar to the screenshot below.

aspNet5SolutionExplorer

For some reason I had a lot of problems getting the project to create properly. The project would get created but would be missing Models, Migrations and the views and controllers related to authentication. To get around this issue I cloned the ASP.NET Docs repo. The samples folder contains a project call WebApplication1 which contains all the needed files.

With WebApplication1 rename I was able to build and publish with no problems. I was going back to make screenshots for this post and the project creation actually worked. I am not sure if the act of publishing fixed something for Visual Studio, but now any Web Site temple project works fine.

At this point you will have a runnable application. I recommend checking out the Project_Readme.html that will be in your project as it has tons of information about all the stuff that has changed in ASP.NET 5. The videos linked at the top of the post are also a good place to start getting a handle on the new world that ASP.NET 5 is creating.

Other than the hiccups with project creation it is just as easy to get an application up and running in ASP.NET 5 as it was in ASP.NET 4. Compare a newly created project in ASP.NET 4 vs the one created here and you will notice tons of differences. Over the coming weeks my plan is to get this new application up to the point that the Contacts ASP.NET 4 application was at. From there the plan is to continue its development, and more importanly my learning, in ASP.NET 5.

More OAuth

Last week I covered using OAuth with Google for authentication. I thought I would try GitHub next only to find out Microsoft does not have a built in provider. After a little searching I came across OWIN OAuth Providers on GitHub. This project has a ton for providers ranging from BattleNet to Yammer.

To install run the following from the package manager console.

Install-Package Owin.Security.Providers

The rest of the process is very similar to last weeks post. I am going to walk through GitHub for this example but the others are very similar. The big difference for each provider is getting API access.

At the top of Statup.Auth.cs in the App_Start folder add the following.

using Owin.Security.Providers.GitHub;

And at the bottom of the ConfigureAuth function.

app.UseGitHubAuthentication(
    clientId: "Your Client ID",
    clientSecret:"Your Client Secret");

The next setup is to set up API access with GitHub. Login to GitHub and go to Developer applications.

oauthgithub

Click the Register new application button in the upper right of the page. On the registration page enter an application name, homepage URL and authorization callback URL. As last week the URL options will be need to be based on your project settings. After entering all your information click Register application.

oauthgithubRegisterApplication

Then next page will show your client ID and client secret which just need to be entered in Statup.Auth.cs. That is all there is to adding an additional OAuth provider and give your users even more authentication options.

oauthgithubLogin

Using OWIN OAuth Providers makes adding access other OAuth providers just as simple as the providers from Microsoft.

OAuth 2.0 with Google

After getting Basic Authentication and Authorization working I thought it would be neat to add login via Google which involves using OAuth 2.0. To get started I used NuGet to update all the OWIN related packages in my project. I ran across some people who had issues with older versions of OWIN so I recommend getting the latest to avoid any potential problems.

Some third parties require SSL when using their auth services so I decided to go a head and change my application to use SSL. I hit a couple of issues during this part of the process that I want to point out. The first is that when you change to SSL IIS Express defaults to using port 44300. I missed this the first try and it took a good bit of searching before I spotted the problem. Even after reverting all my changes I could not get my site to load without errors. A reboot got my reverted site working which I am assuming was a configuration issue with IIS Express that got reset on reboot.

To enable SSL select the project in Solution Explorer and press F4 to bring up the properties window (which has different options that the project properties you get if you right-click the project and click properties). Set the SSL Enabled property to true. Copy the SSL URL to use when updating the project.ContactsPropertiesSsl

Back in the Solution Explorer right-click on the project and click properties. On the Web tab under the Servers section paste the SSL URL from above into the Project Url and save.ContactsProjectPropertiesSslUrl

When running the first time after enabling SSL Visual Studio will prompt asking if you would like to trust the self-signed certificate that IIS Express generated. I chose to trust in order to avoid warnings from the browser.

OAuthTrustIISSSL

The last change need in the project is in the Statup.Auth.cs found in the App_Start folder. In the ConfigureAuth function add the following code using your own ClientId and ClientSecret.

app.UseGoogleAuthentication(new GoogleOAuth2AuthenticationOptions()
{
    ClientId = "Your Client ID",
    ClientSecret = "Your Client Secret"
});

If you don’t have a client ID and client secret head to the Google Developers Console. The first step in the process is to Click the Create Project button.

GoogleDevelopersConsoleEnter a project name and project ID. The refresh button on the project ID field will randomly generate project IDs in case the one you want is already in use. When finished click Create.
GoogleDevelopersConsoleNewProjectAfter the project creation process finishes click on the name of your project. Next click on the APIs & auth section and then click the Consent screen option. This set of options determines what the user sees when Google prompts a user for consent to use information from their Google account. The minimum needed is email address and product name. For a live application I would recommend filling out as much as possible to give the user the best experience. When done click Save.GoogleDevelopersConsoleAPIsAndAuthConsentScreenIn the same APIs & auth section click the APIs option. Search for Google+ API. Click the name Google+ API and on the next screen click Enable API.GoogleDevelopersConsoleAPIsAndAuthApisGooglePlusAgain in the APIs & auth section click on Credentials option and then in the OAuth section fo the page click Create new Client ID.
GoogleDevelopersConsoleAPIsAndAuthCredentialsThe following dialog will show. Select the appropriate Application type which is Web application for this example. For Authorized JavaScript origins use the value from Project Url listed above which in my case is https://localhost:44300/. For Authorized redirect URIs the base URI is the same but with an added level. For MVC 5 the redirect should be set to https://localhost:44300/signin-google changing the base URI as needed of course. Click Create Client ID and you will be returned to the previous page that will now list the Client ID and Client Secret needed in Statup.Auth.cs.
GoogleDevelopersConsoleAPIsAndAuthCredentialsCreateClientId

Now the login page will have a button for Google which will allow users to create an account and associate it with their Google account. After the association users will be able to login with their Google account.LoginWithGoogle

 

From this point adding Microsoft, Facebook or Twitter would just be a matter of adding the desired options to ConfigureAuth Startup.Auth.cs and going to each service and requesting API access.

Basic Authentication and Authorization

When I created my contact application I did so with authentication set to Individual User Accounts as seen below.
vs2013NewAspProject

 

By choosing an authentication option during project creation Visual Studio takes care of a lot of the work involved with getting authentication and authorization up and running. For individual user accounts the default data store is SQL and Visual Studio sets up the need classes and data using entity framework to create a database and the needed tables to store authentication data. An AccountController and associated views are also created to handle user creation and login.

I am not going to cover everything that Visual Studio created automatically. I will be walking you through the other changes are needed to start using authentication and authorization with all the bits Visual Studio has provided.

The first step is to add AuthorizeAttribute to the FilterConfig which is found in the App_Start folder.

public class FilterConfig
{
    public static void RegisterGlobalFilters(GlobalFilterCollection filters)
    {
        filters.Add(new HandleErrorAttribute());
        filters.Add(new AuthorizeAttribute());
    }
}

Now that the AuthorizeAttribute is added to the applications filters any page that is requested by a user that is not authorized will be redirected to a login page to authenticate.

With authorization and authentication now in play any controller action that should allow anonymous usage will need to have the AllowAnonymous attribute added. The following example is using AllowAnonymous on the index action of the home controller.

public class HomeController : Controller
{
    [AllowAnonymous]
    public ActionResult Index()
    {
        return View();
    }
}

That is all there is to get the very basics going. This is a big subject, but Visual Studio and .Net do a lot of work to make getting basics up and going simple.