BÀI 45 - XÁC THỰC ĐĂNG NHẬP BẰNG TÀI KHOẢN FACEBOOK TRONG LẬP TRÌNH ANDROID

  • Đầu tiên, cũng phải thêm các thư viện của Firebase vào ứng dụng:

  • Trong tệp Gradle cấp gốc (cấp dự án) của bạn ( build.gradle ), hãy thêm các quy tắc để bao gồm plugin Gradle Dịch vụ của Google.

buildscript {

repositories {

// Check that you have the following line (if not, add it):

google() // Google's Maven repository

}

dependencies {

// Add the following line:

classpath 'com.google.gms:google-services:4.3.8' // Google Services plugin

}

}

  • Trong tệp Gradle mô-đun (cấp ứng dụng) của bạn (thường là app/build.gradle ), hãy áp dụng plugin Gradle Dịch vụ của Google:

apply plugin: 'com.android.application'

// Add the following line:

apply plugin: 'com.google.gms.google-services' // Google Services plugin

  • Thêm SDK Firebase vào ứng dụng của bạn. Khai báo chúng trong tệp Gradle mô-đun (cấp ứng dụng) của bạn (thường là app/build.gradle ).

dependencies {

implementation platform('com.google.firebase:firebase-bom:28.2.1')

implementation 'com.google.firebase:firebase-analytics'

// Declare the dependencies for any other desired Firebase products

// For example, declare the dependencies for Firebase Authentication and Cloud Firestore

implementation 'com.google.firebase:firebase-auth'

implementation 'com.google.firebase:firebase-firestore'

}

private CallbackManager mCallbackManager;

private FirebaseAuth.AuthStateListener authStateListener;

private FirebaseAuth mAuth;

ImageView imgAvatar;


@Override

public void onStart() {

super.onStart();

mAuth.addAuthStateListener(authStateListener);

}


@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

LoginButton loginFacebook = findViewById(R.id.loginFacebook);

imgAvatar = findViewById(R.id.imageViewAvatarFacebook);

mAuth = FirebaseAuth.getInstance();

FacebookSdk.sdkInitialize(getApplicationContext());

mCallbackManager = CallbackManager.Factory.create();

loginFacebook.setReadPermissions("email", "public_profile");

loginFacebook.registerCallback(mCallbackManager, new FacebookCallback<LoginResult>() {

@Override

public void onSuccess(LoginResult loginResult) {

showToast("facebook:onSuccess:");

handleFacebookAccessToken(loginResult.getAccessToken());

}

@Override

public void onCancel() {

showToast("facebook:onCancel");

}

@Override

public void onError(FacebookException error) {

showToast("facebook:onError");

}

});

authStateListener = firebaseAuth -> {

FirebaseUser user = firebaseAuth.getCurrentUser();

updateUI(user);

};

}


public void onActivityResult(int requestCode, int resultCode, Intent data){

super.onActivityResult(requestCode, resultCode, data);

mCallbackManager.onActivityResult(requestCode, resultCode, data);

}


private void handleFacebookAccessToken(AccessToken token) {


AuthCredential credential = FacebookAuthProvider.getCredential(token.getToken());

mAuth.signInWithCredential(credential).addOnCompleteListener(this, task -> {

if (task.isSuccessful()) {

showToast("signInWithCredential:success");

FirebaseUser user = mAuth.getCurrentUser();

updateUI(user);

}

});

}


private void updateUI(FirebaseUser user) {

if (user != null) {

showToast("Hello" + user.getDisplayName());

if (user.getPhotoUrl() != null) {

String photoURL = user.getPhotoUrl().toString();

photoURL = photoURL + "?type=large";

Picasso.get().load(photoURL).into(imgAvatar);

}

} else {

showToast("Đăng nhập Facebook");

imgAvatar.setImageResource(R.drawable.logo_facebook);

}

}

Kiểm tra đăng nhập

private FirebaseAuth mAuth;

mAuth = FirebaseAuth.getInstance();

FirebaseUser user = mAuth.getCurrentUser();

if (user != null) {

Đã đăng nhập

}

Log out

mAuth.signOut();

LoginManager.getInstance().logOut();

  • BƯỚC 2: Bật tính năng xác thực facebook trên Firebase của bạn

Sau khi mở hệ thống yêu cầu bạn nhập ID app và mã bảo mật. Để có này này bạn vào trang Facebook dành cho nhà phát triển và tạo app để lấy 2 khóa này. Truy cập tại đây: Giống hình dưới thì bạn bấm vào Create App

Sau đó hệ thống sẽ xuất hiện hộp thoại như hình dưới. Có nhiều tùy chọn app khác nhau nhưng mình cần xác minh đăng nhập thôi nên sẽ click vào Consumer như hình dưới nhá! và sau đó là bấm vào Continue

Sau đó, bấm vào Setup trong Facebook Login để bắt đầu setup. Hơi khó, nên bạn chịu khó đọc nhe!

Chọn vào ứng dụng Android và tiến hành các bước tiếp theo. Đến bước 2 thì copy thư viện vào ( Gradle.App ) và import 2 thư viện vào code java.

Trong dự án của bạn, hãy mở your_app | Gradle Scripts | build.gradle (Module: app) và thêm câu lệnh biên dịch sau vào dependencies{}phần để biên dịch phiên bản SDK mới nhất:

implementation 'com.facebook.android:facebook-android-sdk:5.15.3'

implementation 'com.google.firebase:firebase-auth'

implementation 'com.squareup.picasso:picasso:2.71828' //lấy avatar facebook

Thêm các câu lệnh sau để nhập các gói Facebook SDK:

import com.facebook.FacebookSdk;

