Android

How to add twitter login to your Android App

Introduction

This section explains how you can create an app with user registration using Twitter Login and Parse Server core features through Back4App.

It will look like this:

User Registration with Twitter Login App

At any time, you can access the complete Android Project built with this tutorial at our GitHub repository.

Prerequisites

To complete this tutorial, you need:

  • Android Studio at a version higher than 3.0.
  • An app created at Back4App.
  • An android app connected to Back4app.
  • A device (or virtual device) running Android 4.0 (Ice Cream Sandwich) or newer.

Step 1 - Twitter Set up

To start using Twitter functions, you need to:

  1. Go to Twitter Application Management Website, sign in with a Twitter account and click on Create New App.
  2. Fill in the Application Details. When asked to specify Callback URLs, please insert twittersdk://. This is mandatory in order to enable authentication through Twitter.
  3. Click on the Developer Agreement and then on Create your Twitter application.
  4. Open your Android Studio Project, find your build.gradle (Module: app) and in the dependencies{} section add the following code to install the Parse Twitter Utils SDK for Android. 
    1
2

    // Don't forget to change the line below with the latest version of Parse Twitter Utils SDK for Android
implementation 'com.github.parse-community:ParseTwitterUtils-Android:latest.version.here'

    Remember to update the version of Parse Twitter Utils SDK for Android to the latest one. You can find out which is the latest version at JitPack website, following these steps:

    1. At JitPack website paste parse-community/ParseTwitterUtils-Android in the Git repo url box.
    2. After doing that, click on the Look up button. Then you should see the available versions of Parse Twitter Utils SDK for Android, as shown in the following image.

Step 2 - Link your Twitter App with Back4App

  1. In your Android Studio Project, in the Java file called App that extends Application that you created to initialize the Parse SDK, on its onCreate method, right after Parse.initialize() call, use the following code to initialize Parse Twitter Utils SDK. 
    1

    ParseTwitterUtils.initialize(getString(R.string.twitter_consumer_key), getString(R.string.twitter_consumer_secret));

    If you don’t have an App.java file as described in this step, access the Install Parse SDK for Android documentation and be sure that you have followed all the steps required to install Parse SDK correctly, otherwise, your twitter login may not work properly.

  2. Go to app > res > values > strings.xml file.
  1. In the strings.xml file add the following code: 
    1
2
3

    <!-- Change the following strings as required -->
<string name="twitter_consumer_key">PASTE_YOUR_TWITTER_CONSUMER_KEY</string>
<string name="twitter_consumer_secret">PASTE_YOUR_TWITTER_CONSUMER_SECRET</string>
  2. Leave the string.xml opened and go to Back4App Website, log in and click on My Apps. Find your app and then click on SERVER SETTINGS.
  1. Find the “Twitter Login” block and click on Settings. The “Twitter Login” block looks like this:
  2. Leave the Back4App Twitter Login page you visited opened and go to Twitter Application Management Website, find your app and click on its name.
  3. Click on Keys and Access Tokens, copy the Consumer Key (API Key) and the Consumer Secret (API Secret) and paste it in the Back4App Twitter Login page, filling in the respective fields. To finish just click on SAVE. The Consumer Key (API Key) and the Consumer Secret (API Secret) looks like this:
  4. Also, copy the Consumer Key (API Key) and the Consumer Secret (API Secret) and paste it in the strings.xml file of your Android Studio Project.

Step 4 - Log In

  1. Import to your LoginActivity: 
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

    import android.app.AlertDialog;
import android.app.ProgressDialog;
import android.content.DialogInterface;
import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.util.Log;
import android.widget.Button;
import android.widget.Toast;

import com.parse.LogInCallback;
import com.parse.ParseException;
import com.parse.twitter.ParseTwitterUtils;
import com.parse.ParseUser;
import com.parse.SaveCallback;
  2. To implement Twitter Login, simply use below code: 
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

    ParseTwitterUtils.logIn(LoginActivity.this, new LogInCallback() {

     @Override
     public void done(final ParseUser user, ParseException err) {
         if (err != null) {
             dlg.dismiss();
             ParseUser.logOut();
             Log.e("err", "err", err);
         }
         if (user == null) {
             dlg.dismiss();
             ParseUser.logOut();
             Toast.makeText(LoginActivity.this, "The user cancelled the Twitter login.", Toast.LENGTH_LONG).show();
             Log.d("MyApp", "Uh oh. The user cancelled the Twitter login.");
         } else if (user.isNew()) {
             dlg.dismiss();
             Toast.makeText(LoginActivity.this, "User signed up and logged in through Twitter.", Toast.LENGTH_LONG).show();
             Log.d("MyApp", "User signed up and logged in through Twitter!");
             user.setUsername(ParseTwitterUtils.getTwitter().getScreenName());
             user.saveInBackground(new SaveCallback() {
                 @Override
                 public void done(ParseException e) {
                     if (null == e) {
                         alertDisplayer("First tome login!", "Welcome!");
                     } else {
                         ParseUser.logOut();
                         Toast.makeText(LoginActivity.this, "It was not possible to save your username.", Toast.LENGTH_LONG).show();
                     }
                 }
             });
         } else {
             dlg.dismiss();
             Toast.makeText(LoginActivity.this, "User logged in through Twitter.", Toast.LENGTH_LONG).show();
             Log.d("MyApp", "User logged in through Twitter!");
             alertDisplayer("Oh, you!","Welcome back!");
         }
     }
 });

    In the example project, this code is placed inside a LOGIN VIA TWITTER button callback.

  3. It’s interesting to add some method to display Alert Dialogs and make the process look more professional. The method below does this: 
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

    private void alertDisplayer(String title,String message){
        AlertDialog.Builder builder = new AlertDialog.Builder(LoginActivity.this)
                .setTitle(title)
                .setMessage(message)
                .setPositiveButton("OK", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        dialog.cancel();
                        // don't forget to change the line below with the names of your Activities
                        Intent intent = new Intent(LoginActivity.this, LogoutActivity.class);
                        intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TASK | Intent.FLAG_ACTIVITY_NEW_TASK);
                        startActivity(intent);
                    }
                 });
        AlertDialog ok = builder.create();
        ok.show();
}

Step 6 - Log out

  1. Import to your LogoutActivity: 
    1
2
3
4
5
6
7
8
9
10

    import android.app.AlertDialog;
import android.app.ProgressDialog;
import android.content.DialogInterface;
import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

import com.parse.ParseUser;
  2. To implement Twitter Logout, simply use the code below: 
    1
2

    ParseUser.logOut();
alertDisplayer("So, you're going...", "Ok...Bye-bye then");

    In the example project, this code is placed inside a LOGOUT VIA TWITTER button callback.

    The method alertDisplayer is the same that you added in the LoginActivity, just remember to change the Intent arguments.

It’s done!

At this stage, you can log in, register and log out of your app with Twitter using Parse Server core features through Back4App!