I my last post I created a very simple example of how to authenticate users with OpenId. In that example the user needed to enter the full URL to their OpenId provider. Today I’m going to modify that example to make the authentication process a little easier on the user. To give you an idea of what I’m going on about, take a look at the login form for StackOverflow.
Alternatively you can manually enter your OpenId (which is the only option I provided in the sample application).
The key to understanding how this works is to realize that for a user to authenticate with their OpenId provider they need to enter the URL pointing to that OpenId provider. However, for certain OpenId providers the URL will be the same for all users, while for others each user has a unique URL. For example, if you would like to login with your Google account you would enter the URL https://www.google.com/accounts/o8/id. (So in our previous example you could enter this as your OpenId URL) This URL is used for all Google accounts. However, if you’re using Blogger as your OpenId provider you need to enter http://youraccount.blogspot.com as the URL – the URL is different for every Blogger account. So if you want to login with your Google account you simply need to click the Google icon and you will be redirected to the single URL used for all Google accounts, but if you want to login with Blogger you need to be prompted for your account name.
Also add the StyleSheet included with the project.
Now you need to include all the images. By default OpenId Selector assumes you put everything into a folder called Images, but I decided to put it into a folder called OpenId within my Content folder. There are 3 folders you need to copy – Images, Images.small and Images.large. You will also need to modify the openid-jquery.js file to specify the location of the images.