{"id":14841,"date":"2012-08-24T16:16:00","date_gmt":"2012-08-24T16:16:00","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/webdev\/2012\/08\/24\/customizing-the-login-ui-when-using-oauthopenid\/"},"modified":"2023-12-22T14:10:41","modified_gmt":"2023-12-22T22:10:41","slug":"customizing-the-login-ui-when-using-oauthopenid-2","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/dotnet\/customizing-the-login-ui-when-using-oauthopenid-2\/","title":{"rendered":"Customizing the login UI when using OAuth\/OpenID"},"content":{"rendered":"<p>In the <a href=\"http:\/\/blogs.msdn.com\/b\/pranav_rastogi\/archive\/2012\/08\/23\/plugging-custom-oauth-openid-providers.aspx\" target=\"_blank\" rel=\"noopener\">last post<\/a> 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<\/p>\n<p>&nbsp;<\/p>\n<p>If you see the experience of login screen in the ASP.NET templates, it looks like this.<\/p>\n<div id=\"scid:8747F07C-CDE8-481f-B0DF-C6CFD074BF67:65ed6666-f1fa-4a9f-9780-b0407b507602\" class=\"wlWriterEditableSmartContent\" style=\"margin: 0px;padding: 0px;float: none\"><a title=\"\" href=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2012\/08\/8551.oauthbutton_4FC8B3F2.png\" rel=\"thumbnail\"><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2012\/08\/8551.oauthbutton_4FC8B3F2.png\" alt=\"\" width=\"335\" height=\"144\" border=\"0\" \/><\/a><\/div>\n<p>Let&rsquo;s see how can we customize this UI to look like the following<\/p>\n<div id=\"scid:8747F07C-CDE8-481f-B0DF-C6CFD074BF67:75bd7eab-fae1-4617-ac40-b37930747ab2\" class=\"wlWriterEditableSmartContent\" style=\"margin: 0px;padding: 0px;float: none\"><a title=\"\" href=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2012\/08\/5811.oauthicons_61A547BF.png\" rel=\"thumbnail\"><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2012\/08\/5811.oauthicons_61A547BF.png\" alt=\"\" width=\"335\" height=\"145\" border=\"0\" \/><\/a><\/div>\n<h3>Web Forms<\/h3>\n<ul>\n<li>Pass in extra data in App_StartAuthConfig.cs when registering the provider as follows<\/li>\n<\/ul>\n<div class=\"csharpcode\">\n<pre class=\"alt\">            OpenAuth.AuthenticationClients.AddFacebook(<\/pre>\n<\/div>\n<div class=\"csharpcode\">\n<pre>                appId: <span class=\"str\">\"your Facebook app id\"<\/span>,<\/pre>\n<\/div>\n<div class=\"csharpcode\">\n<pre class=\"alt\">                appSecret: <span class=\"str\">\"your Facebook app secret\"<\/span>,<\/pre>\n<\/div>\n<div class=\"csharpcode\">\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; extraData: <span class=\"kwrd\">new<\/span> <span style=\"font-family: Consolas;font-size: x-small\"><span style=\"font-family: Consolas;font-size: x-small\">{ Icon = <\/span><\/span><span style=\"color: #a31515;font-family: Consolas;font-size: x-small\"><span style=\"color: #a31515;font-family: Consolas;font-size: x-small\"><span style=\"color: #a31515;font-family: Consolas;font-size: x-small\">&#8220;~\/Images\/facebook.png&#8221;<\/span><\/span><\/span><span style=\"font-family: Consolas;font-size: x-small\"><span style=\"font-family: Consolas;font-size: x-small\"> }<\/span><\/span><\/p>\n<pre>                );<\/pre>\n<\/div>\n<ul>\n<li>\n<div class=\"csharpcode\">Access this data in the View(in the WebForms Internet template case it is AccountOpenAuthProviders.ascx<\/div>\n<\/li>\n<\/ul>\n<pre class=\"csharpcode\">&lt;img src=<span class=\"str\">\"&lt;%# Item.ExtraData[\"<\/span>Icon<span class=\"str\">\"] %&gt;\"<\/span> alt=<span class=\"str\">\"Alternate Text\"<\/span> \/&gt;<\/pre>\n<p>&nbsp;<\/p>\n<h3>MVC<\/h3>\n<ul>\n<li>Pass in extra data in App_StartAuthConfig.cs when registering the provider as follows<\/li>\n<\/ul>\n<div class=\"csharpcode\">\n<pre class=\"alt\">Dictionary&lt;<span class=\"kwrd\">string<\/span>, <span class=\"kwrd\">object<\/span>&gt; FacebooksocialData = <span class=\"kwrd\">new<\/span> Dictionary&lt;<span class=\"kwrd\">string<\/span>, <span class=\"kwrd\">object<\/span>&gt;();<\/pre>\n<\/div>\n<div class=\"csharpcode\">\n<pre>            FacebooksocialData.Add(<span class=\"str\">\"Icon\"<\/span>, <span class=\"str\">\"~\/Images\/facebook.png\"<\/span>);<\/pre>\n<\/div>\n<div class=\"csharpcode\">\n<pre class=\"alt\">            OAuthWebSecurity.RegisterFacebookClient(<\/pre>\n<\/div>\n<div class=\"csharpcode\">\n<pre>                appId: <span class=\"str\">\"someid\"<\/span>,<\/pre>\n<\/div>\n<div class=\"csharpcode\">\n<pre class=\"alt\">                appSecret: <span class=\"str\">\"somesecret\"<\/span>,<\/pre>\n<\/div>\n<div class=\"csharpcode\">\n<pre>                displayName: <span class=\"str\">\"Facebook\"<\/span>,<\/pre>\n<\/div>\n<div class=\"csharpcode\">\n<pre class=\"alt\">                extraData: FacebooksocialData);<\/pre>\n<\/div>\n<ul>\n<li>\n<div class=\"csharpcode\">Access this data in the View(in the MVC Internet template case it is ViewsAccount_ExternalLoginsListPartial<\/div>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<div class=\"csharpcode\">\n<pre class=\"alt\"> @<span class=\"kwrd\">foreach<\/span> (AuthenticationClientData p <span class=\"kwrd\">in<\/span> Model)<\/pre>\n<pre>        {<\/pre>\n<pre class=\"alt\">            &lt;img src=<span class=\"str\">\"@p.ExtraData[\"<\/span>Icon<span class=\"str\">\"]\"<\/span> alt=<span class=\"str\">\"Icon for @p.DisplayName\"<\/span> \/&gt;<\/pre>\n<pre>           }<\/pre>\n<\/div>\n<p>&nbsp;<\/p>\n<h3>WebPages<\/h3>\n<ul>\n<li>In _AppStart.cshtml<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<div class=\"csharpcode\">\n<pre class=\"alt\">Dictionary&lt;<span class=\"kwrd\">string<\/span>, <span class=\"kwrd\">object<\/span>&gt; FacebooksocialData = <span class=\"kwrd\">new<\/span> Dictionary&lt;<span class=\"kwrd\">string<\/span>, <span class=\"kwrd\">object<\/span>&gt;();<\/pre>\n<pre>            FacebooksocialData.Add(<span class=\"str\">\"Icon\"<\/span>, <span class=\"str\">\"~\/Images\/facebook.png\"<\/span>);<\/pre>\n<pre class=\"alt\">            OAuthWebSecurity.RegisterFacebookClient(<\/pre>\n<pre>                appId: <span class=\"str\">\"empty\"<\/span>,<\/pre>\n<pre class=\"alt\">                appSecret: <span class=\"str\">\"empty\"<\/span>,<\/pre>\n<pre>                displayName: <span class=\"str\">\"Facebook\"<\/span>,<\/pre>\n<pre class=\"alt\">                extraData: FacebooksocialData);<\/pre>\n<\/div>\n<p>&nbsp;<\/p>\n<ul>\n<li>Access this data in the View(in the webpages template case it is Account_ExternalLoginsListPartial<\/li>\n<\/ul>\n<div class=\"csharpcode\">\n<pre class=\"alt\"> @<span class=\"kwrd\">foreach<\/span> (AuthenticationClientData p <span class=\"kwrd\">in<\/span> Model)<\/pre>\n<\/div>\n<div class=\"csharpcode\">\n<pre>        {<\/pre>\n<\/div>\n<div class=\"csharpcode\">\n<pre class=\"alt\">            &lt;img src=<span class=\"str\">\"@p.ExtraData[\"<\/span>Icon<span class=\"str\">\"]\"<\/span> alt=<span class=\"str\">\"Icon for @p.DisplayName\"<\/span> \/&gt;<\/pre>\n<\/div>\n<div class=\"csharpcode\">\n<pre>           }<\/pre>\n<\/div>\n<p>Cross posted to <a href=\"http:\/\/blogs.msdn.com\/b\/pranav_rastogi\/archive\/2012\/08\/24\/customizing-the-login-ui-when-using-oauth-openid.aspx\">http:\/\/blogs.msdn.com\/b\/pranav_rastogi\/archive\/2012\/08\/24\/customizing-the-login-ui-when-using-oauth-openid.aspx<\/a><\/p>\n<p>Pranav Rastogi | @rustd<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 &nbsp; If you see the experience of login [&hellip;]<\/p>\n","protected":false},"author":408,"featured_media":58792,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[197],"tags":[7406,7407],"class_list":["post-14841","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-aspnet","tag-oauth","tag-openid"],"acf":[],"blog_post_summary":"<p>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 &nbsp; If you see the experience of login [&hellip;]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts\/14841","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/users\/408"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/comments?post=14841"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts\/14841\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/media\/58792"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/media?parent=14841"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/categories?post=14841"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/tags?post=14841"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}