Tích hợp mạng xã hội - Login với Facebook

Dẫn nhập

Ở các bài học trước, chúng ta đã cùng nhau tìm hiểu về CÁCH TẠO MỘT APP FACEBOOK SDK & CÁCH TÍCH HỢP VÀO ỨNG DỤNG ANDROID

Ở bài học này, chúng ta sẽ sử dụng Facebook SDK để tạo tính năng login cho ứng dụng. Sau khi login sẽ lấy về email, ID và tên người dùng Facebook.

---

Nội dung

Để đọc hiểu bài này tốt nhất các bạn nên có kiến thức cơ bản về các phần:

• CẤU TRÚC CƠ BẢN MỘT CHƯƠNG TRÌNH ANDROID.
• Đã đọc và thực hành bài trước: TÍCH HỢP MẠNG XÃ HỘI FACEBOOK - Phần 1

Trong bài học này, chúng ta sẽ cùng tìm hiểu các vấn đề:

• Cài đặt Facebook Login vào trong ứng dụng.

---

Tích hợp Facebook Login vào ứng dụng

Ở bài trước chúng ta đang làm đến đoạn nhập mã hash xong. Tiếp theo là tạo class Application và sửa nó.

Bước 1: Tạo một class mới có tên là “App” và extends từ Application:

• App.java

package com.howkteam.facebookloginexample;

import android.app.Application;

import com.facebook.FacebookSdk;
import com.facebook.appevents.AppEventsLogger;

public class App extends Application {

  @Override
  public void onCreate() {
    super.onCreate();
    FacebookSdk.sdkInitialize(getApplicationContext());
    AppEventsLogger.activateApp(this);
  }
}

Tiếp theo, sửa file AndroidManifest.xml để ứng dụng sử dụng cái class App đó:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
          package="com.howkteam.facebookloginexample">

    <uses-permission android:name="android.permission.INTERNET"/>

    <application
        android:name=".App"
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/facebook_app_id"/>
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>

                <category android:name="android.intent.category.LAUNCHER"/>bád
            </intent-filter>
        </activity>
    </application>

</manifest>

Bước 2: Sửa file activity_main.xml. Chúng ta sẽ thêm nút Login cho ứng dụng như sau:

<com.facebook.login.widget.LoginButton
    android:id="@+id/login_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:layout_marginTop="30dp"
    android:layout_marginBottom="30dp" />

Nút Login này là một Button bình thường, nhưng đã cài đặt thêm Callback, nó nằm trong bộ Facebook SDK mà chúng ta đã import từ phần 1. Nội dung đầy đủ của activity_main.xml sẽ như sau:

• activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.howkteam.facebookloginexample.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"/>

    <com.facebook.login.widget.LoginButton
        android:id="@+id/login_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="30dp"
        android:layout_marginBottom="30dp" />
</RelativeLayout>

Bước 3: Chỉnh sửa file MainActivity.java. Chúng ta sẽ đi lần lượt. Đầu tiên là gọi ra CallbackManager và khởi tạo nút:

CallbackManager callbackManager;
LoginButton fbLoginButton;

• CallbackManager: Có tác dụng quản lý callback dữ liệu gửi/nhận từ màn hình đăng nhập và cung cấp quyền của Facebook.
• LoginButton: Chính là nút bấm Facebook mà ta đã gọi ở file activity_main.xml

Tiếp theo, trong hàm onCreate chúng ta gọi:

FacebookSdk.sdkInitialize(this.getApplicationContext());
callbackManager = CallbackManager.Factory.create();

• Để khởi chạy FacebookSDK, lưu ý là đoạn code trên phải đặt sau hàm setContentView().

Tiếp theo, cài đặt Facebook Login Button:

fbLoginButton = (LoginButton) findViewById(R.id.login_button);
//https://developers.facebook.com/docs/facebook-login/permissions#reference
fbLoginButton.setReadPermissions("email");

