JavaScript

Twitter Login

Introduction

This section explains how you can integrate Twitter Login into your Javascript project. After completing this step-by-step guide, you will be ready to upload your code to Cloud Code.

This project will use the newly released version 3.1 Parse Server. On your project dashboard, go to Server Settings > Manage Parse Server(settings) and select 3.1.1. For more information on migrating to Parse Server 3.1.x, see this guide.
See this guide if you do not understand the syntax of the cloud code for this project.

Step 1 - Create a New Back4App App

First of all, it’s necessary to make sure that you have an existing app created at Back4App. However, if you are a new user, you can check this tutorial to learn how to create one.

Step 2 - Generate Access Tokens

In order for you to get the Twitter Login working in your project, you must have the Consumer Key and Consumer Secret.

To generate your access tokens keys, you must have a Twitter app. Basically, you have two options:

• If you have existing Twitter apps and you would like to edit them, please access the Twitter app dashboard.

• If you want to create a new app, you can access the same dashboard, but you must have an approved developer account.

Hint:
While you are requesting access for a developer account, you will certainly be asked to answer some questions, but don’t forget to agree with the terms of the contract.

Step 2.1 - Configure the app details

In this topic, we’re going to configure the Twitter app credentials.

Note that it’s necessary to activate WebHosting to this application and to read more about WebHosting look at Back4App WebHosting Tutorial.

After that go to Twitter Dashboard and choose to Create an app or you can edit an existing app going to Details > Edit > Edit details.

Fill up the:

• App name ;
• Application description ;
• Tell us how this app will be used ;

For the Website URL you can leave it as your Back4App Subdomain and the Callback URLs will be the subdomain + /twitter-callback. It will looks something like this:

Step 3 - Twitter Set up

To start using the Twitter Login for JavaScript, you need to follow these steps:

1. To link Back4app with your Twitter App and log in to your Back4App account;
2. Click on Server Settings of your App;
3. Then, click on SETTINGS of the Twitter Login block. It should look like this:

Step 3 - Get the template

Download the template at our GitHub repository. You can do that using the following command line:

1
curl -LOk https://github.com/templates-back4app/twitter-login-js/archive/master.zip && unzip master.zip

Step 4 - Replace keys

After downloading the project above, please open the ./cloud/app.js file and replace the following variables with the keys generated in step 2:

1
2
3
const back4appWebhostDomain = 'YOUR_BACK4APP_WEBHOST_DOMAIN';
const consumer_key = 'YOUR_CONSUMER_KEY';
const consumer_secret = 'YOUR_CONSUMER_SECRET';

Step 5 - Upload your code to Back4App server

To deploy your app with Back4App, you need to upload your code to Cloud Code. In order to do that, follow the steps below:

1. Go to your App at Back4App website and click on Server Settings.
2. Find the “Cloud Code” block and click on SETTINGS. The “Cloud Code” block looks like this:

3. Click on Choose Files and select all the files imported by index.html. Move them to public, then click SAVE, as shown here:

4. Your files will look like this:

Step 7 - It’s done

After following the guide described above, you just need to open your browser with the Web Hosting address that you have created.

In case you need any help or a function/link doesn’t work, please contact our team via chat!