Morioh
Login
Duy Tien

Duy Tien

7 months ago

Flutter đăng nhập Facebook: Cách thêm xác thực Facebook

Tìm hiểu cách thêm thông tin đăng nhập Facebook vào ứng dụng Flutter của bạn trong hướng dẫn dễ thực hiện này. Bạn sẽ sử dụng SDK Facebook và gói Đăng nhập Flutter để triển khai xác thực Facebook.

Thiết lập dự án Flutter

Đầu tiên, chúng ta cần tạo một dự án Flutter mới. Để làm được điều đó, hãy đảm bảo rằng Flutter SDK và các yêu cầu khác liên quan đến phát triển ứng dụng rung được cài đặt đúng cách. Nếu mọi thứ được thiết lập đúng cách, thì để tạo một dự án, chúng ta chỉ cần chạy lệnh sau trong thư mục cục bộ mong muốn:

flutter create fb_login_example

Sau khi dự án được thiết lập, chúng ta có thể điều hướng bên trong thư mục dự án và thực hiện lệnh sau trong thiết bị đầu cuối để chạy dự án trên trình mô phỏng có sẵn hoặc thiết bị thực tế:

flutter run

Giàn giáo dự án

Bây giờ, chúng ta sẽ xây dựng dự án mặc định và biến giao diện người dùng thành thứ chúng ta muốn. Chúng tôi sẽ xóa mã dự án rung mặc định và thay thế nó bằng mã giao diện người dùng của riêng chúng tôi. Ở đây, chúng ta sẽ có một nút đăng nhập giúp chúng ta kích hoạt đăng nhập Facebook. Sau khi đăng nhập thành công chúng ta sẽ hiển thị nút đăng xuất. Tất cả các thay đổi sẽ được thực hiện trong chính tệp main.dart. Mã tổng thể cho giao diện người dùng được cung cấp trong đoạn mã bên dưới:

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter FB login Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  bool _isLoggedIn = false;
  Map _user;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Facbook login example"),
      ),
      body: Container(
        child: _isLoggedIn
            ? Column(
mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  TextButton(
                      onPressed: () {
                      },
                      child: Text("Logout"))
                ],
              )
            : Center(
                child: ElevatedButton(
                  child: Text("Login with Facebook"),
                  onPressed: () async {
                    
                  },
                ),
              ),
      ),
    );
  }
}

Ở đây, chúng ta có mã đầy đủ của tệp main.dart. Chúng tôi đã tạo tiện ích MyHomePage trả về tiện ích Scaffold với Thanh ứng dụng và thuộc tính body có tiện ích Container làm cha mẹ. Tiện ích con Container được trang bị khả năng hiển thị có điều kiện. Trạng thái _isLoggedIn được sử dụng để xử lý trạng thái đăng nhập. Nếu sai thì chúng tôi hiển thị nút đăng nhập, nếu không chúng tôi sẽ hiển thị nút đăng xuất. _user Map được sử dụng để lưu trữ kết quả phản hồi sau khi đăng nhập thành công. Biến bản đồ này sẽ chứa dữ liệu người dùng từ Facebook.

Do đó, chúng ta sẽ nhận được kết quả UI sau trong trình mô phỏng:

 

Tạo ứng dụng Facebook

Bây giờ, chúng ta cần tạo và định cấu hình ứng dụng Facebook cho phép chúng ta kích hoạt tính năng đăng nhập Facebook. Phương pháp là liên kết ứng dụng Flutter của chúng tôi với ứng dụng Facebook đã bật tính năng đăng nhập Facebook.

Trước tiên, chúng ta cần đăng nhập vào Bảng điều khiển dành cho nhà phát triển Facebook. Sau khi đăng nhập thành công, chúng ta sẽ thấy màn hình sau trong trình duyệt:

Bây giờ, chúng ta cần nhấp vào 'Ứng dụng của tôi' để dẫn chúng ta đến Ứng dụng bảng điều khiển như trong ảnh chụp màn hình bên dưới:

Ở đây, chúng ta cần nhấp vào nút 'Tạo ứng dụng' theo hướng dẫn, thao tác này sẽ mở hộp thoại như trong ảnh chụp màn hình bên dưới :

Từ hộp thoại, chúng ta cần chọn loại ứng dụng và nhấp vào nút ‘Tiếp tục‘. Điều này sẽ dẫn chúng ta đến một hộp thoại khác nơi chúng ta cần nhập tên hiển thị của ứng dụng Facebook như trong đoạn mã bên dưới:

Sau khi nhập tên Ứng dụng, chúng ta cần nhấp vào nút ‘Tạo ứng dụng‘.

 

Bây giờ ứng dụng Facebook sẽ được tạo thành công và chúng ta sẽ được chuyển hướng đến màn hình bảng điều khiển ứng dụng như trong ảnh chụp màn hình bên dưới:

Trang tổng quan hiển thị

ID ứng dụng, Loại ứng dụng cùng với các sản phẩm khác mà chúng tôi có thể kích hoạt.

Thiết lập dịch vụ đăng nhập Facebook