Lưu ý: Facebook Button ở đây cài đặt sẵn Callback chịu trách nhiệm lấy dữ liệu chỉ đọc, trường hợp này mình lấy email. Các bạn có thể xem thêm danh sách các permission ở:

https://developers.facebook.com/docs/facebook-login/permissions#reference

Tiếp theo, viết hàm getFbInfo để lấy dữ liệu từ Facebook sau khi login xong.

Hơi khó hiểu phải không? Đã login rồi lại còn phải gọi lần nữa làm chi? Đừng sợ, thật ra chúng ta chỉ qua có 2 pha:

• Pha 1: Login vào Facebook, xác thực app để lấy permission, permission tồn tại dưới dạng một AccessToken (một đoạn mã khá dài). AccessToken này luôn đi kèm các request mà ta gửi lên server Facebook.
• Pha 2: Sử dụng AccessToken đã có, tạo request để lấy thông tin người dùng.

Hàm getFbInfo có dạng:

private void getFbInfo() {

  if (AccessToken.getCurrentAccessToken() != null) {
    GraphRequest request = GraphRequest.newMeRequest(AccessToken.getCurrentAccessToken(),
            new GraphRequest.GraphJSONObjectCallback() {
              @Override
              public void onCompleted(final JSONObject me, GraphResponse response) {
                if (me != null) {
                  Log.i("Login: ", me.optString("name"));
                  Log.i("ID: ", me.optString("id"));

                  Toast.makeText(MainActivity.this, "Name: " + me.optString("name"), Toast.LENGTH_SHORT).show();
                  Toast.makeText(MainActivity.this, "ID: " + me.optString("id"), Toast.LENGTH_SHORT).show();
                }
              }
            });

    Bundle parameters = new Bundle();
    parameters.putString("fields", "id,name,link");
    request.setParameters(parameters);
    request.executeAsync();
  }
}

• Đây chính là hàm xử lý pha 2.

Và nếu bạn tò mò muốn biết thì thật ra hàm newMeRequest ở trên sử dụng AsyncTask của Android dể xử lý bất đồng bộ việc lấy dữ liệu mà thôi.

Bước 4: Override hàm onActivityResult và sử dụng Callback đã khởi tạo từ trước, lấy dữ liệu về:

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

Bước 5: Cuối cùng, cài đặt Callback cho nút đăng nhập. Nó sẽ có dạng:  

fbLoginButton.registerCallback(callbackManager, new FacebookCallback<LoginResult>() {
    @Override
    public void onSuccess(LoginResult loginResult) {
      Log.d(TAG, "======Facebook login success======");
      Log.d(TAG, "Facebook Access Token: " + loginResult.getAccessToken().getToken());
      Toast.makeText(MainActivity.this, "Login Facebook success.", Toast.LENGTH_SHORT).show();

      getFbInfo();
    }

    @Override
    public void onCancel() {
      Toast.makeText(MainActivity.this, "Login Facebook cancelled.", Toast.LENGTH_SHORT).show();
    }

    @Override
    public void onError(FacebookException error) {
      Log.e(TAG, "======Facebook login error======");
      Log.e(TAG, "Error: " + error.toString());
      Toast.makeText(MainActivity.this, "Login Facebook error.", Toast.LENGTH_SHORT).show();
    }
  });
}

• Đây chính là pha 1. Các bạn để  ý là trong onCompleted mình có gọi hàm getFbInfo() ra để tiếp tục xử lý pha 2 đó.

Toàn bộ class MainActivity có nội dung như sau:

• MainActivity.java

package com.howkteam.facebookloginexample;

import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.widget.Toast;

import com.facebook.AccessToken;
import com.facebook.CallbackManager;
import com.facebook.FacebookCallback;
import com.facebook.FacebookException;
import com.facebook.FacebookSdk;
import com.facebook.GraphRequest;
import com.facebook.GraphResponse;
import com.facebook.login.LoginResult;
import com.facebook.login.widget.LoginButton;

