[Day16] Flutter - Firebase Authentication & Google Sign-In ( IOS & Android )

前言

Hi, 我是鱼板伯爵今天要教大家 Firebase Authentication 和开通 Google 登入，教学内容只会撷取片段程序码，建议大家搭配完整程序码来练习。

完整程序码

创建一个 Firebase 专案

取个专案名字下一步到底就可以了，若没有google analytics就点开选单建造一个，然後一样下一步到底。

开启 Google 登入

完成专案创就後点击左边Authentication，然後把google的登入给启用。

储存後你可以看到google的状态变成已启用(绿灯)

创建APP

回到专案总览，以下会介绍IOS和Andriod的创建方式。

Android 设定

第一步

第二步

下载google-services.json放入android/app。

第三步

在android/day16_android.iml的dependencies层中加入classpath 'com.google.gms:google-services:4.3.10'

dependencies {
    classpath 'com.android.tools.build:gradle:4.1.0'
    classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
    classpath 'com.google.gms:google-services:4.3.10'
}

在android/app/build.gradle加入apply plugin: 'com.google.gms.google-services'随便加在最外层就可以了。

apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'
apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"
apply plugin: 'com.google.gms.google-services'

修改applicationId

第五部

打开终端机输入keytool -list -v -alias androiddebugkey -keystore ~/.android/debug.keystore，密码就打个android然後你会得到SHA1和SHA256。

回到firebase点开控制台溜到最下新增指纹，两个都给他新增上去。

IOS 设定

第一步

输入IOS ID 和 App 名字就可以。

第二步

开启专案把GoogleService-Info.plist放入ios/Runner，然後345步骤都不重要下一步到底。

然後打开XCode右键资料夹加入档案，选择GoogleService-Info.plist。

第三步

打开ios/Runner/Info.plist把GoogleService-Info.plist里面的REVERSED_CLIENT_ID复制到<string>REVERSED_CLIENT_ID</string>里面。

<!-- Google Sign-In section -->
<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleTypeRole</key>
        <string>Editor</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <!-- TODO Replace this value: -->
            <!-- Copied from GoogleService-Info.plist key REVERSED_CLIENT_ID -->
            <string>REVERSED_CLIENT_ID</string>
        </array>
    </dict>
</array>
<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsLocalNetworking</key>
    <true/>
</dict>
<!-- End of the Google Sign-In section -->

安装

如果ios有遇到pod的问题请到ios/Podfile把请版本打开，并更新一下pod repo update。

dependencies:
  flutter:
    sdk: flutter
  google_sign_in: ^5.0.5
  firebase_auth: ^3.0.1
  firebase_core: ^1.4.0

实作登入

在main里面做初始化。

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

写一个简单的登入和登出的Class，来测试有没有设定成功。

import 'package:google_sign_in/google_sign_in.dart';
import 'package:firebase_auth/firebase_auth.dart';

abstract class AuthRepositoryImpl {
  Future<bool> signInWithGoogle();
  Future<void> signOut();
}

class AuthRepository implements AuthRepositoryImpl {
  final FirebaseAuth _firebaseAuth;
  final GoogleSignIn _googleSignIn;

  AuthRepository()
      : _firebaseAuth = FirebaseAuth.instance,
        _googleSignIn = GoogleSignIn();

  @override
  Future<bool> signInWithGoogle() async {
    final GoogleSignInAccount? googleUser = await _googleSignIn.signIn();
    if (googleUser == null) {
      return false;
    }
    final GoogleSignInAuthentication googleAuth =
        await googleUser.authentication;
    final AuthCredential credential = GoogleAuthProvider.credential(
      accessToken: googleAuth.accessToken,
      idToken: googleAuth.idToken,
    );
    await _firebaseAuth.signInWithCredential(credential);

    return true;
  }

  @override
  Future<void> signOut() async {
    Future.wait([
      _firebaseAuth.signOut(),
      _googleSignIn.signOut(),
    ]);
  }
}

然後在页面上的按钮使用登入的函式

class LoginPage extends StatelessWidget {
  final AuthRepository _authRepository = AuthRepository();

  LoginPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("LOGIN"),
      ),
      body: Container(
        child: Center(
          child: TextButton(
            onPressed: () async {
              final ok = await _authRepository.signInWithGoogle();
              if (ok) {
                Navigator.pushReplacement(
                  context,
                  MaterialPageRoute(
                    builder: (context) => HomePage(),
                  ),
                );
              }
            },
            child: Text("SIGN IN"),
          ),
        ),
      ),
    );
  }
}