Bây giờ, mục đích chính của chúng ta là thiết lập tính năng đăng nhập Facebook. Do đó, chúng ta cần nhấp vào nút ‘Thiết lập‘ của Đăng nhập Facebook dịch vụ.

Sau đó, chúng ta sẽ được chuyển đến màn hình nơi chúng ta có thể chọn nền tảng ứng dụng để kích hoạt dịch vụ Đăng nhập Facebook như trong ảnh chụp màn hình bên dưới:

Vì sắp định cấu hình cho nền tảng Android nên chúng ta cần nhấp vào ‘Android‘.

Sau đó, một trang sẽ mở ra nơi chúng tôi phải hoàn thành số bước để kích hoạt dịch vụ đăng nhập Facebook. Tất cả các bước đều được trang bị hướng dẫn chi tiết.

Tại đây, chúng ta cần chuyển trực tiếp sang bước 3, nơi chúng ta cần thêm tên gói ứng dụng rung và tên hoạt động chính. Điều này chúng ta có thể lấy từ tệp AndroidManifest.xml ở vị trí ./android/app/src/main/ . Sau đó, chúng ta có thể nhập tên gói và tên lớp hoạt động theo hướng dẫn trong ảnh chụp màn hình bên dưới:

Sau đó, chúng ta cần nhấp vào nút 'Lưu' và nhấn 'Tiếp tục'.

Bây giờ, bước tiếp theo là tạo khóa băm để kích hoạt dịch vụ. Tất cả các hướng dẫn cần thiết sẽ được cung cấp trong chính bước cụ thể đó.

Chúng ta cần xem hướng dẫn dành cho nền tảng Windows như trong ảnh chụp màn hình bên dưới:

Bây giờ để tạo khóa băm, chúng tôi có các yêu cầu sau trong hệ thống Windows của mình.

  • Công cụ quản lý khóa và chứng chỉ (keytool) từ Bộ công cụ phát triển Java.
  • openssl-for-windows Thư viện OpenSSL dành cho Windows mà chúng tôi có thể tải xuống từ Google Code Archive. Đảm bảo tải xuống thư viện này và giải nén nó trong ổ C:\.

Bây giờ để tạo hàm băm khóa phát triển, chúng ta cần chạy lệnh sau trong dấu nhắc lệnh trong thư mục Java SDK (C:\Program Files\Java\jdk\bin):

keytool -exportcert -alias androiddebugkey -keystore "C:\\Users\\USERNAME\\.android\\debug.keystore" | "PATH_TO_OPENSSL_LIBRARY\\bin\\openssl" sha1 -binary | "PATH_TO_OPENSSL_LIBRARY\\bin\\openssl" base64

Trong lệnh trên, chúng ta cần thay đổi vị trí dựa trên các tệp đã cài đặt trong hệ thống của mình.

Sau khi thực hiện lệnh thành công, chúng ta sẽ nhận được chuỗi 28 ký tự là khóa băm. Chúng ta cần sao chép khóa băm đó và dán nó vào vị trí được hiển thị trong ảnh chụp màn hình bên dưới:

Sau đó, chúng ta cần nhấp vào 'Lưu' và 'Tiếp tục< a i=4>' nút.

Điều này kích hoạt thành công dịch vụ đăng nhập Facebook trong ứng dụng Facebook của chúng tôi.

Bây giờ chúng ta cần kết nối ứng dụng Facebook với ứng dụng Flutter. Do đó, chúng ta cần quay trở lại dự án rung của mình.

Cài đặt Plugin Flutter

Để kết nối ứng dụng Facebook của chúng tôi với các dịch vụ của nó với dự án Flutter, chúng tôi sẽ sử dụng plugin có tên flutter_facebook_auth. Gói này cho phép chúng tôi thêm thông tin đăng nhập Facebook vào ứng dụng Flutter của mình, nhận thông tin người dùng, ảnh hồ sơ, v.v. Để biết thông tin chi tiết về plugin cùng với các bước định cấu hình, chúng ta có thể xem tài liệu chính thức.

Bây giờ, để cài đặt gói, chúng ta cần thêm plugin vào tệp pubspec.yaml như trong đoạn mã bên dưới:

dependencies:
  flutter:
    sdk: flutter
  flutter_facebook_auth: ^3.3.3+1

Bây giờ, chúng ta cần thực hiện một số cấu hình trong tệp gốc của Android để plugin này hoạt động bình thường trong dự án của chúng ta.

Trước tiên, chúng ta cần chỉnh sửa Tài nguyên và Bản kê khai và thêm cấu hình sau vào dự án Android của chúng ta:

  • Chúng ta cần mở tệp ./android/app/src/main/res/values/strings.xml hoặc tạo một tệp nếu nó không tồn tại.
  • Sau đó, chúng ta cần thêm đoạn mã sau (thay thế {your-app-id} bằng Id ứng dụng Facebook của bạn) vào tệp strings.xml:
<string name="facebook_app_id">{your-app-id}</string>
<string name="fb_login_protocol_scheme">fb{your-app-id}</string>

Mã ví dụ của tệp strings.xml được hiển thị trong đoạn mã bên dưới:

