.NET Core 2

Updated April 13th 2018

Tested with .NET Core Version: 2.0

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

Create a New .NET Core Web Application Project

Screenshots from Visual Studio 2017
  1. From Visual Studio, create a new project: File → New → Project. In the New Project window: Visual C# → Web → .NET Core → ASP.NET Core Web Application. Give the project a name and press OK.

  2. Make sure the .NET Core version is set to ASP.NET Core 2.0. Select Web Application. Then Select Change Authentication.

  3. Select Individual User Accounts. This will add the required middleware, database tables and pages/controllers for user management. Then select OK

  4. You can now see that Individual User Accounts has been selected. Select OK to create the Web Application.

Modify the Web Application Project

  1. First, you'll need to create a PixelPin developer account to obtain your Client ID and Client Secret. A guide on how to do this can be found following this link. Your Redirect URI will be http(s)://www.baseurl.co.uk/signin-pixelpin, for example http://localhost:54654/signin-pixelpin.

  2. Open up Startup.cs.

  3. Install and add the following using statement:

    using Microsoft.IdentityModel.Protocols.OpenIdConnect;
    
  4. Add the following code below the ConfigureServices method to configure the PixelPin OpenID Connect provider so that you can use PixelPin to Single Sign On into your Web Application.

    services.AddAuthentication(sharedOptions => { })
    	.AddCookie()
    	.AddOpenIdConnect("PixelPin", "PixelPin", openIdConnectOptions =>
    	{
    		openIdConnectOptions.Authority = "https://login.pixelpin.io";
    		openIdConnectOptions.UseTokenLifetime = true;
    		openIdConnectOptions.ClientId = "Client-ID"; //Copy and paste the Client ID you obtained from creating your PixelPin Developer Account.
    		openIdConnectOptions.ClientSecret = "Client-Secret"; //Copy and paste the Client Secret you obtained from creating your PixelPin Developer Account.
    		openIdConnectOptions.ResponseType = OpenIdConnectResponseType.Code;
    		openIdConnectOptions.ProtocolValidator.RequireNonce = false;
    		openIdConnectOptions.SaveTokens = true;
    		openIdConnectOptions.GetClaimsFromUserInfoEndpoint = true;
    		openIdConnectOptions.CallbackPath = "/signin-pixelpin"; //Redirect path
    		openIdConnectOptions.Scope.Add("openid");
    		openIdConnectOptions.Scope.Add("email");
    		openIdConnectOptions.Scope.Add("profile");
    	});
    

Update Models, Views, and Controller

  1. Open up Models\AccountViewModels\ExternalLoginViewModel.cs, Models\ManageViewModels\IndexViewModel.cs and Models\ApplicationUser.cs and add the following code:

    public string GivenName { get; set; }
    
    public string FamilyName { get; set; }
    
  2. Open up Controllers/ManageController.cs and add the following code in the model variable on line 58:

    GivenName = user.GivenName,
    FamilyName = user.FamilyName
    
  3. Open up Controllers/AccountController.cs.

  4. In the ExternalLoginCallback method, on line 295 add the following code:

    var userInfo = info.Principal.Claims.ToArray();
    var givenName = userInfo.Where(c => c.Type == "given_name").FirstOrDefault()?.Value;
    var familyName = userInfo.Where(c => c.Type == "family_name").FirstOrDefault()?.Value;
    

    and modify the return View to look like this:

    return View("ExternalLogin", new ExternalLoginViewModel { Email = email, GivenName = givenName, FamilyName = familyName });
    

    so your ExternalLoginCallback method looks like this:

  5. Staying in AccountController.cs, modify the user variable in ExternalLoginConfirmation method on line 316 (aprox) to look like this:

    var user = new ApplicationUser { UserName = model.Email, Email = model.Email, GivenName = model.GivenName, FamilyName = model.FamilyName };
    
  6. In Views/Account/ExternalLogin.cshtml, modify the ExternalLoginConfirmation form (line 18) to include two new form fields using the code below:

    <div class="form-group">
        <label asp-for="GivenName"></label>
        <input asp-for="GivenName" class="form-control" />
        <span asp-validation-for="GivenName" class="text-danger"></span>
    </div>
     
    <div class="form-group">
        <label asp-for="FamilyName"></label>
        <input asp-for="FamilyName" class="form-control" />
        <span asp-validation-for="FamilyName" class="text-danger"></span>
    </div>
    

    So it looks like this:

  7. In Views/Manage/Index.cshtml, on line 38 include two new form fields at the bottom of the form using the code below:

    <div class="form-group">
        <label asp-for="GivenName"></label>
        <input asp-for="GivenName" class="form-control" />
        <span asp-validation-for="GivenName" class="text-danger"></span>
    </div>
     
    <div class="form-group">
        <label asp-for="FamilyName"></label>
        <input asp-for="FamilyName" class="form-control" />
        <span asp-validation-for="FamilyName" class="text-danger"></span>
    </div>
    

    So it looks like this:

  8. You'll now need to migrate and update your database.

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 Login With PixelPin SSO Button.

Want your single sign on button to look like the one in the image above? Check out how to use our official PixelPin SSO styling in your web application following this link.