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
Dictionary<string, object> FacebooksocialData = new Dictionary<string, object>();
FacebooksocialData.Add("Icon", "~/Images/facebook.png");
OpenAuth.AuthenticationClients.AddFacebook(
appId: "your Facebook app id",
appSecret: "your Facebook app secret",
extraData: FacebooksocialData
);
-
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