Customizing the login UI when using OAuth/OpenID

  • Article

 Update 1/11/2013: Fixing the code for webforms

In the last post I showed how you can plug in your own OAuth/OpenID provider. This post shows you how you can pass in extra data about the provider such as display name, image etc and use this information when building up the UI for login screen

 

If you see the experience of login screen in the ASP.NET templates, it looks like this.

Let’s see how can we customize this UI to look like the following

Web Forms

  • Pass in extra data in App_Start\AuthConfig.cs when registering the provider as follows
 OpenAuth.AuthenticationClients.AddFacebook(

                 appId: "your Facebook app id",

                 appSecret: "your Facebook app secret",

                  extraData: new { Icon = "~/Images/facebook.png" }

                 );

 

  • Access this data in the View(in the WebForms Internet template case it is Account\OpenAuthProviders.ascx
 <img src="<%# Item.ExtraData["Icon"] %>" alt="Alternate Text" />

 

MVC

  • Pass in extra data in App_Start\AuthConfig.cs when registering the provider as follows
 Dictionary<string, object> FacebooksocialData = new Dictionary<string, object>();

             FacebooksocialData.Add("Icon", "~/Images/facebook.png");

             OAuthWebSecurity.RegisterFacebookClient(

                 appId: "someid",

                 appSecret: "somesecret",

                 displayName: "Facebook",

                 extraData: FacebooksocialData);
  • Access this data in the View(in the MVC Internet template case it is Views\Account\_ExternalLoginsListPartial

 

  @foreach (AuthenticationClientData p in Model)

         {

             <img src="@p.ExtraData["Icon"]" alt="Icon for @p.DisplayName" />

            }

 

WebPages

  • In _AppStart.cshtml

 

 Dictionary<string, object> FacebooksocialData = new Dictionary<string, object>();

             FacebooksocialData.Add("Icon", "~/Images/facebook.png");

             OAuthWebSecurity.RegisterFacebookClient(

                 appId: "empty",

                 appSecret: "empty",

                 displayName: "Facebook",

                 extraData: FacebooksocialData);

 

  • Access this data in the View(in the webpages template case it is Account\_ExternalLoginsListPartial
  @foreach (AuthenticationClientData p in Model)

         {

             <img src="@p.ExtraData["Icon"]" alt="Icon for @p.DisplayName" />

            }

Comments

  • Anonymous
    November 25, 2012
    Hi Pranav. My openAuth is working with all 4 providers in my Web Forms app. When I try to customize UI following this tutorial I'm getting en exception: System.Reflection.TargetParameterCountException - "Parameter count mismatch" in method OpenAuth.AuthenticationClients.AddFacebook() Am I missing something? Any help appreciated.

  • Anonymous
    December 04, 2012
    When I try to customize UI following this tutorial I'm getting en exception: System.Reflection.TargetParameterAddException - "Null pointer exception" in method OpenAuth.AuthenticationClients.AddOrkut()

  • Anonymous
    December 29, 2012
    +1 for parameter count mismatch problem when using in Web Forms app.  Any solution?

  • Anonymous
    January 10, 2013
    thanks, but it works better using VirtualPathUtility.ToAbsolute("~/Images/Microsoft.png") Regards

  • Anonymous
    January 10, 2013
    @Neal I updated the code for webforms which was failing. It should work now

  • Anonymous
    July 08, 2013
    Pranav, I don't think your code is working for WebPages. Any chance you could take another look at that?

  • Anonymous
    February 27, 2014
    i am working in web forms, i am facing a error " the key was not present in the dictionary" will u plz help me out from this

  • Anonymous
    March 02, 2014
    Do we need to copy the icon to Image folder or will this be pulled from FB ?