Wow that’s a blog post title I never thought I’d write considering I started the year blogging all the things related to Git and GitHub! 🙂  I should come full circle and have Hubot call a B2C-secured API using coffeescript! Hmm…

In my previous post, you saw how to create a new ASP.NET Core Web API 2 and secure it using Azure AD B2C. Today’s blog post discusses how to call this API from a Single Page Application (think javascript).

Why not just make the call as before? Because you’ll get this error message:

Error calling the Web api:
error

If you open up the Developer Tools – Console window, you’ll see the full error message:

Failed to load https://localhost:44332/hello: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin http://localhost:6420 is therefore not allowed access. The response had HTTP status code 404.

Using CORS on an ASP.NET Core Web API 2

I’m following this how to article on enabling CORS in an ASP.NET Core application.

Using my example API (here’s the diff), you’ll first want to add CORS to your ConfigureServices() method in Startup.cs

public void ConfigureServices(IServiceCollection services) {
  services.AddCors();

Next, you’ll want to configure Cors in your Configure method

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory) {
  app.UseCors(builder =>
    builder.WithOrigins("http://localhost:6420").AllowAnyHeader().AllowAnyMethod());

And that’s it! Now run your application.

Note that…

I had to use AllowAnyHeader() and AllowAnyMethod(). I thought this might be implied since the article didn’t call it out. I’m also curious if there’s a way to tighten this even more. I practice paranoia-driven development.

Updating the Single Page App to call the B2C protected Resource

I’m using the Azure AD B2C MSAL.js sample. Why this sample? No particular reason. It was the just first B2C javascript sample I learned.

First, you’ll want to register this app in your B2C Tenant. Don’t forget to provide API-level access to this app.

Clone the repo, open in VSCode, and update the B2C coordinates in index.html in this section. For b2cScopes and webApi, I left the ones from the previous blog post.

clientID:'your application id for your SPA',
authority:"https://login.microsoftonline.com/tfp/.onmicrosoft.com/",
b2cScopes: ["https://.onmicrosoft.com/HelloCoreAPI/demo.read"],
webApi:'https://localhost:44332/hello',

That’s it! To start your SPA, go to the command line and in the same directory as server.js run node server

Now log into the web application and call the API. And you’ll see “Hello there!” returned!

Note: if you forget to provide API-level permissions to the SPA in the Azure B2C portal, you’ll see an error message that popups are being blocked. Open the Developer Tools – Console window and click the link for the full error message.

• Azure AD B2C