<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">Flutter Facebook Auth Example</string>
<string name="facebook_app_id">000000000000000</string>
<string name="fb_login_protocol_scheme">fb0000000000000</string>
</resources>

Ở đây, chúng ta cần chỉnh sửa Tên ứng dụng và ID ứng dụng dựa trên ứng dụng Android trong bảng điều khiển dành cho nhà phát triển của Facebook.

Bây giờ, chúng ta cần truy cập tệp ./android/app/src/main/AndroidManifest.xml và thêm < sau đây Phần tử /span>:uses-permission sau phần tử application

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

Sau đó, chúng ta cần thêm phần tử meta-data sau, một activity cho Facebook, và mộtctivity và < /span> của chúng tôi trong tệp AndroidManifest.xml:intent-filter dành cho Tab tùy chỉnh của Chrome bên trong phần tử 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>

Sau khi cấu hình xong, chúng ta cần đảm bảo cài đặt lại ứng dụng trong trình mô phỏng. Để làm được điều đó, chúng ta có thể xóa ứng dụng khỏi trình mô phỏng và chạy lại ứng dụng.

Triển khai đăng nhập Facebook trong ứng dụng Flutter

Bây giờ, chúng ta sẽ triển khai các chức năng đăng nhập Facebook trong ứng dụng Flutter của mình. Để làm được điều đó, chúng ta sẽ sử dụng phiên bản FacebookAuth từ gói Flutter_facebook_auth

Bây giờ, chúng ta sẽ tạo một hàm có tên _performLogin bên trong lớp MyHomePageState của main.dart< /span> như được hiển thị trong đoạn mã bên dưới:

_performLogin() async{
FacebookAuth.instance.login(
permissions: ["public_profile", "email"]).then((value) {
FacebookAuth.instance.getUserData().then((result) {
setState(() {
_isLoggedIn = true;
_user = result;
});
});
});

Trong hàm, chúng tôi đã sử dụng phương thức login do cá thể FacebookAuth cung cấp. Chúng tôi đã yêu cầu permissions cho hình ảnh public_profile và email. Sau đó, chúng tôi đã sử dụng phương thức getUserData() để lấy dữ liệu người dùng và đặt dữ liệu người dùng thành đối tượng ánh xạ _user và đặt trạng thái _isLoggedIn thành true bằng cách sử dụng phương thức setState.

Bây giờ, chúng ta cần gọi hàm _performLogin() tới sự kiện onPressed của tiện ích ElevatedButton như trong đoạn mã bên dưới:

Center(
child: ElevatedButton(
child: Text("Login with Facebook"),
onPressed: () async {
_performLogin();
},
),
),

Sau khi đăng nhập, chúng tôi cũng sẽ nhận được thông tin người dùng trong đối tượng bản đồ _user. Chúng tôi cũng có thể hiển thị thông tin này trên màn hình sau khi đăng nhập. Để làm được điều đó, chúng ta có thể sử dụng mã từ đoạn mã sau:

body: Container(
child: _isLoggedIn
? Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Image.network(_user["picture"]["data"]["url"]),
Text(_user["name"]),
Text(_user["email"]),
TextButton(
onPressed: () {
_performLogout();
},
child: Text("Logout")
)
],
),
)
:

Thực hiện chức năng đăng xuất

Bây giờ, chúng ta sẽ triển khai chức năng đăng xuất. Để làm được điều đó, chúng ta cần tạo một hàm có tên _performLogout và sử dụng mã từ đoạn mã sau:

_performLogout() async{
FacebookAuth.instance.logOut().then((value) {
setState(() {
_isLoggedIn = false;
_user = null;
});
});
}

Ở đây, chúng tôi đã sử dụng phương thức logOut do phiên bản FacebookAuth cung cấp và sau khi thành công, chúng tôi đã đặt _isLoggedIn thành sai và _user phản đối giá trị rỗng.

Cuối cùng, chúng ta cần gọi hàm trong sự kiện onPressed của tiện ích đăng xuất TextButton như trong đoạn mã bên dưới:

TextButton(
onPressed: () {
_performLogout();
},
child: Text("Logout")
)

Do đó, bản demo cuối cùng về việc triển khai đăng nhập Facebook của chúng tôi được trình bày bên dưới:

Do đó, chúng tôi đã tích hợp thành công tính năng đăng nhập Facebook trong ứng dụng Flutter dành cho nền tảng Android.

Dòng dưới cùng

Mục tiêu chính của hướng dẫn này là thể hiện sự tích hợp của dịch vụ đăng nhập Facebook trong ứng dụng Flutter. Hướng dẫn trình bày các hướng dẫn chi tiết từng bước để tạo ứng dụng Facebook, kích hoạt dịch vụ đăng nhập Facebook và kết nối nó với môi trường rung. Việc kết nối giữa ứng dụng Facebook cùng với dịch vụ đăng nhập Facebook với môi trường rung được thực hiện nhờ sự sẵn có của gói flutter_facebook_auth.

#flutter #dart #facebook 

Flutter đăng nhập Facebook: Cách thêm xác thực Facebook
1.15 GEEK