Google Firebase 电子邮件/密码和 Google 登录

介绍

Google Firebase 是当今的趋势。它有大约 10 种登录方法，包括电子邮件、谷歌、Facebook、电话、Twitter、雅虎等。我们在本文中仅涵盖电子邮件和谷歌登录选项。现在，我们一步一步来。我也在底部提供了 git 存储库链接。

步骤

1. 第一步也是最基本的步骤是在 Flutter 中创建一个新应用程序。如果你是 Flutter 的初学者，那么你可以查看我的博客Create a first app in Flutter。我创建了一个名为“flutter_email_signin”的应用程序。
2. 现在，您需要在 Google Firebase 中设置一个项目。请按照以下步骤操作。请非常仔细地按照步骤操作。

• 去 这里 并添加一个新项目。我将分享它的外观截图，以便您获得更好的想法。
• 点击“添加项目”在 Google Firebase 中添加一个新项目。然后，您将找到以下表格。
• 指定项目名称并接受条款和条件，然后单击“创建项目”。创建新项目并将您重定向到项目概述页面需要一些时间。
• 现在，您需要在此项目中添加一个 Android 应用程序 [请查看下面的屏幕截图]。您可以通过单击 Android 图标添加新的 Android 项目。如果您想为其创建 iOS 应用程序，您还可以添加一个 iOS 项目。
• 在项目概览中，添加 Android 应用程序。为此，请单击 Android 图标。它将打开一个新表单。
• 您将在 Android => App => 项目主文件夹中的 AndroidManifest.xml 文件中找到 Android 包名称。
• 应用昵称是可选的
• 对于 SHA-1 generation ，请转到此处。
• 在第 2 步中下载 google-service.json 并放入您项目的 Android => App 文件夹中
• 在第 3 步中，您可以看到需要配置一些依赖项

  buildscript {  
      dependencies {  
          // Add this line  
          classpath 'com.google.gms:google-services:4.2.0'  
      }  
      App - level build.gradle( < project > /<app-module>/build.gradle): means build.gradle file in Android = > App folder  
      // Add to the bottom of the file  
      apply plugin: 'com.google.gms.google-services’

   

• 注意
  不需要在依赖项中添加实现 ‘com.google.firebase:firebase-core:16.0.9’
• 在第 4 步中，它会尝试验证您的应用。为此，您需要运行一次您的应用程序，或者您可以跳过此步骤。
• 您的 Android 应用程序已创建。

3. 现在，您需要在 Firebase 中启用电子邮件/密码和/或 Google 登录方法。为此，您需要转到“身份验证”选项卡，然后转到“登录”方法选项卡。从那里，启用电子邮件/密码和 Google 登录方法。请检查屏幕截图。
   • 您已经完成了 firebase 设置。恭喜…… 🙂
   4. 返回项目并打开项目根目录中的 pubspec.yaml 文件。Pubspec.yaml 用于定义项目的所有依赖项和资产。
   • • 添加以下依赖项并保存文件

     firebase_auth：

     google_sign_in:

     • 请检查下面的屏幕截图，您将更好地了解在哪里添加依赖项。
     
     • 在终端中使用 get 运行 Flutter 包，或者如果您使用的是 Visual Studio Code，那么在保存文件后，它将自动运行 Flutter package get 命令。
     • 现在，我们也完成了项目端的所有依赖项设置…… 🙂
     5. 现在，我们需要以编程方式处理注册并登录 Google Firebase。为此，我们创建了 2 个页面，login_page.dart 和 registration_page.dart，并在这两个页面中注册和登录。我在文章底部附上了 git repo 的链接，你可以从那里参考。这里我只定义登录和注册方法以供理解。

        import ‘package:firebase_auth/firebase_auth.dart’;

     • 在 Google Firebase 中使用电子邮件/密码注册

       Future < FirebaseUser > signUp(email, password) async {  
           try {  
               FirebaseUser user = await auth.createUserWithEmailAndPassword(email: email, password: password);  
               assert(user != null);  
               assert(await user.getIdToken() != null);  
               return user;  
           } catch (e) {  
               handleError(e);  
               return null;  
           }  
       }  

     在 Google Firebase 中使用电子邮件/密码登录

     Future < FirebaseUser > signIn(String email, String password) async {  
         Try {  
             FirebaseUser user = await auth.signInWithEmailAndPassword(email: email, password: password);  
             assert(user != null);  
             assert(await user.getIdToken() != null);  
             final FirebaseUser currentUser = await auth.currentUser();  
             assert(user.uid == currentUser.uid);  
             return user;  
         } catch (e) {  
             handleError(e);  
             return null;  
         }  
     }  

     使用 Google 登录

     Future < FirebaseUser > googleSignin(BuildContext context) async {  
         FirebaseUser currentUser;  
         try {  
             final GoogleSignInAccount googleUser = await googleSignIn.signIn();  
             final GoogleSignInAuthentication googleAuth = await googleUser.authentication;  
             final AuthCredential credential = GoogleAuthProvider.getCredential(accessToken: googleAuth.accessToken, idToken: googleAuth.idToken, );  
             final FirebaseUser user = await auth.signInWithCredential(credential);  
             assert(user.email != null);  
             assert(user.displayName != null);  
             assert(!user.isAnonymous);  
             assert(await user.getIdToken() != null);  
             currentUser = await auth.currentUser();  
             assert(user.uid == currentUser.uid);  
             print(currentUser);  
             print("User Name : ${currentUser.displayName}");  
         } catch (e) {  
             handleError(e);  
             return currentUser;  
         }  
     }  

     从 Google 退出

     Future < bool > googleSignout() async {  
         await auth.signOut();  
         await googleSignIn.signOut();  
         return true;  
        }  
     } 

     6. 注册成功后，您可以查看 Google Firebase 商店和服务器中的用户详细信息。请检查屏幕截图。

     

     请注意，请查看随附的完整源代码。您需要在 ANDROID => 应用程序文件夹中添加您的 google-services.json 文件。