Flutter Firebase Google Signinを実装する

24018 ワード
Firebase Flutter tech テキストリンク

はじめに

現在の開発アプリでSNSサインインを行う。
FirebaseではSNSサインインを手軽に行うことができる。

今回はGoogleSigninについて方法をまとめる。

参考:公式マニュアル

https://firebase.flutter.dev/docs/auth/social/

様々な記事がありますが、FlutterFireが最も信頼できます。
私はFlutterFireの記事のみで実現できました。

準備

FirebaseでGoogle Signinを有効にする

Android SHA1キーの設定

https://stackoverflow.com/questions/51845559/generate-sha-1-for-flutter-app

ターミナルで以下コマンド実行で作成されます。

//Mac
keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android

//Windows
keytool -list -v -keystore "\.android\debug.keystore" -alias androiddebugkey -storepass android -keypass android

FirebaseにSHA1の値を設定し、google_services.jsonを所定の位置に配置します。

iOS　info.plist変更

Info.plistにGoogleService-Info.plist内にあるREVERSED_CLIENT_IDキーを貼り付け

info.plistに以下を追加してください。

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleTypeRole</key>
        <string>Editor</string>
        <key>CFBundleURLSchemes</key>
        <array>
	//以下,GoogleService-Info.plist内にあるREVERSED_CLIENT_IDキーを貼り付け
            <string>com.googleusercontent.apps.・・・・・・・</string>
        </array>
    </dict>
</array>

Flutter Plugin

https://pub.dev/packages/google_sign_in 

#pubspec.yaml
dependencies:
  google_sign_in: "最新バージョン"

実装

//View.dart
//modelはViewModelのインスタンス
RaisedButton(
	child: const Text('Google'),
	onPressed: () async {
		await model.signInWithGoogle();
		if (model.login_flg == true) {
			print('ログイン成功');
		} else {
			print('ログイン失敗');
		}
	},
),		

//ViewModel.dart

import 'package:google_sign_in/google_sign_in.dart';

・
・
・

#class内のメソッド
  Future<void> signInWithGoogle() async {
    // Trigger the authentication flow
    final GoogleSignInAccount googleUser = await GoogleSignIn().signIn();

    // Obtain the auth details from the request
    final GoogleSignInAuthentication googleAuth =
        await googleUser.authentication;

    // Create a new credential
    final OAuthCredential credential = GoogleAuthProvider.credential(
      accessToken: googleAuth.accessToken,
      idToken: googleAuth.idToken,
    );
    await FirebaseAuth.instance.signInWithCredential(credential);

    print(FirebaseAuth.instance.currentUser.email); #Google登録したemail
    print(FirebaseAuth.instance.currentUser.displayName);#Google登録した表示名
    print(FirebaseAuth.instance.currentUser.photoURL);#Google登録した画像URL

    // Once signed in, return the UserCredential
    this.login_flg = true;
    notifyListeners();
  }

終わりに

これでGoogleSigninが完了です。
一度ログインすると、ログイン情報が残っているため次回以降は以下でログインチェックができます。

FirebaseAuth.instance.currentUser;

Version

Flutter doctor -v

[✓] Flutter (Channel beta, 1.23.0-18.1.pre, on macOS 11.0.1 20B29 x86_64, locale ja)
    • Flutter version 1.23.0-18.1.pre at /Users/takumiendoh/Documents/Development/flutter
    • Framework revision 198df796aa (5 weeks ago), 2020-10-15 12:04:33 -0700
    • Engine revision 1d12d82d9c
    • Dart version 2.11.0 (build 2.11.0-213.1.beta)

 
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    • Android SDK at /Users/takumiendoh/Library/Android/sdk
    • Platform android-30, build-tools 30.0.2
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 12.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.2, Build version 12B45b
    • CocoaPods version 1.10.0.beta.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)

[✓] Connected device (3 available)
    • iPhone 12 Pro Max (mobile) • 1EFA1ECB-1B80-45EB-9410-56897EA0DEC4 • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-14-2 (simulator)
    • Web Server (web)           • web-server                           • web-javascript • Flutter Tools
    • Chrome (web)               • chrome                               • web-javascript • Google Chrome
      86.0.4240.198

• No issues found!
インターフェースの実装(implement)とSAM変換(Kotlin)
Windows 10の場合は