Picture Competition Web App - Node JS, Mongo DB and Vue JS

Create a Picture Competition Website in Express JS, MEVN

Login with Facebook

We can also add functionality that allows users to log in with their Facebook account. First, you need to go to the Facebook developers page and create a new app. After that, put the following lines in your “footer.ejs” file:

<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v12.0&appId={your_app_id}&autoLogAppEvents=1" nonce="1EaAEm3K"></script>

Make sure to replace “{your_app_id}” with your Facebook app ID. Then we need to render the Facebook login button. So go to “login.ejs” and put the following code in the [facebook login button] section:

<div class="col-md-6">
	<div class="fb-login-button" data-width="" data-size="large" data-button-type="continue_with" data-layout="default" data-auto-logout-link="false" data-use-continue-as="false" data-onlogin="onFacebookLogin"></div>
</div>

And in your Javascript code, we need to create a function that will display the login pop-up by Facebook and will authenticate the user from server side too.

function onFacebookLogin(data) {
	console.log(data);

	var userID = data.authResponse.userID;

	// make the API call
	FB.api(
	    "/" + userID + "/?fields=id,name,email,picture.height(2048)",
	    "GET",
	    {},
	    function (response) {
			if (response && !response.error) {
				//handle the result
				console.log(response);

				var id = response.id;
				var name = response.name
				var email = response.email;
				var picture = response.picture.data.url;

				var formData = new FormData();
				formData.append("id", id);
				formData.append("name", name);
				formData.append("email", email);
				formData.append("picture", picture);

				myApp.callAjax(mainURL + "/facebookLogin", formData, function (response) {
		            // convert the JSON string into Javascript object
		            var response = JSON.parse(response);
		            console.log(response);

		            // if the user is created, then redirect to login
		            if (response.status == "success") {
		            	// get access token from server
		                var accessToken = response.accessToken;

		                // save in local storage
		                localStorage.setItem(accessTokenKey, accessToken);

		                // redirect to home page
		                window.location.href = "/";
		            } else {
		            	swal("Error", response.message, "error");
		            }
				});
			}
	    }
	);
}

Now we need to create a POST route “facebookLogin” in our “server.js” file that will create the user if not exist. Otherwise, it will simply update the user’s document and add Facebook profile information in it.

app.post("/facebookLogin", async function (request, result) {
	const id = request.fields.id;
	const name = request.fields.name;
	const email = request.fields.email;
	const picture = request.fields.picture;

	// check if email already exists
    var user = await db.collection("users").findOne({
        "email": email
    });

    if (user == null) {
    	// insert in database
        await db.collection("users").insertOne({
            "name": name,
            "email": email,
            "password": "",
            "picture": picture,
            "accessToken": "",
            "notifications": [],
            "bio": "",
            "dob": "",
            "country": "",
            "phone": "",
            "website": "",
            "twitter": "",
            "facebook": "",
            "googlePlus": "",
            "linkedIn": "",
            "instagram": "",
            "resetToken": "",
            "isVerified": true,
            "verificationToken": "",
            "createdAt": new Date().getTime()
        });
    }

    // generate JWT of user
    var accessToken = jwt.sign({
        "email": email
    }, accessTokenSecret);

    // update JWT of user in database
    await db.collection("users").findOneAndUpdate({
        "email": email
    }, {
        $set: {
            "accessToken": accessToken,
            "facebookData": {
            	"id": id,
            	"name": name,
            	"email": email,
            	"picture": picture
            }
        }
    });

	result.json({
        "status": "success",
        "message": "Login successfully",
        "accessToken": accessToken
    });
});

Now your users will also be able to log in with their Facebook account as well.



Leave a Reply