Greg Sansom: Using the Google openid-selector with ASP.NET

Today we'll walk through a very simple implementation of the Google openid-selector in ASP.NET. When we're finished we'll have a login page that looks like this:

Prerequisites

An existing ASP.NET website project
Basic understanding of ASP.NET
Basic c# programming skills

Procedure

Download DotNetOpenAuth (I'm using v3.4.7). Locate DotNetOpenAuth.dll and add it as a reference to your ASP.NET project.
Download openid-selector (I'm using v1.3). Extract the contents, and copy the openid-selector/Images folder to the root of your website. Copy the openid-selector folder to the root of your website. The folder structure should look like this:

Create a new page named Login.aspx, with the following markup:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="OpenIdSelectorDemo.Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link type="text/css" rel="stylesheet" href="openid-selector/css/openid.css" />
    <script type="text/javascript" src="openid-selector/js/jquery-1.2.6.min.js"></script>
    <script type="text/javascript" src="openid-selector/js/openid-jquery.js"></script>
    <script type="text/javascript" src="openid-selector/js/openid-en.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            openid.init('openid_identifier');
        });  
    </script>
</head>
<body>
    <form id="openid_form" name="action" action="Login.aspx" method="post">
    <div>
        <fieldset>
            <legend>Sign-in or Create New Account</legend>
            <div id="openid_choice">
                <p>
                    Please click your account provider:</p>
                <div id="openid_btns">
                </div>
            </div>
            <div id="openid_input_area">
                <input id="openid_identifier" name="openid_identifier" type="text" value="http://" />
                <input id="openid_submit" type="submit" value="Sign-In" />
            </div>
        </fieldset>
    </div>
    </form>
</body>
</html>

Open Login.aspx.cs, and place in it the following code:

    public partial class Default : System.Web.UI.Page
    {
        private static OpenIdRelyingParty openid = new OpenIdRelyingParty();
        protected void Page_Load(object sender, EventArgs e)
        {
            var response = openid.GetResponse();
            if (response == null)
            {
                Identifier id;
                if (Identifier.TryParse(Request.Form["openid_identifier"], out id))
                {
                    try
                    {
                        IAuthenticationRequest request = openid.CreateRequest(Request.Form["openid_identifier"]);

                        ClaimsRequest fields = new ClaimsRequest();
                        fields.Email = DemandLevel.Request;
                        request.AddExtension(fields);

                        request.RedirectToProvider();
                    }
                    catch (ProtocolException ex)
                    {
                        writeError(ex.Message);
                    }
                }
                return;
            }

            switch (response.Status)
            {
                case AuthenticationStatus.Authenticated:
                    UriIdentifier id = (UriIdentifier)response.ClaimedIdentifier;
                    ClaimsResponse claimsResponse = response.GetExtension<ClaimsResponse>();
                    string userName = response.ClaimedIdentifier.ToString();
                    loginUser(userName, claimsResponse);
                    break;
                case AuthenticationStatus.Canceled:
                    writeError("Canceled at provider");
                    break;
                case AuthenticationStatus.Failed:
                    writeError(response.Exception.Message);
                    break;
            }

        }

        private void writeError(string message)
        {
            Response.Write(message);
        }

        private void loginUser(string userName, ClaimsResponse claimsResponse)
        {
            Response.Write(userName);
            //User has been verified by their OpenID provider.  Add code here to interact with
            //your membership provider and redirect to your website.
        }
    }

From here you can edit the loginUser(...) method to fit in with your projects login process.

You can download my demo project here.

Greg Sansom

Thursday, 7 July 2011

Using the Google openid-selector with ASP.NET

Prerequisites

Procedure

No comments:

Post a Comment