PixelPin Developer Documentation

.NET Core 3.1

Updated July 16th 2020

Add PixelPin for a simple and secure way to access your .NET Core site

  1. Create a New ASP.NET Core Web Application Project
  2. Modify the Web Application Project
  3. Testing the integration

Create a New ASP.NET Core Web Application Project

Screenshots from Visual Studio 2019

  1. From Visual Studio, create a new "ASP.NET Core Web Application" project. Press Next.

  1. Give the project a name and be sure to select the appropriate version of .NET Core (this guide was tested with .NET Core 3.1, the LTS version of the 3.x branch). Press Create.
  2. Select Web Application (Model-View-Controller). PixelPin should work for any template, but this guide will use MVC). Next change the Authentication method to "Individual User Accounts". Press Create.

Modify the Web Application Project

Unlike .NET Framework, code flow is actually supported this time around and is simply a few config settings away. We DO NOT recommend using Implict Flow due to its security shortcomings.

  1. First, you'll need to create a PixelPin developer account to obtain your Client ID and secret. A guide on how to do this can be found following this link. For this tutorial, your Redirect URI will be http(s)://{BASE_URL}/signin-pixelpin, for example http://localhost:54654/signin-pixelpin.
    • While creating the PixelPin developer account, make sure you set the OpenID flow to Authorisation Code.
  2. Install the following NuGet packages:
    • Microsoft.AspNetCore.Authentication.OpenIdConnect - Tested with 3.1.6
  3. Open up Startup.cs and:
    • Add a using declaration for your new extensions class, e.g. using NetCore31Test.Extensions;
    • Near the bottom of the ConfigureServices method (but before the call to AddMvc) add the following code:
    services.AddAuthentication()
       .AddCookie()
       .AddOpenIdConnect("PixelPin", "PixelPin", openIdConnectOptions =>
       {
           // TODO: For production use "https://api.login.pixelpin.io";
           openIdConnectOptions.Authority = "https://api.sandbox.pixelpin.net";
           openIdConnectOptions.ClientId = "YOUR_CLIENT_ID";
           openIdConnectOptions.ClientSecret = "YOUR_CLIENT_SECRET";
           openIdConnectOptions.ResponseType = OpenIdConnectResponseType.Code;
           openIdConnectOptions.GetClaimsFromUserInfoEndpoint = true;
           openIdConnectOptions.CallbackPath = "/signin-pixelpin";
           openIdConnectOptions.Scope.Add("openid");
           openIdConnectOptions.Scope.Add("email");
           openIdConnectOptions.Scope.Add("profile");
       });
    
  4. Open up Controllers/HomeController.cs and:
    • Modify the Privacy method to look like the following:
    public ActionResult Privacy()
    {
        return View(User.Claims);
    }
    
  5. Open up Views/Home/Privacy.cshtml and add the following code to the html. This will display the claims sent from PixelPin:
     @model IEnumerable<System.Security.Claims.Claim>
    
     <dl>
         @foreach (var claim in Model)
         {
             <dt>@claim.Type</dt>
             <dd>@claim.Value</dd>
         }
     </dl>
    

Testing the integration

  1. Run the Web Application up and head to the log in page by selecting the Log In link in the Nav Bar.
  2. Select the "PixelPin" Button.

  1. You should be taken to PixelPin to complete your authentication
  2. On return, select Privacy and you should see details of the user you authenticated as

Follow this link to see how to use our official PixelPin styling in your web application following.