c

Login with Twitter for Android Apps using Fabric

Tutorial on how to integrate the Login with Twitter in your Android apps using Fabric.
Twitter Login Email Fabric Request Android Android Studio

In this div we will try to explain from top to bottom the whole process that let us include in an Android app the identification process of an user to grant them access to the app using their Twitter users in a simple and easy way, step by step.

We decided to use the Android IDE, Android Studio, so the first step will to create a new project (we asume that everybody reading these lines already know how to do this), give it a name and check that we can build and run the app in an Android device or the simulator.

1. Create a Fabric

account

First thing we need is to sing up on Fabric, to do this we have to go to http://fabric.io
In this website we create the account or access with our email/user and password.

twitter login con fabric 1

2. Install Fabric plugin for Android Studio

Once we already have our Fabric account and access to the Dashboard, we'll be guided throw a process where we can define our app, the platform that we are developing for and more data.

But we will install the Fabric plugin for Android Studio to add the Fabric and Twitter libraries to our app and start adding code because it is what we really want. We can find the pugins div in our dasboard.

twitter login con fabric 2

How to install the Android Studio plugin

3. Add Twitter Kit using Fabric

Now that we already have Frabric installed, we only need to select it in the top menu bar to show the Fabric interface, then we will have to access with our Fabric user, user/email and password, and then select the Kits that we want to use in our app.

twitter login con fabric 3

In this case we will add the Twitter Kit because we want to add the login with Twitter to access to our system. Once we select the Kit we only neeed to follow the steps shown to add the libraries and some small bits of code that will be added automatically to our code.
We will also have the option to "Create Account" if we still don't have a Twitter or Fabric app created, this case right now, or "I already have a Twitter account" where we can introduce the Twitter Key and Twitter Secret of an app that we already had and we want to add the login feature. This step it's not that important because we will be always able to connect an app that we have as we will see it later.

twitter login con fabric 4 twitter login con fabric 5 twitter login con fabric 6
twitter login con fabric 7

Basically, the only thing we did until now is to add some dependencies and libraries to our project that we will need later to create the login button and recover the user data and the session we create. Fabric will add some code in:

  • build.gradle: it will add the dependencies and repositories to add the Twitter and Fabric libraries to the project.
  • AndroidManifest: here it will be added the Fabric ApiKey and the Internet connection permission.
  • LoginActivity: in this project this is the main Activity of the project where we will import the libraries and we will store the TWITTER_KEY and TWITTER_SECRET that we created or configured with Fabric.
                                                        // Note: Your consumer key and secret should be obfuscated in your source code before shipping.
                                                        private static final String TWITTER_KEY = "HwbaipJwOOpwaosev214grrtB";
                                                        private static final String TWITTER_SECRET = "MgBDKtFpDFEpwCC6F5eWI98iS4SxyIvF3WT6JAzLoFgLYSbBgc";
                                                    

4. Add the Twitter's Login button

To add the button so the users can log in our app using Twitter is as easy as adding to the layout we want the following code:

                                        <com.twitter.sdk.android.core.identity.TwitterLoginButton
                                            android:id="@+id/login_button"
                                            android:layout_width="wrap_content"
                                            android:layout_height="wrap_content"
                                            android:layout_centerVertical="true"
                                            android:layout_centerHorizontal="true" />
                                    

