Customizing the login UI when using OAuth/OpenID

Customizing the login UI when using OAuth/OpenID

Rate This
  • Comments 12

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" />
           }

Cross posted to http://blogs.msdn.com/b/pranav_rastogi/archive/2012/08/24/customizing-the-login-ui-when-using-oauth-openid.aspx

Pranav Rastogi | @rustd

Leave a Comment
  • Please add 7 and 2 and type the answer here:
  • Post
  • can this be done in .net 2.0?

  • This is possible in .NET 4.0/4.5

  • This was a great post Pranav. I found this content very helpful for my newly launched site. Thanks for the post. Here at www.hireawiz.com/.../scottsdale-web-design you can find similar webpage customizing information.

  • I got an exception "Parameter count mismatch" when I Tried the above example for Web Forms! Any ideas?

  • It works..can you please post your code that you have

  • @pranav rastogi: The code is exactly the same as in the example above. The MVC example works fine.

  • Another question: In the MVC example, how do you define the action for the image?

  • That would actualy be:

    <button type="submit" name="provider" style="width:32px;height:32px;border:none;color:transparent;background:url(@p.ExtraData["Icon"]) no-repeat center center;" value="@p.AuthenticationClient.ProviderName" title="Log in using your @p.DisplayName account"></button>

    In order for the post to work.

  • Thanx @Gal Ratnet for your response!! Another way could be the following:

               <button type="submit" name="provider" value="<%: p.AuthenticationClient.ProviderName %>" title="Log in using your <%: p.DisplayName %> account">

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

               </button>

    You should also replace the CSS rule #socialLoginList button with the following:

    #socialLoginList button {

       margin-bottom: 12px;

       background:none;

       border:none;

    }

  • @Spyros, we are going in circles :) will it be possible to post your applications somewhere. maybe share it out with skydrive or something?

  • Thanks for the blog post. Very useful.

  • I also get the Parameter count mismatch, with or without any values specified in the FB social data var.

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

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

               OpenAuth.AuthenticationClients.AddFacebook(

                   "490681157619134",

                   "90c660d969aa59d6fae4a2b3dd153ad2",

                   FacebooksocialData

                   );

    Is there any documentation on what should be passed in here and what happens?  I'm trying to set some permissions for a FB app for login here, but it's hard to see how to call things (and no source available).

Page 1 of 1 (12 items)