Thêm Firebase vào Flutter và login với Facebook

6084

Bài viết được sự cho phép của tác giả Khiêm Lê

Facebook – đây đã là cái tên không còn xa lạ gì nữa đối với mỗi chúng ta, nó đang là trang mạng xã hội lớn nhất hành tinh. Facebook không chỉ dừng lại ở đó, họ còn cung cấp các SDK, API cho các lập trình viên để có thể tích hợp các dịch vụ của mình vào các dịch vụ của họ, phổ biến nhất trong số đó là Login with Facebook.

Tại sao chúng ta cần phải tích hợp Facebook trong khi chúng ta có thể tự tạo một phương thức bảo mật riêng cho ứng dụng của mình? Có rất nhiều lý do, nhưng điều dễ thấy nhất chính là tính tiện dụng của nó. Hãy tưởng tượng bạn dùng một ứng dụng mà phải đăng ký tài khoản, rồi phải nhớ tài khoản, mật khẩu đăng nhập… Vậy tại sao bạn không dùng facebook login chỉ với một nút nhấn? Trong bài viết này mình sẽ hướng dẫn các bạn tích hợp facebook login vào flutter. Hãy cùng bắt đầu nào!

Tạo project Flutter

Đầu tiên, chúng ta cần có một project Flutter androidX và có tích hợp Firebase. Ở đây mình sử dụng androidX bởi vì trong bài viết mình có sử dụng một plugin để login facebook, nhưng plugin đó đã cũ đối với bản thông thường (không có androidX), do đó để tránh bị lỗi không mong muốn, mình khuyên bạn nên dùng androidX. Bạn nào có sẵn project rồi thì migrate sang androidX, bạn nào chưa thì tạo project theo lệnh “flutter create –androidx <project_name>”. Mình sẽ tạo project là flutter_login_with_facebook và tích hợp Firebase Authentication vào, bạn nào chưa biết thì có thể xem lại bài viết Thêm Firebase vào Flutter và login với Google.

Ứng dụng demo của mình như sau, mình muốn có một button Login with Facebook ở giữa màn hình, sau khi nhấn vào thì thực hiện đăng nhập. Sau khi đăng nhập thành công thì sẽ hiển thị message là “Logged in as <name>”, bên dưới là một button Logout. Code mình sẽ có như sau:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _isLoggedIn = false;
  String _message;

  Future _loginWithFacebook() async {
    // TODO: handle login
  }

  Future _logout() async {
    // TODO: Handle logout
  }

  Future _checkLogin() async {
    // TODO: check if user logged in
  }

  @override
  void initState() {
    super.initState();
    _checkLogin();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: _isLoggedIn
            ? Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(_message),
                  SizedBox(height: 12.0),
                  OutlineButton(
                    onPressed: () {
                      _logout();
                    },
                    child: Text('Logout'),
                  ),
                ],
              )
            : RaisedButton(
                onPressed: () {
                  _loginWithFacebook();
                },
                color: Colors.blue,
                textColor: Colors.white,
                child: Text('Login with Facebook'),
              ),
      ),
    );
  }
}

Vậy là phần giao diện coi như đã xong. Giờ chúng ta sẽ đến phần tạo app trên facebook developers và config app của chúng ta.

Tạo app trên facebook developers và config app

Đầu tiên, chúng ta cần tạo app trên facebook for developers trước. Các bạn truy cập developers.facebook.com, đăng nhập tài khoản developer của mình, nếu bạn chưa từng thì cứ dùng account facebook đăng nhập vào và thực hiện theo hướng dẫn. Ở trang chủ bạn vào My Apps và chọn Create App.

Tiếp theo, ở component Create a New App ID, các bạn nhập tên app vào, ví dụ như mình nhập là Flutter Login App. Lưu ý là tên này không được chứa tên thương hiệu ví dụ như trong tên mà có chữ Fb hay Facebook thì đều bị chặn. Phần Contact Email các bạn nhập email của các bạn vào và nhấn Create App ID.