This will add the button to the layout, it will be associated with the id login_button and it will be centered vertically and horizontally on the device screen. Besides, we will add a couple of TextView to show the data that we will get from Twitter, an ImageView to show the user's Twitter image and a button to log out of Twitter.
So the code of our layout will be:

                                        <com.twitter.sdk.android.core.identity.TwitterLoginButton
                                            android:id="@+id/login_button"
                                            android:layout_width="wrap_content"
                                            android:layout_height="wrap_content"
                                            android:layout_centerVertical="true"
                                            android:layout_centerHorizontal="true" />

                                        <TextView
                                            android:layout_width="wrap_content"
                                            android:layout_height="wrap_content"
                                            android:id="@+id/textView"
                                            android:layout_below="@+id/login_button"
                                            android:layout_centerHorizontal="true"
                                            android:layout_alignParentEnd="false"
                                            android:layout_alignParentStart="false"
                                            android:layout_alignParentLeft="true"
                                            android:layout_alignParentRight="true"
                                            android:layout_marginTop="10dp"
                                            android:gravity="center_horizontal"
                                            android:textSize="16dp" />

                                        <TextView
                                            android:layout_width="wrap_content"
                                            android:layout_height="wrap_content"
                                            android:id="@+id/textView2"
                                            android:layout_below="@+id/textView"
                                            android:layout_centerHorizontal="true"
                                            android:layout_alignParentEnd="false"
                                            android:layout_alignParentStart="false"
                                            android:layout_alignParentLeft="true"
                                            android:layout_alignParentRight="true"
                                            android:layout_marginTop="10dp"
                                            android:gravity="center_horizontal"
                                            android:textSize="16dp" />

                                        <ImageView
                                            android:layout_width="wrap_content"
                                            android:layout_height="wrap_content"
                                            android:id="@+id/imageView"
                                            android:layout_above="@+id/login_button"
                                            android:layout_centerHorizontal="true"
                                            android:layout_marginBottom="10dp" />

                                        <Button
                                            android:layout_width="wrap_content"
                                            android:layout_height="wrap_content"
                                            android:text="Logout"
                                            android:id="@+id/button"
                                            android:layout_alignTop="@+id/login_button"
                                            android:layout_alignLeft="@+id/login_button"
                                            android:layout_alignStart="@+id/login_button"
                                            android:layout_alignRight="@+id/login_button"
                                            android:layout_alignEnd="@+id/login_button"
                                            android:background="#ff261a"
                                            android:textColor="#ffffff"
                                            android:visibility="invisible" />
                                    

5. The Code

Now that we have the button in the layout, we need to assign a Callback so when the user grants the access or not to Twitter, we can work with the data that we can get from Twitter's API.
The function that we assing to the button will be:


                                        // Note: Your consumer key and secret should be obfuscated in your source code before shipping.
                                        private static final String TWITTER_KEY = "HwbaipJwOOpwaosev214grrtB";
                                        private static final String TWITTER_SECRET = "MgBDKtFpDFEpwCC6F5eWI98iS4SxyIvF3WT6JAzLoFgLYSbBgc";

                                        private TwitterLoginButton loginButton;
                                        private Button logoutButton;
                                        private TextView textView;
                                        private TextView textView2;
                                        ...

                                        @Override
                                        protected void onCreate(Bundle savedInstanceState) {
                                            super.onCreate(savedInstanceState);

                                            TwitterAuthConfig authConfig = new TwitterAuthConfig(TWITTER_KEY, TWITTER_SECRET);
                                            Fabric.with(this, new Twitter(authConfig));

                                            setContentView(R.layout.activity_login);

                                            logoutButton = (Button) findViewById(R.id.button);
                                            textView = (TextView)findViewById(R.id.textView);
                                            textView2 = (TextView)findViewById(R.id.textView2);

                                            loginButton = (TwitterLoginButton) findViewById(R.id.login_button);
                                            loginButton.setCallback(new Callback() {
                                                @Override
                                                public void success(Result result) {

                                                    textView.setText("@" + result.data.getUserName() + " (" + result.data.getUserId() + ")");

                                                    getUserData(result.data);

                                                    loginButton.setVisibility(View.INVISIBLE);
                                                    logoutButton.setVisibility(View.VISIBLE);

                                                }

                                                @Override
                                                public void failure(TwitterException exception) {
                                                    new AlertDialog.Builder(LoginActivity.this).setTitle("ERROR").setMessage(exception.getLocalizedMessage()).setNeutralButton("OK", null).show();
                                                }
                                            });

                                            //Auto Login con Twitter
                                            TwitterSession twitterSession = Twitter.getSessionManager().getActiveSession();
                                            if (twitterSession != null) {

                                                getUserData(twitterSession);

                                                loginButton.setVisibility(View.INVISIBLE);

                                                logoutButton.setVisibility(View.VISIBLE);

                                            }

                                            logoutButton.setOnClickListener(new View.OnClickListener() {
                                                @Override
                                                public void onClick(View v) {

                                                    TwitterSession twitterSession = TwitterCore.getInstance().getSessionManager().getActiveSession();
                                                    if (twitterSession != null) {

                                                        CookieManager cookieManager = CookieManager.getInstance();
                                                        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP_MR1) {cookieManager.removeSessionCookies(null);}
                                                        else {cookieManager.removeSessionCookie();}

                                                        Twitter.getSessionManager().clearActiveSession();
                                                        Twitter.logOut();

                                                        textView.setText("User Logged Out");

                                                        loginButton.setVisibility(View.VISIBLE);
                                                        logoutButton.setVisibility(View.INVISIBLE);
                                                        textView2.setText("");
                                                    }

                                                }
                                            });
                                        }

                                        @Override
                                        protected void onActivityResult(int requestCode, int resultCode, Intent data) {
                                            super.onActivityResult(requestCode, resultCode, data);

                                            // Pass the activity result to the login button.
                                            loginButton.onActivityResult(requestCode, resultCode, data);
                                        }

                                        public void getUserData(TwitterSession session) {
                                            Twitter.getApiClient(session).getAccountService().verifyCredentials(true, false, new com.twitter.sdk.android.core.Callback() {
                                                @Override
                                                public void success(Result userResult) {

                                                    textView2.setText("Full Name: " + userResult.data.name + "\nEmail: " + userResult.data.email + "\nURL: " + userResult.data.url + "\nDescription: " + userResult.data.description + "\nFollowers: " + userResult.data.followersCount);

                                                    new DownloadImageTask((ImageView) findViewById(R.id.imageView)).execute("https://twitter.com/" + userResult.data.screenName + "/profile_image?size=original");

                                                }

                                                @Override
                                                public void failure(TwitterException e) {
                                                    new AlertDialog.Builder(LoginActivity.this).setTitle("ERROR").setMessage(e.getLocalizedMessage()).setNeutralButton("OK", null).show();
                                                }
                                            });
                                        }
                                    

