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.

    It’s important to fill in ALL the fields of Application Details.

  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:
    1
    compile 'com.parse:parsetwitterutils-android:1.10.6'
    
  1. Go to your App dashboard at Back4App website and click on Server Settings.
  2. Find the “Twitter Login” block and click on Settings. The “Twitter Login” block looks like this:

    Twitter Login Block at Back4App

  3. Leave the Back4App Twitter Login page you visited opened and go to Twitter Application Management Website, find your app and click on its name.
  4. 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:

    Twitter Keys

Step 3 - Set up

  1. Import at the beginning of each Parse activity the following:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    // Front End Dependencies
    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;
    // Parse Dependencies
    import com.parse.Parse;
    import com.parse.ParseUser;
    
  2. Then you need to initialize Parse, so in the onCreate method, right before setContentView, use in each activity:
    1
    Parse.initialize(this);
    

Step 4 - Log In

  1. Import to your LoginActivity, in addition to the dependencies imported in the Set up Step:
    1
    2
    3
    4
    5
    6
    7
    8
    // Front End Dependencies
    import android.util.Log;
    import android.widget.Toast;
    // Parse Dependencies
    import com.parse.LogInCallback;
    import com.parse.ParseException;
    import com.parse.ParseTwitterUtils;
    import com.parse.SaveCallback;
    
  2. Then, in addition to the initialization made in the Set up Step, you need to initialize ParseTwitterUtils, so in the onCreate method, right before setContentView use:
    1
    2
    // don't forget to change the line below with the Consumer Key and the Consumer Secret that you obtained at the Set Up Step
    ParseTwitterUtils.initialize("INSERT_YOUR_CONSUMER_KEY", "INSERT_YOUR_CONSUMER_SECRET");
    
  3. 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.

  4. 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. 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!