Thursday, October 22, 2009

Feedback requested: New OpenID RP login UX prototype

OpenID RP login UX

Live demo location: http://openidux.dotnetopenauth.net/

Design considerations

The DNOA login UX design document contains the design spec, and some of the reasoning that went into that design.

One high-level goal of all this work is to produce a set of HTML, CSS, and JS files that can work on any web platform, so that ruby, python, php, coldfusion, and (of course) ASP.NET RP web sites can benefit from a better UI for logging users in.

Interesting scenarios to experiment with and/or test

  • Login by clicking on Members Only. This invokes the full page redirect login UI.
  • Login by clicking Login in the upper-right corner of the page. This invokes the popup dialog UI.
  • Visit the account management page and add additional OpenIDs or InfoCards to your account so you can log in with multiple identities yet be recognized as holding just one account.
  • Login multiple times, using various OPs. Notice first that we highlight the button you chose the prior time. This helps the user not splinter his identity on a return visit in the event he has accounts with more than one displayed OP.
  • Notice that in the login UI some OPs support checkid_immediate, and on a return visit, a green checkmark appears in the lower-right corner of an OP button when an immediate login is available. If a green checkmark is not visible on an OP button, a popup window will be used to guide the user through the initial login process. Some OPs (such as Verisign and Yahoo) do not support checkid_immediate, and will never display green checkmarks.
  • When logging in, try using the OpenID button. Notice that as soon as you finish typing that discovery on that identifier begins and a login button appears within the text box. Next time you visit, the UX will remember what identifier you typed in and help you log in again.
  • Try using the OpenID button with an identifier that delegates to multiple OPs. Notice how the Login button that appears to help you go through checkid_setup (if no checkid_immediate requests come back positive) is a split button, allowing you to actually pick which OP to log in with, and these OPs are in priority order (adjusted for OPs that are down or misbehaving, which are moved to the bottom).
  • Use Internet Explorer, and log in with your InfoCard.

Special release notes

In this iteration, I've elected to go with the popup dialog approach to displaying the login UI rather than a popup browser window. This is still alterable, and your feedback and/or preferences on this decision is most welcome.

The current set of OP buttons displayed include 4 OPs: Google, Yahoo, Verisign and MyOpenID. The last two of these do not fit the qualifications given in the design document, but they are included here to assist in the feedback process, and because I don't know how to make four buttons (Google, Yahoo, OpenID and InfoCard) look good, so I jumped up from three to six.

In the OpenID text box area, after authentication completes a green checkmark is displayed, but sometimes no login button appears to complete login. This is a UX issue I haven't figured out how to solve yet. But the way to proceed with login is to click the original, large OpenID button again.

The browsers I've tested with are IE8, Chrome 3, FireFox 3.5 and Safari 4. If you test with other/older browsers, please leave feedback about how your experience was. But currently I'm not targeting older browsers, so any bug reports regarding backward compatibility may not be fixed.

How to leave feedback

Leave a comment.

Saturday, October 10, 2009

Minify your EmbeddedResource .js and .css files in your MSBuild project

If you write a C# or VB.NET class library that contains ASP.NET controls that also have .js or .css files embedded in your assembly, you probably want to minify those files for optimal download size in production, but keep the files readable for coding and debugging. What if you could add a single <Import> to your class library’s project file that would automatically minify these files in Release builds, while leaving them untouched in debug builds?

Well, I wrote a .targets file and associated MSBuild task that uses Dean Edwards’ excellent Packer algorithm to make .js files really small. Just import the .targets file right after your last <Import> and you’re done.

You can get it here:

http://teamcity.dotnetopenauth.net:82/project.html?projectId=project3

Just click "Artifacts" then "Download all (.zip)" in the upper-right corner.

Or the source for it if you're interested:

http://github.com/AArnott/JavascriptCssPackerTargets

Just click the "download" button to get it as a zip file.

Please take this as a tip and not an endorsement. This is not a Microsoft product—it’s just an open source project that I wanted to point out to you for you to evaluate whether it’s appropriate for your project. As far as the license goes, this MSBuild task uses code from Dean Edwards that is under the LGPL license, so the whole MSBuild task .dll ships under the LGPL license. While I don’t interpret that to mean that your shipping project must be under any particular license, you should consult your own attorneys and not take my word for it.

(cross-posted from http://blogs.msdn.com/vsproject/)

Friday, October 09, 2009

VS2008 project template for OpenID and InfoCard relying parties

I finally built a project template to make it easier to write an OpenID relying party web site using C# and ASP.NET.  Up to this point all we had were the sample RPs that ship with DotNetOpenAuth, which were deliberately kept simple.  They didn’t use a real database, didn’t follow some best practices, and weren’t very real. 

Now you can start your next web site with OpenID and InfoCard logins already working!  Complete with role authorization, account management that allow for multiple OpenID/InfoCards per account, login and account creation.

And did I mention it’s free? (donations gratefully accepted)

Download it and copy the file "Project Templates\*.vsi" file into your %USERPROFILE%\Documents\Visual Studio 2008\Templates\ProjectTemplates folder and it will appear in your New Project wizard in Visual Studio 2008.

Yes, the site is still unbeautified, but that’s so you can brand it to look like yours.

Have fun.  And let me know what you think of it or can contribute.