Chưa phân loại

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

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

Sau khi tạo xong, nó sẽ chuyển chúng ta về trang quản lý, ở trang này có mục Add product, các bạn tìm mục Facebook Login và chọn Set up.

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.

import 'package:flutter/material.dart';


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

class MyHomePage extends StatefulWidget {
  @override
}

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

Create App Facebook

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.

Enter Display Name and Contact Email

Sau khi tạo xong, nó sẽ chuyển chúng ta về trang quản lý, ở trang này có mục Add product, các bạn tìm mục Facebook Login và chọn Set up.

Chọn Set Up Facebook Login

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

Chọn Quickstart 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.

Nhập Điền Package Name và Default Activity

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.

Chọn xác nhận sử dụng Package Name chưa Published

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

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

Nhập Key Hashes

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

Bỏ qua Single Sign On

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 chúng tôi của mình như sau:

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:



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

<activity android:name=”com.facebook.FacebookActivity”
android:configChanges=
<activity
android:name=”com.facebook.CustomTabActivity”

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.

Lấy App ID à App Secret

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.

Kích hoạt đăng nhập Facebook trong Firebase Console

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!

Ở 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();
// 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; 
      });
    }
  }

Login với tài khoản Facebook đang có trong máy

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.

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

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