Your official information source from the .NET Web Development and Tools group at Microsoft.
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
OpenAuth.AuthenticationClients.AddFacebook(
appId: "your Facebook app id",
appSecret: "your Facebook app secret",
extraData: new { Icon = "~/Images/facebook.png" }
);
<img src="<%# Item.ExtraData["Icon"] %>" alt="Alternate Text" />
Dictionary<string, object> FacebooksocialData = new Dictionary<string, object>();
FacebooksocialData.Add("Icon", "~/Images/facebook.png");
OAuthWebSecurity.RegisterFacebookClient(
appId: "someid",
appSecret: "somesecret",
displayName: "Facebook",
extraData: FacebooksocialData);
@foreach (AuthenticationClientData p in Model)
{
<img src="@p.ExtraData["Icon"]" alt="Icon for @p.DisplayName" />
}
appId: "empty",
appSecret: "empty",
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
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.
// FacebooksocialData.Add("Icon", "~/Images/facebook.png");
"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).