Ở phần Quick Start, các bạn chọn Android hoặc iOS để bắt đầu thiết lập. Vì mình chỉ có máy Windows vậy nên mình chỉ có thể làm trên Android, sau này có điều kiện mình sẽ hướng dẫn sau. Các bạn chọn Android.

Sau khi nhấn vào nó sẽ đưa bạn đến một trang Setup dành cho Android. Ở phần setup này tổng cộng có 10 step, ở hai step đầu bạn không cần thực hiện, hãy nhấn Next và bỏ qua hai step này. Ở step thứ ba, bạn lấy applicationId trong file “android/app/build.gradle” và để vào Package Name, phần Default Activity Class Name bạn cũng dán vào và thêm .MainActivity vào sau đó nhấn Save.

Sau khi bạn nhấn Save, một component sẽ hiện ra thông báo là app của bạn không tồn tại trên CH Play (vì mình chưa deploy lên mà), bạn nhấn vào Use this package name để bỏ qua và nhấn Continue.

Ở step 4, bạn cần lấy Key Hash để thêm vào, cách thực hiện như sau:

Đề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 FilesAndroidAndroid Studiojrebin”) 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ụ của mình là KhiemLe và path đến OpenSSL là “C:OpenSSL” thì mình sẽ chạy lệnh “keytool -exportcert -alias androiddebugkey -keystore “C:UsersKhiemLe.androiddebug.keystore” | “C:OpenSSLbinopenssl” sha1 -binary | “C:OpenSSL binopenssl” base64″
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 SettingsAdministrator.androiddebug.keystore” | “C:OpenSSLbinopenssl” sha1 -binary |”C:OpenSSLbinopenssl” 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>
    <!--Orther codes-->

    <application>
        <!--Orther codes-->

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

Biết chọn gì đây? Flutter, React Native hay Xamarin?

Chat app đơn giản với Flutter

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.

Một lưu ý cho các bạn là các bạn chỉ có thể đăng nhập facebook trên app bằng tài khoản developer, hoặc các bạn có thể thêm tài khoản developer, tester vào để test. Nếu app của bạn muốn deploy lên Google Play, bạn bắt buộc phải chọn Category app, cung cấp đường dẫn Privacy của bạn ở phần Privacy Policy URL và Terms of Service URL, sau đó Save changes lại. Tiếp theo là nhấn vào Enable ở chỗ Switch đang hiện OFF, nhập mật khẩu vào và xác nhận.

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!

Code Flutter đăng nhập với Facebook và Firebase

Ở phía trên chúng ta đã có giao diện cho app rồi, giờ là lúc code xử lý. Đầu tiên, chúng ta cần thêm các dependencies trong file pubspec.yaml. Bạn mở file đó lên và thêm 3 dependencies sau:

dependencies:
  # file này thì nhớ để ý tab cho đúng nha
  firebase_core: ^0.4.0+9
  firebase_auth: ^0.14.0+5
  flutter_facebook_login: ^3.0.0
  # Orther codes

Lưu các thay đổi lại, nếu Code Editor không tự get dependencies thì bạn chạy lệnh “flutter packages get”. Giờ ta quay lại với file main.dart, chúng ta sẽ bắt đầu bằng việc thêm thư viện cần thiết trước.

import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter_facebook_login/flutter_facebook_login.dart';

Sau khi thêm thư viện xong thì trong class _MyHomePageState, bạn thêm cho mình hai biến final sau:

  final _auth = FirebaseAuth.instance;
  final _facebooklogin = FacebookLogin();

Bắt đầu với việc đăng nhập trước nhé, trong hàm _loginWithFacebook mình sẽ có code sau:

