Engage on Facebook Engage on Twitter Engage on LinkedIn Engage on GitHub components notes mobile card heart 2 infinite mirror 2 pricing support

Logging into DNN with Social Networks

By Brian Dukes

For I ♥ DNN, we wanted to bring the barrier to entry very, very low, so that anyone could join the conversation simply and easily, without having to create yet another website account. To that end, we wanted to allow folks to sign in with their existing social network logins: Facebook, Twitter, and Google. Since these are provided with DNN, we assumed it would be fairly simple to achieve our vision. However, we ran into a handful of obstacles that we worked to overcome in implementing the core social login providers, ultimately copying and extending them to better meet our needs.

The first main hurdle that we found was that we couldn't turn off the standard login, and require you to use a social login. So we hid the standard login.

Next, we found that the profile info from your connected account (i.e. from Facebook, Twitter, or Google) wasn't making it into your DNN profile. There were a couple of common properties which were brought across, but most of the properties weren't. After digging into the code, it appeared that there were certain properties which were intended to come over, but weren't setup correctly. We were able to adjust the providers to work correctly, and bring in some further properties that we wanted, like profile photos.

Once profile photos were coming in, we were sad to see that the photos that came over were not a very good quality (especially from Twitter). So, in addition to pulling those profile pictures, we also tried to pull in an avatar via the Gravatar service. However, with Twitter being the main culprit, there wasn't a lot of help, because Twitter doesn't provide an email address, either, which is needed for Gravatar. So, at this point, if login with Twitter, then set your profile to not have a picture, then logout (and get automatically logged in [see below]), we'll look to Gravatar and see if you have an image there.

However, more customizations were required, because the built-in providers are setup to overwrite the DNN user's profile information upon each login, which doesn't seem like a nice thing to do. If you've customized your login, you want it to stay, not have it revert back to your Twitter bio all of the time. We worked to find the right place to plug into that login pipeline so that we could avoid the overwriting.

One other issue that we ran into is that there wasn't a good way to log out of the application. Because we wanted the logins showing on the home page, when you logged out, the login control saw the login information from the last login (set in a cookie), and automatically logged you back in. So, from the outside, it looks like nothing happens when you log out. For the time being, it's mostly a nuisance for us as testers, but at some point a real user of the site may actually want to log out, so we'll need to figure out a solution.

The last set of login-related functionality that I wanted to add (or, really, that I wanted to already be available for me) was the ability to associate a social account with an existing login. It looks like there is one place in the code which makes this seem like it's possible, but I couldn't ever find any way as a user to stumble upon it. But, as a user, I don't like coming back to a site and having to remember which account I used when I signed up; instead, I'd like all of the social accounts to point to the same account on the website. This is something that the underlying code supports, but we'll need to make a user interface to let you do it well.

Planning a DNN upgrade? Download our guide