Set-up

After you’ve created your Asp.Net Core 2 application, the first step is to install React; which is a NuGet package:

Install-Package React.AspNet -Source nuget.org

There are some code tweaks that are needed; the first is in startup.cs (which basically tells Asp to use React, and how to do so):

services.AddTransient< … services.AddSingleton<IHttpContextAccessor, HttpContextAccessor>(); services.AddReact(); services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);

app.UseReact(config => { }); app.UseHttpsRedirection(); app.UseStaticFiles(); app.UseCookiePolicy();

You’ll need to slightly change the signature of ConfigureServices, too:

public IServiceProvider ConfigureServices(IServiceCollection services) { . . . return services.BuildServiceProvider(); }

The next thing is to make React available to your views; in ViewImports.cshtml:

@using UsefulSites.Web @using UsefulSites.Web.Models @using UsefulSites.Web.ViewModels @using React.AspNet @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

React Code

Next step is to create the ReactJs file:

class SearchBox extends React.Component { render() { return ( <div className="search-container"> <textarea> Search Text </textarea> </div> ); } } ReactDOM.render( <SearchBox />, document.getElementById('content') );

Then change the HTML file:

As you can see, the React script references the div named “content” specifically.

B2C is (one of) Microsoft’s offering to allow us programmers to pass the business of managing log-ins and users over to people who want to be bothered with such things. This post contains very little code, but lots of pictures of configuration screens, that will probably be out of date by the time you read it.

A B2C set-up starts with a tenant. So the first step is to create one:

Select “Create a resource” and search for B2C:

Then select “Create”:

Now you can tell Azure what to call you B2C tenant:

It takes a while to create this, so probably go and get a brew at this stage. When this tenant gets created, it gets created outside of your Azure subscription; the next step is to link it to your subscription:

Once you have a tenant, and you’ve linked it to your subscription, you can switch to it:

If you haven’t done all of the above, but you’re scrolling down to see what the score is for an existing, linked subscription, remember that you need to be a Global Administrator for that tenant to do anything useful.

Once you’ve switched to your new tenant, navigate to the B2C:

Your first step is to tell the B2C tenant which application(s) will be using it. Select “Add” in “Applications”:

This also allows you to tell B2C where to send the user after they have logged in. In this case, we’re just using a local instance, so we’ll send them to localhost:

It doesn’t matter what you call the application; but you will need the Application ID and the key (secret), so keep a note of that:

You’ll need to generate the secret:

Policies

Policies allow you to tell B2C exactly how the user will register and log-in: do they just need an e-mail, or their name, or other information, what information should be available to the app after a successful log-in, and whether to use multi-factor authentication.

Add a policy: