Cloudrail - Coding

Create a new file for your server code in the created folder and add the following to import and setup Express and CloudRail −

javascript
const express = require("express");
const cloudrail = require("cloudrail-si");
const app = express();
cloudrail.Settings.setKey("[CloudRail license key]");

Now, we continue by writing a function that will instantiate the services we want to use for social login −

javascript
function makeService(name, redirectReceiver) {
   let service;
   switch (name) {
      case "twitter":
         service = new cloudrail.services.Twitter(
            redirectReceiver,
            "[Twitter Client ID]",
            "[Twitter Client Secret]",
            "http://localhost:12345/auth/redirect/twitter"
         );
         break;
      case "facebook":
         service = new cloudrail.services.Facebook(
            redirectReceiver,
            "[Facebook Client ID]",
            "[Facebook Client Secret]",
            "http://localhost:12345/auth/redirect/facebook",
            "state"
         );
         break;
      // More services from the Profile interface can be added here, 
      //the services above are just examples
      default: throw new Error("Unrecognized service");
   }
   return service;
}

We need a way to keep track of user identities. This is normally done in a database but to keep this tutorial short, we will use an object that acts as a pseudo-database.

All its data is kept in memory and is thus lost when the server restarts −

javascript
const users = {
   records: {}
};
users.find = (id) ⇒ {
   return users.records[id];
};
users.save = (id, data) ⇒ {
   users.records[id] = data;
};

After, we register the server endpoint that will handle the start of the social login flow −

javascript
app.get("/auth/start/:serviceName", (req, res) ⇒ {
   let serviceName = req.params["serviceName"];
   
   let redirectReceiver = (url, state, callback) ⇒ {
      res.redirect(url);
   };
   let service = makeService(serviceName, redirectReceiver);
   service.login();
});

The service we have started the social login with will redirect to our server and we need to handle this redirect.

After getting a unique identifier for the user, we check if we have seen this user before. If yes, then we greet him with his name. If not, we get the name from the social network and save a new user −

javascript
app.get("/auth/redirect/:serviceName", (req, res) ⇒ {
   let serviceName = req.params["serviceName"];
   
   let redirectReceiver = (url, state, callback) ⇒ {
      callback(undefined, "http://bla.com" + req.url); 
      // The callback expects a complete URL but only the query matters
   };
	let service = makeService(serviceName, redirectReceiver);
   service.getIdentifier((err, identifier) ⇒ {
      if (err) res.status(500).send(err);
      let user = users.find(identifier);
      
      if (user) {
         res.send("Welcome back " + user.name);
      } else {
         service.getFullName((err, name) ⇒ {
            if (err) res.status(500).send(err);
            users.save(identifier, {
               name: name
            });
            res.send("Welcome greenhorn!");
         });
      }
   });
});

Finally, we have the server listen on port 12345 −

javascript
app.listen(12345);

We can now start the application and test it in our local browser.

If you navigate to http://localhost:12345/auth/start/facebook you will start the Facebook login flow.

If you navigate to http://localhost:12345/auth/start/twitter you will start the Twitter login flow.

After logging in with the service and granting access, you will be seeing "Welcome greenhorn!" if you do it for the first time and "Welcome back [your name]" on consecutive visits.

To integrate it into an actual website, you would, for example, include the service provider's logos there and make the logos link to the respective URLs.

Besides, the pseudo-database should be replaced with a real one. And there you go, social login for up to 9 different providers!

Advertisements