import org.json.JSONObject;

public class MainActivity extends AppCompatActivity {
  private static final String TAG = MainActivity.class.getSimpleName();
  CallbackManager callbackManager;
  LoginButton fbLoginButton;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    FacebookSdk.sdkInitialize(this.getApplicationContext());
    callbackManager = CallbackManager.Factory.create();

    fbLoginButton = (LoginButton) findViewById(R.id.login_button);
    //https://developers.facebook.com/docs/facebook-login/permissions#reference
    fbLoginButton.setReadPermissions("email");

    fbLoginButton.registerCallback(callbackManager, new FacebookCallback<LoginResult>() {
      @Override
      public void onSuccess(LoginResult loginResult) {
        Log.d(TAG, "======Facebook login success======");
        Log.d(TAG, "Facebook Access Token: " + loginResult.getAccessToken().getToken());
        Toast.makeText(MainActivity.this, "Login Facebook success.", Toast.LENGTH_SHORT).show();

        getFbInfo();
      }

      @Override
      public void onCancel() {
        Toast.makeText(MainActivity.this, "Login Facebook cancelled.", Toast.LENGTH_SHORT).show();
      }

      @Override
      public void onError(FacebookException error) {
        Log.e(TAG, "======Facebook login error======");
        Log.e(TAG, "Error: " + error.toString());
        Toast.makeText(MainActivity.this, "Login Facebook error.", Toast.LENGTH_SHORT).show();
      }
    });
  }

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

  private void getFbInfo() {
    if (AccessToken.getCurrentAccessToken() != null) {
      GraphRequest request = GraphRequest.newMeRequest(AccessToken.getCurrentAccessToken(),
              new GraphRequest.GraphJSONObjectCallback() {
                @Override
                public void onCompleted(final JSONObject me, GraphResponse response) {
                  if (me != null) {
                    Log.i("Login: ", me.optString("name"));
                    Log.i("ID: ", me.optString("id"));

                    Toast.makeText(MainActivity.this, "Name: " + me.optString("name"), Toast.LENGTH_SHORT).show();
                    Toast.makeText(MainActivity.this, "ID: " + me.optString("id"), Toast.LENGTH_SHORT).show();
                  }
                }
              });

      Bundle parameters = new Bundle();
      parameters.putString("fields", "id,name,link");
      request.setParameters(parameters);
      request.executeAsync();
    }
  }
}

Bước 6: Chạy ứng dụng, trước khi khởi chạy thì nhớ kiểm tra permission INTERNET trong file AndroidManifest nhé:

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
          package="com.howkteam.facebookloginexample">

    <uses-permission android:name="android.permission.INTERNET"/>

    <application
        android:name=".App"
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/facebook_app_id"/>
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>

                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>
    </application>

</manifest>

Chúng ta sẽ được như sau:

Click vào nút trên, màn hình cấp quyền ứng dụng sẽ hiện ra, nhấn Continue (Tiếp tục):

Và thế là ứng dụng đã được cấp quyền, chúng ta đã tích hợp Facebook thành công:

---

Kết luận

Qua bài này chúng ta đã nắm được cách tích hợp cụ thể Facebook SDK và Facebook Login vào ứng dụng.

Bài sau chúng ta sẽ tìm hiểu tiếp về CÁCH TÍCH HỢP GOOGLE LOGIN VÀO ỨNG DỤNG

Cảm ơn các bạn đã theo dõi bài viết. Hãy để lại bình luận hoặc góp ý của mình để phát triển bài viết tốt hơn. Đừng quên “Luyện tập – Thử thách – Không ngại khó”.

---

Thảo luận

Nếu bạn có bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngần ngại đặt câu hỏi trong phần BÌNH LUẬN bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để nhận được sự hỗ trợ từ cộng đồng.