JungleDragon now has Facebook and Twitter signin support!

On a user-generated content site, it should be easy for people to contribute. That’s why I went into great length implementing a multi file uploader in the previous release. That still does not take away a different hurdle for users to contribute: registration.

Users are typically wary of registering at yet another site, even if they like that particular site. Most often it means filling out a tedious registration form that asks for way too many personal details. And there is yet another username/password combination to remember. There may be trust issues as well, what will this site do with my personal details?

Many of these issues can be solved by offering users a way to connect using an existing account, such as  a Facebook or Twitter account. That is exactly what JungleDragon supports as of now, and it does so in quite a friendly, flexible manner.  This post explains how it works for users. In a second post I will discuss some implementation details.

Using your Twitter account to signup with JungleDragon

Let us walk through the scenario of a Twitter user joining JungleDragon. Meet YodaDragon, an eager fan that is ready to join:

Yoda chooses the join option:

Which launches the all-new simplified Join page:

In this screen, the user can choose to create a JungleDragon account based on an existing Facebook or Twitter account, or choose to just create a “classic” account, managed within JungleDragon. Yoda clicks the Twitter button. If he is not yet logged into Twitter, he will need to authenticate first. Next comes a one-time approval screen from Twitter where Yoda needs to grant the application (JungleDragon) read access to his account:

In a sweep of optimism, Yoda allows this. Twitter then redirects the user to JungleDragon:

We’re now back at JungleDragon and know who the user is. Yoda is new here, so JungleDragon asks for a final step in the registration process: asking for an email address:

This email address has to be valid and activated by Yoda to complete the registration. You may wonder why I put in this step. The primary reason is that oAuth providers do not give applications access to a user’s email address. Technically I could let the user join without an email address, but this is the only time in the lifecycle of a user where I can ask for it. I’ve had a look at some big websites with oAuth support and they seem to do the same thing.

Anyways, Yoda opens the activation email and clicks the activation email inside it. This finishes the registration and a welcome page is presented:

And there is one more cool thing. JungleDragon has read some of the personal details of Yoda from Twitter, such as location, avatar and bio and copied those to his JungleDragon profile.

You can imagine the Facebook scenario working similar, it’s just that the application access approval screen is different. The other difference is that Facebook offers more profile details that are automatically copied to the new user’s profile.

Using your Twitter account to sign in to JungleDragon

Now that we have a registered user, how does the signin via Twitter work, assuming the user is not logged into JungleDragon already? I can be brief about that:

The user clicks the Twitter button. The end. That’s it, there’s no redirects, approvals, logins, it’s a one-click login. The same holds true if you would have created an account based on Facebook.

What about JungleDragon accounts?

The fun does not end here. Users can still create native JungleDragon accounts in case they have no Twitter or Facebook account or feel more comfortable seperating accounts. In this case, all the existing user management capabilities of JungleDragon continue to work: password resets, editing your email address, sign in, sign out, etc.

And there’s more. If you already have a native JungleDragon account yet also want to make use of a Twitter or Facebook account (or both!) for the sake of easy login, that scenario is supported as well. We’re going to switch to the user “fchristant” who has a native JungleDragon account. He goes to his user profile page, clicks “Edit details” and then chooses the new option “Manage signin settings“:

Here we are at the signin settings of a native JungleDragon account. From the “Current signin accounts” we see that this native user has three ways to sign in to his account: JungleDragon (email/password), Twitter and Facebook. For each the username is provided of that service provider.

The second heading “Connect more signin accounts” allows you to link existing Twitter or Facebook accounts to your JungleDragon profile. You can even add multiple accounts of the same provider.

Conclusion

It was kind of a nightmare implementing this, but I am eager to endure the hardship to take away any barriers users may have in joining JungleDragon. The current implementation should satisfy the needs of most users I feel (other than offering more providers, such as Gmail). What do you think?

The next post will share some details on the implementation of this. You can start using this today, it is deployed on the Alpha environment. If you have an existing account, use the instructions above to link additional signin methods to your account.