I've been working with Flutter for a while now, and today I decided to try Flutter web. I wanted to make a website with Firebase Google Sign in. I followed all the steps from here, but I couldn't get it to work. I don't get any errors but when I run the auth code nothing happens.
I ran the app with flutter run -d chrome --web-hostname localhost --web-port 5000
I also tried opening localhost:5000 in normal Chrome but it didn't work either.
Here is some information, if you need anything else please let me know, thank you.
flutter doctor -v output:
[√] Flutter (Channel master, 1.26.0-2.0.pre.296, on Microsoft Windows [Version 10.0.19041.685], locale en-US)
? Flutter version 1.26.0-2.0.pre.296 at C:flutter
? Framework revision 737496e8db (8 hours ago), 2021-01-12 02:54:03 -0500
? Engine revision 10cee6abcb
? Dart version 2.12.0 (build 2.12.0-214.0.dev)
[√] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
? Android SDK at C:UsersPCAppDataLocalAndroidSdk
? Platform android-30, build-tools 30.0.2
? ANDROID_HOME = C:UsersPCAppDataLocalAndroidSdk
? Java binary at: C:Program FilesAndroidAndroid Studiojreinjava
? Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)
? All Android licenses accepted.
[√] Chrome - develop for the web
? Chrome at C:Program FilesGoogleChromeApplicationchrome.exe
[√] Android Studio (version 4.1.0)
? Android Studio at C:Program FilesAndroidAndroid Studio
? 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-b01)
[√] VS Code (version 1.52.1)
? VS Code at C:UsersPCAppDataLocalProgramsMicrosoft VS Code
? Flutter extension version 3.18.1
[√] Connected device (2 available)
? Chrome (web) ? chrome ? web-javascript ? Google Chrome 87.0.4280.141
? Edge (web) ? edge ? web-javascript ? Microsoft Edge 87.0.664.66
? No issues found!
These are my pubspec.yaml dependencies:
...
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.0
firebase_auth: ^0.19.0+1
firebase_core: ^0.6.0
flutter_auth_buttons: ^0.10.0
google_sign_in: ^4.5.9
http: ^0.12.2
provider: ^4.3.2+3
...
This is my index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="google-signin-client_id" content="xxxxx.apps.googleusercontent.com">
<script src="https://www.gstatic.com/firebasejs/8.2.2/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.2/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.2/firebase-analytics.js"></script>
<script>
var firebaseConfig = {
apiKey: "xxxxx",
authDomain: "xxxxx",
projectId: "xxxxx",
storageBucket: "xxxxx",
messagingSenderId: "xxxxx",
appId: "xxxxx",
measurementId: "xxxxx"
};
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
<script src="main.dart.js" type="application/javascript"></script>
<title></title>
</head>
<body>
</body>
</html>
This is my auth code:
import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:google_sign_in/google_sign_in.dart';
class AuthService {
final FirebaseAuth _firebaseAuth;
final GoogleSignIn _googleSignIn = GoogleSignIn();
String googleAccessToken, googleIdToken;
AuthService(this._firebaseAuth);
Stream<User> get authStateChanges => _firebaseAuth.idTokenChanges();
Future<String> signOut() async {
try {
await _firebaseAuth.signOut();
return 'success';
} on FirebaseAuthException catch (e) {
return e.message;
}
}
GoogleAuthCredential getGoolgeCredential({accessToken, idToken}) {
return GoogleAuthProvider.credential(
accessToken: accessToken,
idToken: idToken,
);
}
Future<String> signInWithGoogle() async {
/// This is the auth code
try {
await Firebase.initializeApp();
final GoogleSignInAccount googleUser = await _googleSignIn.signIn();
final GoogleSignInAuthentication googleAuth =
await googleUser.authentication;
googleAccessToken = googleAuth.accessToken;
googleIdToken = googleAuth.idToken;
await FirebaseAuth.instance.signInWithCredential(getGoolgeCredential(
accessToken: googleAuth.accessToken, idToken: googleAuth.idToken));
return 'success';
} on FirebaseAuthException catch (e) {
return e.message;
}
}
}
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
