.NET Core 1

Updated April 13th 2018

Tested with .NET Core Version: 1.1

Add PixelPin for a simple and secure way to access your .NET Core 1 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 1.0 or 1.1. 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;
    using Microsoft.IdentityModel.Tokens;
    using Microsoft.AspNetCore.Http;
    using Microsoft.AspNetCore.Authentication.OpenIdConnect; //Install version 1.1.3
    
  4. Add the following code in the Configure method below where app.UseIdentity(); is called to configure the PixelPin OpenID Connect provider so that you can use PixelPin to Single Sign On into your Web Application.

    app.UseCookieAuthentication(new CookieAuthenticationOptions
    {
        AuthenticationScheme = "Cookies",
        AutomaticAuthenticate = true
    });
     
     
    app.UseOpenIdConnectAuthentication(new OpenIdConnectOptions()
    {
        AuthenticationScheme = "oidc",
        Authority = "https://login.pixelpin.io",
        ResponseType = OpenIdConnectResponseType.Code,
        SignInScheme = "Cookies",
        ClientId = "Client-ID", //Copy and paste the Client ID you obtained from creating your PixelPin Developer Account.
        ClientSecret = "Client-Secret", //Copy and paste the Client Secret you obtained from creating your PixelPin Developer Account.
        GetClaimsFromUserInfoEndpoint = true,
        TokenValidationParameters = new TokenValidationParameters
        {
            ValidateIssuer = true
        },
        SaveTokens = true,
        Scope = {"openid", "profile", "email"},
        CallbackPath = new PathString("/signin-pixelpin")
    });
    
  5. Next we'll update the Logout method in Controllers/AccountController.cs file to allow the PixelPin user to log out successfully.

    await HttpContext.Authentication.SignOutAsync("Cookies");
    
  6. Next we'll update the Controller/HomeController.cs file to add a 'secure' controller to authenticate the user.

    Add the following using statement:

    using Microsoft.AspNetCore.Authorization;
    

    Add the following code:

    [Authorize]
    public IActionResult Secure()
    {
        return View();
    }
    
  7. Next we'll create a new file called Secure.cshtml in Views/Home with the following code:

    @{
        ViewData["Title"] = "Security";
    }
    <h2>Secure</h2>
     
    <dl>
        @foreach (var claim in User.Claims)
        {
            <dt>@claim.Type</dt>
            <dd>@claim.Value</dd>
        }
    </dl>
    
  8. Next we'll update the Nav Bar links and text content as well as the razor if statement in Views/Shared/_LoginPartial.cshtml. First we'll update the user welcome message on line 12 to look like the following:

    <a asp-area="" asp-controller="Manage" asp-action="Index" title="Manage">Hello @User.Claims.Where( c => c.Type == "nickname").FirstOrDefault().Value!</a>
    

    Then add the secure link to allow you to see the user claims under the user welcome message nav link:

    <li>
        <a asp-area="" asp-controller="Home" asp-action="Secure" title="Manage">Secure</a>
    </li>
    

    Then update the if statement on line 7 to check if the PixelPin user is authenticated like so:

    @if (SignInManager.IsSignedIn(User) || User.Identity.IsAuthenticated)
    

    So _loginPartial.cshtml should look like this:

  9. Finally we need to update the loginProviders form in Views/Account/Login.cshtml. On line 74, update the asp-controller and asp-action properties to be the following:

    <form asp-controller="Home" asp-action="Secure" asp-route-returnurl="@ViewData["ReturnUrl"]" method="post" class="form-horizontal">
    

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.