If we analyze the code step by step.

loginButton.setCallback(new Callback() {});
This is the login button's Callback, when the user takes the decision to grant or not the access to our app, it will be here where it will return the control to our app.
But to do that we will have to pass the result of this action to the button again, so that's why we will have to add loginButton.onActivityResult(requestCode, resultCode, data); to the method onActivityResult
In the result that is given back to the Callback we can find the TwitterSession and the result.data where we will find some useful user data like the screen_name and the Twitter's id.
Besides, with this Twitter Session we can ask for the rest of the data of this user. In this example we use the getUserData(result.data) function to get this extra info and show it in the TextViews.

getUserData(result.data)
This function uses the API call .verifyCredentials to get all the user's data. Some of this data (the most important) is shown in the TextView and the ImageView.

AutoLogin using Twitter
What happens when an user has logged in with Twitter and closes the app but not logging out before?
Well, it happens that our app still has the user data and we can identify this user automatically. To do this, we have to check if there is a Twitter Session still open.
                                            TwitterSession twitterSession = Twitter.getSessionManager().getActiveSession();
                                            if (twitterSession != null) {
                                                //We have an open Twitter Session
                                            }
                                        

In this example, if there is an open Session, we recover it and get the user data same as we did before using the function getUserData(twitterSession).

Logout with Twitter
To log an user out of our app using Twitter we use the function that runs after the user taps on the Logout button. The first step is to recover the active Twitter Session TwitterCore.getInstance().getSessionManager().getActiveSession() and check if there is an active user if (twitterSession != null) and if so do the following.
Delete the Twitter cookies stored in the app:
                                            CookieManager cookieManager = CookieManager.getInstance();
                                            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP_MR1) {cookieManager.removeSessionCookies(null);}
                                            else {cookieManager.removeSessionCookie();}
                                        
Log the user out:
                                            Twitter.getSessionManager().clearActiveSession();
                                            Twitter.logOut();
                                        
Now we have the user logged out and we can do the actions we want or need in the app flow.

To check the code, you can download it from here ready to build and run.

Leave a comment

Comments

  • Miguel, 22.04.2016:

    Artículo buenísimo y super detallado!! Lo he probado con mi proyecto y funcionó a la primera.