Thêm xác thực Firebase và Đăng nhập bằng Google bằng Flutter
Xác thực Firebase là gì?
Xác thực Firebase là phân đoạn chủ yếu giúp hỗ trợ các thông tin xác thực người dùng khác nhau. Nó chủ yếu là phần phụ trợ di động như một dịch vụ cung cấp cho bạn các tính năng mạnh mẽ để phát triển các ứng dụng di động. Nó giúp ích nhiều hơn trong việc cung cấp SDK và thư viện giao diện người dùng tạo sẵn. Điều này giúp xác thực người dùng của bạn để sử dụng ứng dụng. Ngoài ra còn có các tính năng xác thực khác nhau được hỗ trợ. Điều này bao gồm mật khẩu, số điện thoại, nhà cung cấp danh tính ảo thông qua Google, Facebook, Twitter, v.v.
Flutter 1.7 là gì?
Sau khi ra mắt Flutter 1.7, một trong những điều chính cần được khắc phục là sự không tương thích của AndroidX. Kể từ đó, điều này đã được thực hiện với những thay đổi được thực hiện trong nửa sau. Thông qua Flutter, bạn sẽ có thể phát triển một dự án mới. Điều này có thể được thực hiện với sự trợ giúp của cờ AndroidX để đảm bảo rằng các dự án được xây dựng nhắm mục tiêu đến thư viện hỗ trợ mới.
Thư viện cho phép các nhà phát triển cập nhật ứng dụng Android mà không phải lo lắng về khả năng tương thích ngược. Hơn nữa, nó còn hỗ trợ xây dựng các ứng dụng dành cho thiết bị di động, đáp ứng gần như 64 bit ứng dụng Android. Điều này sẽ có thể thực hiện được trong một lần gửi. Các tính năng nâng cao khác được bao gồm trong Flutter 1.7 là RangeSlide Widget, OpenType Rich Typography Features, Gamer Controller Support, v.v.
Bạn cũng có thể thích: Xác thực Firebase Với SDK Firebase 3.0 và Tích hợp Auth0 .
Đăng nhập Google
Bạn cần làm theo các bước kỹ lưỡng để sử dụng Đăng nhập bằng Google trong ứng dụng của mình. Trong trường hợp bạn cố gắng trực tiếp sử dụng Đăng nhập bằng Google, ứng dụng của bạn chắc chắn sẽ gặp sự cố.
Để bắt đầu với:
Trước khi kết hợp cấu trúc mã hóa, cần phải triển khai các plugin và nội dung. Chủ yếu, hai plugin là cần thiết cho dự án. Điều này bao gồm
firebase_authvàgoogle_sign_in.Về nội dung, chỉ cần một hình ảnh sẽ giúp thiết kế Đăng nhập bằng Google trong ứng dụng.
Xây dựng dự án
Đầu tiên, bạn cần sử dụng thiết bị đầu cuối được đề cập trong trình chỉnh sửa mã.
Sau đó điều hướng đến thư mục nơi dự án được tạo.
Sử dụng lệnh này để tự động triển khai khả năng tương thích AndroidX với dự án.
flutter create --android sign_in_flutter
Đảm bảo rằng bạn cần chuyển sang phiên bản cập nhật của Futter để sử dụng cờ Androidx.
Bây giờ, bạn sẽ phải kiểm tra chi nhánh hiện tại của mình. Điều này có thể thực hiện được với việc sử dụng lệnh kênh rung.
Nếu bạn muốn điều này được ổn định, sử dụng:
flutter channel stable. Sau đó, bạn có thể nâng cấp tương tự bằng lệnh nâng cấp rung.
Nhập các gói
Lúc đầu, bạn cần thêm các gói trong tệp pubspec.yaml . Bạn cần lưu vào tệp này để chạy các gói rung.
Đảm bảo rằng bạn tạo một thư mục thông qua các tài sản trong tệp dự án của mình. Hình ảnh bạn đã chọn cần được tải lên. Để làm được điều đó, bạn cần sử dụng lệnh (google_logo.png). Bây giờ, bạn sẽ phải thêm thư mục tài sản ngay trong tệp pubspec.yaml .
Khi chúng ta hoàn thành những điều cơ bản, bạn sẽ phải tuân theo cấu trúc mã hóa. Hãy chắc chắn rằng bạn không bỏ lỡ một bước ở đây.
Bây giờ cho một số mã
Xem chính. tập tin phi tiêu. Tại đây, bạn sẽ phải nhập gói firebase_auth. Sử dụng lệnh:
import 'package:firebase_auth/firebase_auth.dart';
Sau đó, hãy chạy ứng dụng trên thiết bị của bạn cho quá trình xác minh. Điều này sẽ giúp bạn hình dung liệu hỗ trợ AndroidX có đang hoạt động hay không. Nếu bạn gặp BUILD FAILED lỗi, có thể do hỗ trợ không đúng cách. Nói một cách chính xác, các thư viện hỗ trợ AndroidX không được nhập tốt.
Xây dựng giao diện người dùng
Sau quá trình xác minh, hãy xóa mọi thứ trong tệp main.dart. Dán vào mã bảng soạn sẵn bên dưới.
import 'package:flutter/material.dart';
import 'login_page.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Login',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: LoginPage(),
);
}
}
Bây giờ, bạn sẽ có thể tạo giao diện người dùng cho Trang đăng nhập. Một lần nữa, hãy tiếp tục tạo một tệp có tên login_page.dart bên trong thư mục lib. Thiết kế đăng nhập của tệp sẽ có giao diện như hình ảnh được nêu bên dưới.
Nếu bạn theo dõi hình ảnh, bạn sẽ có thể hình dung 2 yếu tố cốt lõi - Flutter Logo và Đăng nhập bằng Google Button.
Trang LoginPage này phải là một Widget trạng thái. Sẽ có một số thay đổi được triển khai tại giao diện người dùng sau này.
Làm theo mã bên dưới cho giao diện người dùng LoginPage:
import 'package:flutter/material.dart';
class LoginPage extends StatefulWidget {
@override
_LoginPageState createState() => _LoginPageState();
}
class _LoginPageState extends State<loginpage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
color: Colors.white,
child: Center(
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: <widget>[
FlutterLogo(size: 150),
SizedBox(height: 50),
_signInButton(),
],
),
),
),
);
}
Widget _signInButton() {}
}</widget></loginpage>Xác thực Firebase
Tạo một tệp phi tiêu mới, sign_in.dart . Tại đây, bạn sẽ thiết lập xác thực firebase cùng với Đăng nhập bằng Google.
Có hai gói quan trọng: firebase_auth và google_sign_in.
Cấu trúc của mã hóa cho cả hai được đề cập tương ứng.
import 'package:firebase_auth/firebase_auth.dart';
import 'package:google_sign_in/google_sign_in.dart';Bây giờ bạn sẽ tạo một phiên bản của FirebaseAuth và GoogleSignIn. Cấu trúc mã hóa cho cùng một như sau:
final FirebaseAuth _auth = FirebaseAuth.instance;
final GoogleSignIn googleSignIn = GoogleSignIn();Sau đó, có hai phương thức cần được tạo, là signInWithGoogle và signOutWithGoogle.
Future<string> signInWithGoogle() async {}
void signOutGoogle() async{}</string>Với signInWithGoogle, bạn cần sử dụng dữ liệu đăng nhập Google để xác thực FirebaseUser. Điều này sẽ được trả lại cho cùng một người dùng.
Mặt khác, theo signOutGoogle phương pháp này, bạn sẽ phải đăng xuất khỏi tài khoản Google hiện tại.
Các phương thức cuối cùng sẽ giống như sau:
import 'package:firebase_auth/firebase_auth.dart';
import 'package:google_sign_in/google_sign_in.dart';
final FirebaseAuth _auth = FirebaseAuth.instance;
final GoogleSignIn googleSignIn = GoogleSignIn();
Future signInWithGoogle() async {
final GoogleSignInAccount googleSignInAccount = await googleSignIn.signIn();
final GoogleSignInAuthentication googleSignInAuthentication =
await googleSignInAccount.authentication;
final AuthCredential credential = GoogleAuthProvider.getCredential(
accessToken: googleSignInAuthentication.accessToken,
idToken: googleSignInAuthentication.idToken,
);
final AuthResult authResult = await _auth.signInWithCredential(credential);
final FirebaseUser user = authResult.user;
assert(!user.isAnonymous);
assert(await user.getIdToken() != null);
final FirebaseUser currentUser = await _auth.currentUser();
assert(user.uid == currentUser.uid);
return 'signInWithGoogle succeeded: $user';
}
void signOutGoogle() async{
await googleSignIn.signOut();
print("User Sign Out");
} Đối với quá trình tiếp theo, bạn sẽ phải cập nhật onPressed phương thức mà bạn sẽ có thể thấy _signInButton trong LoginPage lớp bên trong . Đây là cách bạn sẽ triển khai tương tự vào định dạng mã hóa -
onPressed: () { signInWithGoogle().whenComplete(() { Navigator.of(context).push( MaterialPageRoute( builder: (context) { return FirstScreen(); }, ), ); }); },
Nếu Đăng nhập bằng Google thành công, bạn sẽ đến trực tiếp Màn hình đầu tiên.
Bạn sẽ tiến hành thử nghiệm giao diện người dùng cho FirstScreen như thế nào?
Thực hiện theo mô hình mã hóa -
import 'package:flutter/material.dart';
class FirstScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(color: Colors.blue[100]),
);
}
}Quá trình tiếp theo là thiết lập dự án firebase. Để tạo một dự án Firebase mới, bạn sẽ phải xem trên dự án mới.
Đầu tiên, nhấp vào Thêm dự án . Sau đó, bạn sẽ cần đặt tên cho dự án của mình, tên mà bạn sẽ cần chứng nhận. Bạn sẽ phải làm tương tự cho các hộp kiểm được đề cập bên dưới. Sau khi bạn đã xác nhận tên, hãy nhấp vào tạo dự án . Bây giờ, hãy đợi quá trình hoàn tất để bạn có thể tiếp tục.
Sau khi quá trình hoàn tất, hãy chuyển đến phần Tổng quan về dự án . Từ đây, bạn có thể thêm Firebase trực tiếp vào Dự án Flutter của mình.
Có các quy trình khác nhau để thiết lập Android và thiết lập iOS. Bạn cần phải kỹ lưỡng với quy trình để triển khai cấu trúc mã hóa phù hợp. Tôi hy vọng bài viết trên sẽ giúp bạn thiết lập đúng!
Đọc thêm
- Đăng nhập với Facebook và Google bằng Angular 8 .
- Xác thực và Ủy quyền của Google trong Ứng dụng Blazor phía máy chủ .
- Cách tích hợp ứng dụng React bằng Firebase .
Có thể bạn quan tâm
