flutterで、google認証させてFirebaseAuthするメモ
Top / flutterで、google認証させてFirebaseAuthするメモ目次 †
お断り †
この記事はflutter初心者のメモなので、信頼性はないです。ないというか、
わかってません。すみません。調べ中のメモです。flutter本家のリンクの劣化版ぐらいの価値はあります。
とりあえずのゴール †
flutterでgoogle認証させてopenid取得したい
そのためにはgoogle cloudeでoauthのスコープの設定や、ドメインの設定が必要だ。
ドメインの設定には、ローカルでやるにはngrokを使って確認ができそうだ。
firebaseにデプロイしても仮ドメインがもらえる。
というところまではわかった気がする。
そのためにはもしやサーバとして起動させなくてはならないのではないか？
という疑問に当たった。
本家のドキュメント †
はじめてのflutterアプリ †
入門書だな
コードラボというのが始まって８５分間見積られている感じのサイトだった
https://codelabs.developers.google.com/codelabs/flutter-codelab-first?hl=ja#0
細分化された資料のインデックス †
https://docs.flutter.dev/get-started/learn-more
ウェブ開発者のためのFlutter †
https://docs.flutter.dev/get-started/flutter-for/web-devs
サンプル †
地図とfirebaseのサンプルだと！？
https://flutter.github.io/samples/flutter_maps_firestore.html
場所のメモ
https://flutter.github.io/samples/place_tracker.html
クックブック †
逆引き集に近い感じだな
https://docs.flutter.dev/cookbook
ソリューション †
いくつもあるが、抜粋だな
AI †
https://docs.flutter.dev/cookbook
firebaseとfirestore †
https://docs.flutter.dev/data-and-backend/firebase
アプリに地図を追加する †
https://developers.google.com/maps/flutter-package/overview?hl=ja
https://codelabs.developers.google.com/codelabs/google-maps-in-flutter?hl=ja#3
ngrok †
インストールは簡単だった。
無料でもそこそこ使える。グローバルIP + 仮ドメインサービスみたいなものという認識をしたよ。
起動 †
払いだされたアドレスをngrokのサイトで確認しに行き
ローカルで起動すると、ローカルのポートが外部公開される感じです。
参考になるかもしれない記事 †
フェデレーション ID とソーシャル ログイン †
https://firebase.google.com/docs/auth/flutter/federated-auth?hl=ja#ios+-and-android
googleとfirebaseのサンプルコードがありました。
dart †
以下をpubspec.yamlに入れておく必要があります。
google_sign_in
https://pub.dev/packages/google_sign_in
いや、いろいろめんどくさい設定あったはずやろ。説明が淡泊な感じ。
コード †
import 'package:google_sign_in/google_sign_in.dart';
Future<UserCredential> 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 credential = GoogleAuthProvider.credential(
accessToken: googleAuth?.accessToken,
idToken: googleAuth?.idToken,
);
// Once signed in, return the UserCredential
return await FirebaseAuth.instance.signInWithCredential(credential);
}
webの場合 †
ウェブの場合、Firebase SDK は、Firebase プロジェクトを使用して認証フローを自動的に処理できます。次に例を示します。
Google 認証プロバイダを作成し、ユーザーから取得する追加の権限スコープを指定します。
GoogleAuthProvider googleProvider = GoogleAuthProvider();
googleProvider.addScope('https://www.googleapis.com/auth/contacts.readonly');
googleProvider.setCustomParameters({
'login_hint': 'user@example.com'
});
認証情報を signInWithPopup? メソッドに渡します。これにより、ユーザーにプロジェクトへのログインを求める新しいウィンドウが表示されます。また、signInWithRedirect? を使用して同じウィンドウ内で認証プロセスを行うこともできます。
Future<UserCredential> signInWithGoogle() async {
// Create a new provider
GoogleAuthProvider googleProvider = GoogleAuthProvider();
googleProvider.addScope('https://www.googleapis.com/auth/contacts.readonly');
googleProvider.setCustomParameters({
'login_hint': 'user@example.com'
});
// Once signed in, return the UserCredential
return await FirebaseAuth.instance.signInWithPopup(googleProvider);
// Or use signInWithRedirect
// return await FirebaseAuth.instance.signInWithRedirect(googleProvider);
}