// Orther codes
  Future _loginWithFacebook() async {
    // Gọi hàm LogIn() với giá trị truyền vào là một mảng permission
    // Ở đây mình truyền vào cho nó quền xem email
    final result = await _facebooklogin.logIn(['email']);
    // Kiểm tra nếu login thành công thì thực hiện login Firebase
    // (theo mình thì cách này đơn giản hơn là dùng đường dẫn
    // hơn nữa cũng đồng bộ với hệ sinh thái Firebase, tích hợp được
    // nhiều loại Auth

    if (result.status == FacebookLoginStatus.loggedIn) {
      final credential = FacebookAuthProvider.getCredential(
        accessToken: result.accessToken.token,
      );
      // Lấy thông tin User qua credential có giá trị token đã đăng nhập
      final user = (await _auth.signInWithCredential(credential)).user;
      setState(() {
        _message = "Logged in as ${user.displayName}";
        _isLoggedIn = true; 
      });
    }
  }
// Orther codes

Giờ công việc đơn giản hơn nhiều đối với hai hàm còn lại. Mình sẽ có code như sau:

  Future _logout() async {
    // SignOut khỏi Firebase Auth
    await _auth.signOut();
    // Logout facebook
    await _facebooklogin.logOut();
    setState(() {
     _isLoggedIn = false; 
    });
  }

  Future _checkLogin() async {
    // Kiểm tra xem user đã đăng nhập hay chưa
    final user = await _auth.currentUser();
    if (user != null) {
      setState(() {
        _message = "Logged in as ${user.displayName}";
       _isLoggedIn = true; 
      });
    }
  }

Vậy là chúng ta đã hoàn tất công việc rồi. Bạn có thể chạy app để test thử. Lưu ý là bạn nên test trên máy ảo có cài CH Play hoặc máy thật để tránh lỗi không mong muốn. Nếu như bạn muốn cài trên máy thật, bạn phải bật USB debugging và cho phép máy tính truy cập bộ nhớ. Và trên máy tính bạn phải cài Google USB driver nhé. Giờ hãy cùng xem kết quả nào!

Lưu ý: nếu bạn nào đăng nhập không được thì nó đã bị sai Hash key rồi. Cách mà mình xử lý như sau:

Bạn thêm đoạn code “_facebooklogin.loginBehavior = FacebookLoginBehavior.webViewOnly;” vào trước dòng code “final result = await _facebooklogin.logIn([’email’]);” Sau đó bạn reload lại app, tiến hành đăng nhập. Lúc này sẽ không phải đăng nhập bằng app facebook trên điện thoại của bạn nữa mà nó sẽ mở một webview để chúng ta đăng nhập. Bạn đăng nhập tài khoản facebook của bạn vào. Sau khi đăng nhập xong facebook sẽ yêu cầu bạn cấp quyền cho ứng dụng truy cập vào tài khoản của bạn, bạn nhấn tiếp tục.

Sau khi đã đăng nhập thành công ứng dụng sẽ hiện ra dòng chữ Logged in as <your_name>. Bạn nhấn Logout. Quay lại code lúc nảy và thay webViewOnly thành nativeOnly, reload lại app và nhấn đăng nhập. Lúc này trên màn hình sẽ hiện lên lỗi và có kèm cả Hash Key,

Các bạn đem cái hash key đó dán vào trong cái hash key ban đầu các bạn đã thêm trong facebook login. Tiến hành đăng nhập lại. Lần này chắc chắn sẽ không lỗi nữa.

Theo như mặc định nếu máy bạn có cài app facebook thì sẽ hỏi quyền đăng nhập thôi, nếu máy bạn chưa cài thì nó sẽ hiện webview cho các bạn đăng nhập. Hoặc bạn có thể chỉnh lại như trên mình vừa thực hiện.

Tổng kết

Vậy là trong bài viết này mình đã hướng dẫn các bạn tích hợp đăng nhập facebook vào ứng dụng flutter cùng với firebase. Các bạn có thể xem lại code tại đây. Nếu các bạn có bất kỳ thắc mắc nào, đừng ngần ngại comment phía bên dưới bài viết, mình sẽ hỗ trợ các bạn. Nếu bạn thấy bài viết hay, đừng quên chia sẻ với bạn bè để mọi người cùng học nha. Cảm ơn các bạn đã đọc bài viết!

Bài viết gốc được đăng tải tại khiemle.dev

Có thể bạn quan tâm:

Xem thêm IT Jobs for Developer hấp dẫn trên TopDev