こんにちは。
記録系のアプリで入力したデータは自分で自由に分析出来るように元データが欲しい、と思う人は少なくないと思います。どのような仕組みになっているのが楽かなぁと思った時に、自分のGoogleDriveにSpreadsheetでデータが保存出来たら、見やすいし加工もしやすいです。 という事で、ざっくり以下構成で解説します。今日はGoogleにログインするです。
- Googleにログインする
- GoogleDriveにSpreadsheetを作成してデータを入れる
前提
- Android Studioにてアプリを作成する前提で解説しております。
- アプリに自前でGoogleログイン機能を追加するのはとても大変なので、Firebaseの認証機能などのプラグインを使っていきます。そのため、Firebaseの設定も必要になります。
プラグインインストール
必要なプラグインは次のとおりです。
プラグイン | 説明 |
---|---|
firebase_core | FirebaseCoreAPIを使用するFlutterプラグイン (Firebase初期化の使用) |
firebase_auth | FirebaseAuthenticationAPIを使用するためのプラグイン (Firebase認証機能の使用) |
google_sign_in | Googleサインインを使用する |
pubspec.yamlに以下を追加します。
|
|
そして「flutter pub get」でインストールします。
設定(Android編)
基本的には、こちらに書いてある事をします。
Firebase Console(https://console.developers.google.com/)からプロジェクトを新規作成します。
プロジェクトを作成したら、設定をしていきます。
\[プロジェクトの設定\]からアプリを追加します。
以下にて、Androidパッケージ名とデバッグ用の署名証明書SHA1を入力します。
SHA1はこちらのサイトに取得方法が記載されていますが、WindowsでAndroidStudioをお使いの方は以下のようにします。
コマンドプロンプトを起動して、以下を入力します。
|
|
「キーストアのパスワードを入力してください:」と言われるので「android」と入力します。 SHA1の部分をコピーして先ほどのデバッグ用の署名証明書SHA1に入力します。
google_service.jsonをダウンロードして所定の場所に置け、とあります。
こちらに置きます。
次に、google_service.jsonを読み込むためにソースコードを追記する必要があるそうです。
赤枠部分を追加(最初からあるものもある)します。
補足:現時点で以下がエラーになるので、「GrandleException」を「FileNotFoundException」に変更します。
そして、同期してね、という事なので、
Android Studioでは「Open for Editing in Android Studio」をクリックします。(これで同期)
設定(ios編)
※Macにて実施している前提で進めます。 Androidとiosの両方を設定する方はAndroidで作成したプロジェクトにアプリを追加します。もしFirebaseプロジェクトを作成されていない方はFirebase Console(https://console.developers.google.com/)からプロジェクトを新規作成します。
以下から追加します。
iosアイコンを選びます。
以下のような表示になります。
AppleハンドルIDはXcodeで調べます。
\[Tools\]-
\[Flutter\]-
\[Open ios module in Xcode\]もしくはターミナルにてiosフォルダに移動し、「open Runner.xcworkspace」と入力するとXcodeで以下画面が立ち上がります。 Bundle IdentifierをAppleハンドルIDに入れて次に進みます。(Xcodeは後で使うのでそのままにしてください。)
GoogleService-info.plistをダウンロードします。
またXcodeに戻り、ダウンロードしたGoogleService-info.plistをios/Runnerに追加します。
以下のような画面が表示されるのでFinishします。
ログイン用ソースコード
ログイン画面に何もないと少し寂しいので、少しオシャレな感じにします。(センスの無さ如何ともし難い…)ログインボタンさえあればOKです。
Signin画像はこちらからダウンロードした画像です。画像はassetsフォルダに配置しpubspec.yamlに以下を追加します。
|
|
Signinボタンを押下すると、以下のようにFirebaseが勝手にしてくれます。ありがたや。
google_login.dartというファイルを作り、以下を書きます。
|
|
ログアウト用ソースコード
ログアウトはGoogleSpreadSheetsの処理を追加したいので、今はシンプルにします。
google_login_info.dartというファイルを作り、以下を書きます。
|
|
SignOutするとログイン用画面に戻るようにしてあります。
これで①Googleにログイン編は終わりです。