ASP.NET MVC3 Razor project
Trying to implement OpenID using http://weblogs.asp.net/haithamkhedre/archive/2011/03/13/openid-authentication-with-asp-net-mvc3-dotnetopenauth-and-openid-selector.aspx
I've edited the openid-en.js script down to:
var providers_large = {
myopenid: {
name: 'MyOpenID',
label: 'Enter your MyOpenID username.',
url: 'http://{username}.myopenid.com/'
},
openid: {
name: 'OpenID',
label: 'Enter your OpenID.',
url: null
}
};
Removing all refernecs to Google. I also deleted the var providers_small section and reference to it in the open-jqeury.js.
This is the form in my LogOn.cshtml
<form action="Authenticate?ReturnUrl=@HttpUtility.UrlEncode(Request.QueryString["ReturnUrl"])" method="post" id="openid_form">
<input type="hidden" name="action" value="verify" />
<div>
<fieldset>
<legend>Agency use only</legend>
<div class="openid_choice">
<p>
Please click your account provider:</p>
<div id="openid_btns">
</div>
</div>
<div id="openid_input_area">
@Html.TextBox("openid_identifier")
<input type="submit" value="Log On" />
</div>
The problem is that no matter what I do Google shows up as the first provider and many times will not list the MyOpenID provider (Yahoo also shows up sometimes also). I tried deleting cookies and history (from IE and manually in the AppData\Roaming...\Cookies sub-folder, the AppData\Local\ etc., restarting Visual Studio, rebooting the computer etc. I want only the MyOpenID provider to be displayed. I'm guessing the openid-en.js has been saved somewhere that I can't find. I've searched the entire computer for the file and deleted all the ones in temp folders.
Any help would be appreciated.
Upon further trouble-shooting I've found that I can get it to only use MyOpenID. The problem is in the displayed provider icons. They are always displayed in the order; Google, Yahoo, Aol and then it will display MyOpenID. So even if I have only have MyOpenID listed in the provider_large code block it places the Google icon on the select box. Clicking on the Google icon will bring up MyOpenId, so it is functional but obviously would be very confusing for the user. The problem lies somewhere in this code block in the open-jquery.js
getBoxHTML : function(box_id, provider, box_size, index) {
if (this.no_sprite) {
var image_ext = box_size == 'small' ? '.ico.gif' : '.gif';
return '<a title="' + this.image_title.replace('{provider}', provider["name"]) + '" href="javascript:openid.signin(\'' + box_id + '\');"'
+ ' style="background: #FFF url(' + this.img_path + '../images.' + box_size + '/' + box_id + image_ext + ') no-repeat center center" '
+ 'class="' + box_id + ' openid_' + box_size + '_btn"></a>';
}
var x = box_size == 'small' ? -index * 24 : -index * 100;
var y = box_size == 'small' ? -60 : 0;
return '<a title="' + this.image_title.replace('{provider}', provider["name"]) + '" href="javascript:openid.signin(\'' + box_id + '\');"'
+ ' style="background: #FFF url(' + this.img_path + 'openid-providers-' + this.sprite + '.png); background-position: ' + x + 'px ' + y + 'px" '
+ 'class="' + box_id + ' openid_' + box_size + '_btn"></a>';
},
If I remove the second ---'" href="javascript:openid.signin(\"'--- The select block is blank but still points to MyOpenID, it breaks the functionality though in that clicking on the select box does nothing. If I remove the first openid.signin the behavior doesn't change. Would anyone know how to modify this code block so it displays the proper icon without breaking the functionality?
Dug deeper and found Opened-jquery.js extracts the provider image from the opened-providers-en.png. When you edit the openid-en.js providers_large you have to update the opened-providers-en.png. You do this by running generate-sprite.js which is part of openid select which requires ImageMagick. Got both of those installed and when run the generate-sprite.js I get a “Microsoft JScript runtime error: 'WScript' is undefined” error. It is not clear how I go about running generate-sprite.js. If I include it as a script in my project I got the "Microsoft JScript runtime error: 'WScript' is undefined" error in this section of code in generate-sprite.js
var locale = 'en';
if (WScript.Arguments.length == 0) {
// assuming english locale
} else {
locale = WScript.Arguments(0);
}
How do you run the generate-sprite.js script?
Can any javascript gurus tell me how to do this on my Win7 and VS2010 Express setup.
Please click your account provider: