Signup users using Twitter in your web application

Nowadays it is very common to let users signup into your application using third party services such as Twitter and Facebook. The problem is that these services implement protocols such as OAuth that aren't trivial to implement. Fortunately Backbeam adds functionality to make the integration as simple as possible.

If you are developing a hosted web application with Backbeam you can integrate a Twitter signup with a few steps. First of all you need to create a Twitter application and configure your project. Go to your control panel → Configuration → Users authentication and set up both: the twitter consumer key and the twitter consumer secret. Save the form and you can start coding!

We are going to creat a basic home page. We need a controller that responds to GET / and we're going to write the following code:

var user = backbeam.currentUser()

user ? user.refresh(render) : render() // load the user information if logged

function render() {
    response.render('index.html', { user: user })
}

This first controller just renders a index.html template and passes the current user if defined. It makes a little trick: if there is a logged user it refreshes his information and passes the render function as callback, so the template has the user filled with data.

We haven't created the template yet. So let's go. We need a template called index.html. This is the minimal HTML code that we need:

<h1>Twitter signup example</h1>

<p><a href="/twitter-signup">signup</a></p>

{% if user %}
    <p>Hi {{ user.getTwitterData('screen_name') }} <a href="/logout">logout</a></p>
{% endif %}

For the time being we don't have any user logged in so we are just going to see the signup link. This link points to a URL that we haven't created yet. So let's do it. We need a GET /twitter-signup controller. In this controller we are just going to redirect the user to the Twitter's authorization page. The URL of the authorization page needs to be composed correctly. Actually this step requires to make a request to twitter with the credentials of your Twitter application and creating a valid authorization token. But Backbeam simplifies this. You only need to call a method and remember a value:

backbeam.twitterRequestAccessToken('/twitter-verify', function(err, url, oauthTokenSecret) {
    session.set('oauthTokenSecret', oauthTokenSecret) // remember this value in the users's session
    response.redirect(url) // just redirect to the authorizatio page
})

That's all for this controller. But wait, if you try to execute it you should go to the authorization page but when you authorize the application you will be redirected to an URL that doesn't exist yet! This URL is the /twitter-verify that you can see in the previous code. We need to make a controller for this URL. So create a controller that responds to GET /twitter-verify. This URL will be called once the user has given authorization to the Twitter application. But this is not the final step, the user is not logged in yet. In this controller we write the following code:

var oauthTokenSecret = session.get('oauthTokenSecret') // information stored in the previous step
var oauthToken = request.query.oauth_token // information given by Twitter when redirecting
var oauthVerifier = request.query.oauth_verifier // information given by Twitter when redirecting

backbeam.twitterVerifyAccessToken(oauthToken, oauthTokenSecret, oauthVerifier, function(err, data) {
    // inside 'data' we get the credentials of the user! Now let's save him into the database
    backbeam.twitterSignup(data, function(err, user, isNew) {
        response.redirect('/')
    })
})

The method twitterVerifyAccessToken requests the credentials of the user. If everything goes right the callback will receive a data variable with the credentials information: the oauth tokens, the screen name of the user and the user id. You can pass this variable to the twitterSignup method and the user will be logged in. He will be redirected to the home page and his Twitter's screen name will be shown. You can also go to the control panel → Database → User entity and you will see that the screen name of the user is saved inside the column "Login providers".

We just need one more controller if the user wants to log out. It is very simple. Create a GET /logout controller with the following code:

backbeam.logout()
response.redirect('/')

And that's all. The authentication process involves several steps but Backbeam simplifies it with just two utility functions that you can use in your controllers.