我是新的扑动，有人知道如何连接扑动与firebase注册吗?

Question

我使用flutter做了前端，但我不知道如何将其连接到firebase认证。有人能帮帮忙吗?我只是不知道如何连接我的前端与后端。这是我的代码:

// ignore_for_file: prefer_const_constructors, avoid_unnecessary_containers, prefer_const_literals_to_create_immutables, depend_on_referenced_packages, sized_box_for_whitespace
import 'package:booklub_2/Screens/Login/login_screen.dart';
import 'package:booklub_2/components/rounded_button.dart';
import 'package:booklub_2/constants.dart';
import 'package:flutter/material.dart';
class Body extends StatelessWidget {
@override
Widget build(BuildContext context) {
double w = MediaQuery.of(context).size.width;
return Scaffold(
backgroundColor: Colors.white,
body: ListView(
children: [
Container(
width: w,
margin: const EdgeInsets.only(left: 20, right: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Sign up",
style: TextStyle(
fontSize: 50.0,
fontWeight: FontWeight.bold,
),
),
],
),
),
SizedBox(height: 25.0),
Container(
margin: EdgeInsets.only(left: 20.0, right: 20.0),
width: w,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(30),
boxShadow: [
BoxShadow(
blurRadius: 10,
spreadRadius: 7,
offset: Offset(1, 1),
color: Colors.grey.withOpacity(0.2),
)
]),
child: TextField(
decoration: InputDecoration(
labelText: 'Name',
hintText: 'Enter your name',
labelStyle: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
color: Colors.grey),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
borderSide: BorderSide(
color: Colors.white,
width: 1.0,
),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
borderSide: BorderSide(
color: Colors.white,
width: 1.0,
),
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30))),
),
),
SizedBox(height: 25.0),
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(30),
boxShadow: [
BoxShadow(
blurRadius: 10,
spreadRadius: 7,
offset: Offset(1, 1),
color: Colors.grey.withOpacity(0.2),
)
]),
child: TextField(
decoration: InputDecoration(
labelText: 'Username',
hintText: 'Enter your username',
labelStyle: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
color: Colors.grey),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
borderSide: BorderSide(
color: Colors.white,
width: 1.0,
),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
borderSide: BorderSide(
color: Colors.white,
width: 1.0,
),
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
),
),
),
),
SizedBox(height: 25.0),
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(30),
boxShadow: [
BoxShadow(
blurRadius: 10,
spreadRadius: 7,
offset: Offset(1, 1),
color: Colors.grey.withOpacity(0.2),
)
]),
child: TextField(
decoration: InputDecoration(
labelText: 'Email',
hintText: 'Enter your email',
labelStyle: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
color: Colors.grey),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
borderSide: BorderSide(
color: Colors.white,
width: 1.0,
),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
borderSide: BorderSide(
color: Colors.white,
width: 1.0,
),
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30))),
),
),
SizedBox(height: 25.0),
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(30),
boxShadow: [
BoxShadow(
blurRadius: 10,
spreadRadius: 7,
offset: Offset(1, 1),
color: Colors.grey.withOpacity(0.2),
)
]),
child: TextField(
decoration: InputDecoration(
labelText: 'Phone',
hintText: 'Enter your phone number',
labelStyle: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
color: Colors.grey),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
borderSide: BorderSide(
color: Colors.white,
width: 1.0,
),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
borderSide: BorderSide(
color: Colors.white,
width: 1.0,
),
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
),
),
),
),
SizedBox(height: 25.0),
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(30),
boxShadow: [
BoxShadow(
blurRadius: 10,
spreadRadius: 7,
offset: Offset(1, 1),
color: Colors.grey.withOpacity(0.2),
)
]),
child: TextField(
decoration: InputDecoration(
labelText: 'Password',
hintText: 'Enter your password',
labelStyle: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
color: Colors.grey),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
borderSide: BorderSide(
color: Colors.white,
width: 1.0,
),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
borderSide: BorderSide(
color: Colors.white,
width: 1.0,
),
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
),
),
obscureText: true,
),
),
SizedBox(height: 25.0),
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(30),
boxShadow: [
BoxShadow(
blurRadius: 10,
spreadRadius: 7,
offset: Offset(1, 1),
color: Colors.grey.withOpacity(0.2),
)
]),
child: TextField(
decoration: InputDecoration(
labelText: 'Confirm Password',
labelStyle: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
color: Colors.grey),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
borderSide: BorderSide(
color: Colors.white,
width: 1.0,
),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
borderSide: BorderSide(
color: Colors.white,
width: 1.0,
),
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
),
),
obscureText: true,
),
),
SizedBox(height: 20.0),
Row(
children: [
Expanded(
child: Container(),
),
Text(
'Forgot password',
style: TextStyle(
color: kPrimaryColor,
fontWeight: FontWeight.bold,
fontFamily: 'Montserrat',
decoration: TextDecoration.underline,
),
),
],
),
],
),
),
SizedBox(
height: 40.0,
),
Container(
child: Roundedbutton(
text: "SIGN UP",
color: kPrimaryColor,
textColor: Colors.white,
press: () {},
),
),
SizedBox(height: 110.0),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'New to BookLub ?',
style: TextStyle(fontFamily: 'Montserrat'),
),
SizedBox(width: 5.0),
InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) {
return LoginScreen();
},
),
);
},
child: Text(
'Register',
style: TextStyle(
color: Colors.blue,
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
decoration: TextDecoration.underline,
),
),
)
],
)
],
),
);
}
}

我已经尝试了这么多的资源，但我仍然对它的后端感到困惑。

Answer 1

Flutter firebase认证链接

请按照本文档了解整个过程

一句话

1. 首先你必须正确配置firebase

2. 将firebase与项目正确集成

3. 然后按照下面的代码使用email &密码仅供参考

   Future<User?> signIn(String email, String password) async {
   EasyLoading.show(status: "loading..");
   // firebase
   final _auth = FirebaseAuth.instance;
   try {
   EasyLoading.dismiss();
   UserCredential result = await _auth.signInWithEmailAndPassword(
   email: email, password: password);
   log(result.toString());
   User? user = result.user;
   log(user.toString());
   SharedPref.write(firebaseUid, user!.uid);
   var token = await user.getIdToken();
   SharedPref.write(firebaseAuthToken, token);
   if(user.emailVerified == false){
   user.sendEmailVerification();
   showMessage('Login Successful! Please verify your account by clicking on the link in the email sent to your registered mail',isError: false);
   }else{
   showMessage('Successfully Logged in!');
   }
   //EasyLoading.showSuccess('Successfully Logged in!');
   Timer(const Duration(seconds: 4), navigationPageHome);
   return Future.value(user);
   } on FirebaseAuthException catch (e) {
   log(e.code);
   switch (e.code) {
   case 'invalid-email':
   EasyLoading.showError(e.code);
   break;
   case 'wrong-password':
   EasyLoading.showError(e.code);
   break;
   case 'user-not-found':
   EasyLoading.showError(e.code);
   break;
   case 'user-disabled':
   EasyLoading.showError(e.code);
   break;
   }
   }