import com.facebook.appevents.AppEventsLogger;

  • Bước tiếp theo là bắt đầu lấy các key nè. Bạn làm theo như sau nhé!

  • Đầu tiên bạn cần tải OpenSSL của Google. Bạn có thể tải tại đây. Sau khi tải về xong bạn giải nén ra ở một nơi nào đó.

  • Bạn tìm thư mục jre/bin trong thư mục cài đặt Android Studio (máy của mình sẽ là “C:\Program Files\Android\Android Studio\jre\bin”) và mở Git bash.

  • Bạn bấm copy đoạn code trong mục Windows, dán vào Git bash, bạn sửa lại PATH_TO_OPENSSL_LIBRARY thành đường dẫn đến thư mục chứa OpenSSL các bạn đã giải nén lúc nảy. Sửa USERNAME thành tên User của bạn.


  • Ví dụ như hình dưới: Sau khi hoàn thành bạn sẽ thấy key bên dưới thì copy lại nha!


  • Nhập mật khẩu, mật khẩu mặc định sẽ là “android”. Bạn gõ “android” vào và nhấn Enter. Đoạn code sẽ xuất hiện bạn copy và dán vào phần Key Hashes, nhấn Save và Continue để tiếp tục.

  • Lưu ý: Nếu bạn chạy lệnh trên mà bị báo lỗi keytool command not found, bạn thêm ./ trước từ keytool. Nếu có lỗi nào khác phát sinh, hoặc là bạn kiểm tra độ dài mã Hash trả về không đúng 28 kí tự thì bạn chạy lệnh “./keytool -exportcert -alias androiddebugkey -keystore “C:\Documents and Settings\Administrator.android\debug.keystore” | “C:\OpenSSL\bin\openssl” sha1 -binary |”C:\OpenSSL\bin\openssl” base64″ Trong đó bạn thay “C:\OpenSSL” thành đường dẫn đến openSSL bạn đã tải về.

Ở step 5, nếu như bạn muốn thông báo của Android có thể mở ứng dụng của bạn thì bạn bật Enable Single Sign On, không thì để mặc định, nhấn Save và Continue.

Tiếp theo, step 6, cũng là step cuối cùng mà mình cần thực hiện. Đầu tiên bạn mở file “/android/app/src/main/res/values/strings.xml”, nếu chưa có thì bạn tạo ra file đó. Sau đó mở lên và bạn copy đoạn code Facebook đưa cho bạn vào thẻ resource. Ví dụ file strings.xml của mình như sau:

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

<resources>

<string name="app_name">Flutter login with Facebook</string>

<!--Bạn copy hai dòng đầu tiên dán vào đây-->

<!--Ví dụ-->

<string name="facebook_app_id">000000000000</string>

<string name="fb_login_protocol_scheme">1111111111111</string>

</resources>

Bạn lưu lại và thoát ra. Tiếp theo, bạn mở file /android/app/src/main/AndroidManifest.xml, copy đoạn code “<uses-permission android:name=”android.permission.INTERNET”/>” thêm vào bên trong cặp thẻ chính manifest:

<manifest ...>

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

<!-- Orther codes-->

</manifest>

Tiếp theo, chúng ta sẽ thêm thẻ meta-data và custom chrome tab vào trong thẻ application. Bạn copy đoạn code ở mục số 5 và thêm vào. Code sẽ trông như như sau:

<manifest>

<application>

<meta-data android:name="com.facebook.sdk.ApplicationId"

android:value="@string/facebook_app_id"/>

<activity android:name="com.facebook.FacebookActivity"

android:configChanges=

"keyboard|keyboardHidden|screenLayout|screenSize|orientation"

android:label="@string/app_name" />

<activity

android:name="com.facebook.CustomTabActivity"

android:exported="true">

<intent-filter>

<action android:name="android.intent.action.VIEW" />

<category android:name="android.intent.category.DEFAULT" />

<category android:name="android.intent.category.BROWSABLE" />

<data android:scheme="@string/fb_login_protocol_scheme" />

</intent-filter>

</activity>

</application>

</manifest>

  • Lưu tất cả các thay đổi lại và thoát ra. Giờ đến lúc chúng ta config firebase.

Config Firebase Authentication

  • Để config Firebase Authentication login với Facebook các bạn cần lấy được App ID và App Secret, để lấy được các bạn làm như sau: ở trên trang facebook for developers các bạn tìm mục Basic trong tab Settings và nhấn vào. Các bạn sẽ thấy App ID và App Secret của mình ở đó, App Secret thì các bạn bấm vào Show thì nó mới hiện ra (có thể yêu cầu mật khẩu). Bạn copy hai cái đó và để tạm ở một nơi nào đó chút nữa mình sẽ dùng.

  • Tiếp theo, các bạn mở Firebase Console và mở project của các bạn đã thêm app của mình, tìm đến mục Authentication và nhấn vào tab Sign-in method. Ở trong tab này các bạn sẽ thấy một Provider là Facebook, các bạn bấm vào đó, chọn Enable. Sau đó, các bạn dán cái App ID và App Secret đã lấy ở trên vào hai mục phía dưới, đừng nhấn Save vội, bạn tiếp tục copy OAuth redirect URI rồi sau đó mới nhấn Save.

  • Sau khi Save lại, bạn tiếp tục quay về facebook for developers, tìm đến mục Settings trong product Facebook Login. Sau đó bạn dán URL bạn vừa copy vào mục Valid OAuth Redirect URIs và nhấn Save. Vậy là xem như chúng ta đã Setup xong phần facebook và firebase rồi. Giờ là lúc code flutter!

  • Trở lại Gradle.App để thêm 2 thư viện này nữa

dependencies {

implementation platform('com.google.firebase:firebase-bom:28.2.1')

implementation 'com.google.firebase:firebase-auth'

}