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:
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 : App ” và extends từ Application:
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 : 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 activity_main.xml sẽ như sau:
<?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 : 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 LoginButton 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
fbLoginButton.setReadPermissions("email" );
Lưu ý :
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 Pha 2
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 : 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 :
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:
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);
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 : 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ó ”.
Tải xuống
Tài liệu
Nhằm phục vụ mục đích học tập Offline của cộng đồng, Kteam hỗ trợ tính năng lưu trữ nội dung bài học Tích hợp mạng xã hội - Login với Facebook
Ngoài ra, bạn cũng có thể tìm thấy các tài liệu được đóng góp từ cộng đồng ở mục TÀI LIỆU trên thư viện Howkteam.com
Đừng quên like share
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.
Kteam
thay vi hiện nút login in with facebook nó lại hiện continue with facebook