.NET Framework

Updated April 13th 2018

Tested with .NET Framework Version: 4.7.1

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

Create a New .NET Framework 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 → ASP.NET Web Application (.NET Framework). Give the project a name and press OK.

  2. 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

Code flow isn't supported by the Microsoft.Owin.Security.OpenIdConnect library. We recommend using Implict Flow.
  1. First, you'll need to create a PixelPin developer account to obtain your Client ID. 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.

    While creating the PixelPin developer account, make sure you set the OpenID flow to Implict.
  2. Open up App_Start/Startup.Auth.cs.

  3. Install and add the following using statement:

    using Microsoft.Owin.Security.OpenIdConnect;
    
  4. Add the following code at the bottom of the ConfigureAuth method to configure the PixelPin OpenID Connect provider so that you can use PixelPin to Single Sign On into your Web Application:

    app.UseOpenIdConnectAuthentication(new OpenIdConnectAuthenticationOptions
    {
        Authority = "https://login.pixelpin.io",
        ClientId = "Client-ID", //Copy and paste the Client ID you obtained from creating your PixelPin Developer Account.
        Scope = "openid profile email",
        RedirectUri = "https://www.baseurl.co.uk/signin-pixelpin", //Type in your Redirect URI here
        ResponseType = "id_token token"
    });
    
  5. Open up Controllers/HomeController.cs.

  6. Add the following using statement:

    using System.Security.Claims;
    
  7. Modify the About method to look like the following:

    public ActionResult About()
    {
        return View((User as ClaimsPrincipal).Claims);
    }
    
  8. Open up Views/Home/About.cshtml.

  9. 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 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.