2048 PART 3: REGISTERING ACCOUNTS

Welcome back to our series of articles demonstrating how to add social and network features to an existing application. If you are reading us for the first time today (welcome by the way!), we recommend that you take a look at our first article.

In this article, we will be adding a way to register accounts with e-mail and log back with these. Previously, we have demonstrated how to log in with a so-called anonymous account. An anonymous account is a “temporary” account that allows using all the functionality of Clan of the Cloud without requiring the registration. The problem is that this account can be lost if not associated with an explicit authentication method such as e-mail/password.

Anonymous accounts are very handy though, as they provide a way for your users to get started playing your game without being required to register first. They are able to register later if they want to be able to play on multiple devices for instance. The API also allows to detect the type of current login (anonymous, email, etc.). You might also suggest registering after a few minutes of gameplay, for instance. In our terminology, switching from an anonymous account to an e-mail based account is referred to as converting it.

In our case, we simply wont enforce signing in at all, but the player will be able to do so on his own initiative in order to save his progress.

ADDING LOGIN BUTTONS TO OUR UI

Let’s add a few buttons. We’ll save the exact CSS and HTML required to get them here, you can always look at main.scss for more information. The interesting thing is that this panel is dynamically modified, displaying a “Logout” button when logged in with an e-mail address.

First, we’ll create a login_ui.js, which handles the login user interface as well as the general state of being logged in or not. This file has some logic to handle the login form window and bind the appropriate code to button presses. What is interesting here is the front end methods. We have doLoginWithEmail, doRegisterWithEmail and doLogout which react to the corresponding buttons.

The CSS behind the “E-mail” button brings the loginEmailForm on the screen along with an animation. There is no actual code behind this button.

LOGGING IN

doLoginWithEmail handles the logic behind the “Login” button of the form shown above. Basically, clicking on this button will attempt a login on Clan of the Cloud, and if it matches one user, the current (anonymous) account will be replaced with this one. This is a potentially dangerous operation though, since the current anonymous account cannot be reused as it has no credentials, therefore the current progress would be lost.

// Check its validity first
this.cloudBuilder.loginWithId("email", this.loginEmail.value,  
this.loginPassword.value, {"preventRegistration": true},  
function(err, gamerData) {  
[...]
if (this.isAnonymous()) {  
var currentGamerData = this.storageManager.getGamerData();  
if (!confirm("You are about to log in with an e-mail account," +  
" losing the current " + currentGamerData.profile.displayName +
" account.")) {
return true;  
}
}
alert("Logged in as " + this.loginEmail.value + "!");  
[...]
}.bind(this));

We prevent the registration of a new user here; we just want to check whether we can sign in using these credentials. In case of success, we display a confirmation message for the reason mentioned above and proceed at users discretion. The actual low level login procedure is done in the cloudbuilder.js file using the same loginWithId function as described in the previous article. We just add the ability to specify additional options and discard the login by returning true from the callback, which we will use to cancel a login attempt when the player doesn’t confirm abandoning his anonymous account.

REGISTERING AN ACCOUNT

Here again, the process depends on whether we are currently using an anonymous or an e-mail based account. Registering an account while having an anonymous account in use will convert it to an e-mail based account (use case: user willing to save his information to play on another machine). Registering using an e-mail based account will just switch to the other account, as shown in the snippet below.

if (this.isAnonymous()) {  
// We have an anonymous account, just promote it to an e-mail one
this.cloudBuilder.convertToEmailAccount(this.loginEmail.value,  
this.loginPassword.value, whenDone.bind(this));  
}
else {  
// Simply log in
this.cloudBuilder.loginWithId("email", this.loginEmail.value,  
this.loginPassword.value, whenDone.bind(this));  
}
LOGGING OUT

The “E-mail” button is replaced with a “Logout” button when the player is logged in as an e-mail based account (as opposed to an anonymous account). It is interesting to note that in our case, even when we tell the player that he’s not logged in, he is actually logged in as an anonymous account. We do not want the gamer to be logged out from Clan of the Cloud at any time, since most operations wouldn’t work.
The same applies when logging out: the player is actually only logged out from his e-mail based account, replaced by a new anonymous account.
A clever implementation could store the credentials of the anonymous account created initially so that it can be restored when logging out from an e-mail based account instead of creating a fresh anonymous account created for the occasion. We didn’t do it.

CloudBuilder.prototype.logout = function(whenDone) {  
// We do not really support logging out, we always need an anonymous account, so just create one instead!
this.storageManager.setGamerData(null);  
this.loginAnonymously(whenDone);  
};

You can play the final game here. In the next article we will demonstrate how to use the capabilities of Clan of the Cloud to store the state of the game and restore it on any machine. Stay tuned!