FlutterアプリにGoogle認証を組み込む

はじめに

Flutterを使ったモバイルアプリにGoogleでログインさせて使わせるという機能を作っていきたいと思います。色々なユーザー認証がありますが、Googleの認証を組み込むメリットは、そのGoogleユーザーの権限でGoogleのサービスが簡単に呼び出せるという点です。例えば、認証したGoogleのユーザーのGoogle PhotosにAPIでアクセスして、Google Photosを活用したモバイルアプリを作るといったこともできます。また、Androidユーザーであれば必ずGoogle IDを使っているのでユーザーIDを別途作ったりといったことが必要ありません。Androidを持っていないユーザーでもgmailを使うためにGoogle IDを持っている人は多くいると思います。ユーザーにIDを作成させるという手間をかけさせたくないが、認証はしたいという場合には最も敷居の低い構成ではないかと思います。

前提

Googleの認証をFlutterに組み込む場合、google_sign_inプラグインを利用するのが簡単です。これを利用して進めます。

Firebaseの設定とFlutterプロジェクトへの組み込み

Googleの認証連携をするためには、Firebaseを利用します。

まず、以下の通り、Firebaseでプロジェクトを作成します。

任意のプロジェクト名を入力します。

プロジェクトをGoogleアナリティクスで分析するか決めます。推奨されている通り分析するで設定します。

どのアカウントのアナリティクスに紐づけるか聞かれます。基本はFirebaseにアクセスしているユーザーアカウントと同じものになるはずです。

プロジェクト作成完了画面が表示されるので続行します。

プロジェクトが作製されたので、Authenticationを選択しGoogleでのログインができるように設定を開始します。

Sign-in methodを表示するとGoogleが無効になっているので有効に設定する作業を実施します。

有効にする設定を行うと、プロジェクトの公開名とプロジェクトのサポートメールの設定が要求されます。公開名は後ほどAndroidアプリの画面に表示されるので適切な名前を入力してください。サポートメールはFirebaseにアクセスしているユーザーアカウントと同じものになるはずです。

ここまで設定が終わったら次にプロジェクトの設定へ移動します。

Androidアプリ用の設定を追加していきます。

Androidアプリのパッケージ名とデバッグ用の署名証明書 SHA-1にハッシュを設定します。

パッケージ名には、Flutterアプリのプロジェクトの、<プロジェクトフォルダ>\Android\app\src\main配下にAndroidManifest.xmlが入っていますので、そのファイルのpackageに設定されているものを入力します。
デバッグ用の署名証明書 SHA-1には、[ここ](https://developers.google.com/android/guides/client-auth?authuser=1)の情報を参考にして作成するモバイルアプリのSHA-1フィンガープリントを取得して設定します。Flutterのプロジェクトの場合は、<プロジェクトフォルダ>\Android`配下にgradrewが入っていますので、それを以下のように実行するのが簡単でしょう。

./gradlew signingReport

処理結果が色々表示されますが、SHA1:で表示されるハッシュ値を利用します。

SHA1: A7:46:・・・

次に、Firebaseの設定をFlutterプロジェクトに組み込みます。まず、google-services.jsonファイルをダウンロードし、<プロジェクトフォルダ>\android\app\ふるだの下に保存します。

次いで、画面の指示に従いプロジェクトレベルのbuild.gradleファイルに設定を追加していきます。

Flutterプロジェクトの場合<プロジェクトフォルダ>\android\build.gradleファイルに設定を行います。以下、実際に設定を追加したファイルの抜粋です。

buildscript {
    ext.kotlin_version = '1.3.50'
    repositories {
        google()
        jcenter()
    }

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

allprojects {
    repositories {
        google()
        jcenter()
    }
}
…

次に、アプリレベルのbuild.gradleに設定を追加します。

なお、今回は、Firebase Android BoMの設定はしていません。Flutterプロジェクトの場合<プロジェクトフォルダ>\android\app\build.gradleファイルに設定を行います。以下、実際に設定を追加したファイルの抜粋です。

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'

以上で設定は完了です。

Flutterアプリへの認証の実装

Flutterプロジェクトの<プロジェクトフォルダ>\pubspec.yamlに以下を記載します。

dependencies:
  google_sign_in: ^4.5.9

あとは、サンプルを見ながら実装していってください。
ポイントをいくつか記載します。

まず、GoogleSignInのインスタンスを作ります。以下は、OpenID Connectに対応し、Google PhotosのAPIが叩けるようなと認証情報を要求するためのインスタンスになります。

  var _googleSignIn = GoogleSignIn(
    scopes: <String>[
      'email',
      'openid',
      'profile',
      'https://www.googleapis.com/auth/photoslibrary',
    ],
  ); 

初期化処理では、認証しているユーザーが変化したら処理を行うようなハンドラを書いておきます。以下は、認証情報が変化した際に認証情報から、OpenId ConnectのIdTokenを取得する方法と、Google PhotosのAPIを呼び出すときに必要なAuthorizationヘッダの情報を取得している例である。前者をつかって他サービスと連携、後者を使ってGoogleのサービスを呼び出しと色々なことができるようになります。

_googleSignIn.onCurrentUserChanged
        .listen((GoogleSignInAccount account) async {
      debugPrint(account.toString());
      String _idToken = await account.authentication.then((auth) {
        return auth.idToken;
      });
      List idTokenSplited = _idToken.split('.');
      debugPrint(idTokenSplited[0]);
      debugPrint(idTokenSplited[1]);
      debugPrint(idTokenSplited[2]);

      debugPrint((await account.authHeaders).toString());
});

他には以下のようなメソッドを使い画面を構築していきます。

_googleSignIn.signInSilently() : 一度ログインしたら、次回以降の認証情報の入力をスキップするために最初に呼び出してみるべきAPIです。このAPIの呼び出しで認証できなかったらログイン画面を表示するようにします。上記呼び出しに失敗した場合に以下のようにログインボタンを表示するようにアプリを構成するのが良いです。

ログインボタンを押下したら、_googleSignIn.signIn()を呼ぶように実装します。APIを呼ぶと以下のような画面が表示されます。Android端末にログインしているユーザー情報が自動で表示されます。

ユーザーを選択すると以下のような画面が表示されます。今回GoogleSignInのインスタンスを作る際にGoogle Photosを呼び出せるように要求しているのでその権限を付与するかの確認画面です。

Allowを選択するとさらに次の画面にすすみます。Firebaseで設定したプロジェクトに対してGoogle Photosにアクセスをしてもよいかの確認画面がでます。Allowを押下するとログイン完了です。

まとめ

以上、ざっくりとですがFlutterアプリでGoogleでログインする機能を組み込んでみました。なお、今回はAndroidアプリの設定方法で説明していますので、iOSでもできるようにする場合には、公式サイトを確認し設定してみてください。私はMacを持っていないのでiPhoneアプリが開発できないのです・・・。

最後に、本記事も含めて連載的に記事を書いていこうと思います。目次はこちらです。