Flutter Web을 Firebase Authentication 사용하기 (firebase_auth)결국 쓰려면 쉘에서 (flutter run -d web-server --web-port 9090) 실행해야한다. 가려다가 결국 android에서 했다.

https://www.youtube.com/watch?v=qtJU5T0tF-M

위 유투브 영상을 보고 알았다.
공식사이트는
https://pub.dev/packages/firebase_auth

 

firebase_auth | Flutter Package

예제도 있고 다있다.
web\index.html 에서 몇가지를 적어주어야한다.

특이점은 구글 client_id를 적어줘야한다는 것이다.
firebase console에서 확인 가능하다.

이렇게만 하면 firebase에 등록된 저 도메인에 대해서만 되는 거다.
사실 개발은 로컬에서 진행되므로 구글console에서 별도로 localhost용을 등록해줘야한다.
방법은 "웹SDK구성" 옆에 ? 표를 클릭하면 구글console로 이동할수있다.

https://console.developers.google.com/apis/credentials?authuser=0&project=royuta-14e17

사용자인증 정보 만들기를 클릭해서 OAuth 2.0클라이언트 ID를 만들었는데 localhost:9090으로 만들었다.

이제 flutter web을 로컬에서 실행해서  localhost:9090 접속해서 정의된 프로세스를 타면 구글인증창을 만날수있다.

**특이사항으로 vscode에서 F5를 눌러서 뜬 창에서 로그인을 시도하면 보안 오류 때문에 실행이 안된다.
그런데 창을 새로 띄우고 로그인을 시도하면 된다.

consoeldflutter run  -d chrome --web-port 9090

으로 실행해도 동일한 보안 오류가 난다.

그래서  아래와 같이 해보고 창을 새로 띄워서 해보았는데 잘된다.
flutter run  -d web-server --web-port 9090

그래서 vscode에 launcher.json에 deviceId를 chrome 대신에 web-server로 해보았는데
F5눌렀을 때 멈춘다.   뭔가 vscode랑 chrome이 열린애랑 물리는 것이 있는 듯하다.
그래서 web-server로 vscode에서 F5로 실행할수는 없었다.

사실 좀더 고민해보니 이게 web에서 하려고 하니까 문제지
app으로 넣는다면 문제가 생기지 않는구나..

여기까지로 만족하자!!

stackoverflow에 관련 글이 있다.

https://stackoverflow.com/questions/59480956/browser-or-app-may-not-be-secure-try-using-a-different-browser-error-with-fl

"Browser or app may not be secure. Try using a different browser." error with Flutter Firebase Google Login

This problem isn't specific to flutter. It happens whenever you try to sign in to Google in a Chrome instance that has debugging turned on. In other words, if you, your automation software, or IDE starts up chrome with a command like chrome.exe --remote-debugging-port=9222

If running Chrome normally (out of debug mode) is not an option, then try https://support.google.com/accounts/thread/22873505?msgid=24501976 or if you are using Electron then try https://support.google.com/accounts/thread/22873505?msgid=24503570 but I, personally, haven't been able to make these work for me, yet.

Please upvote the question at https://support.google.com/accounts/thread/25209002 if you want a solution to this problem that actually works.

--결국 디버그 모드로 동작시 포트가 하나더 열렸다고 했는데 .. 이것도 이사람의 생각인듯 하다 저글에 포함된
https://support.google.com/accounts/thread/22873505?msgid=24503570

"This browser or app may not be secure" error when trying to sign in with Google on desktop apps - Google Account Community

똑같은 증상으로 안된다는 사람들 해결책을 못내고 있는 구글.!!

이것도 해결책이 못되는게 이렇게 하면 print 문을 찍었던것을 debug 콘솔에서 확인을 못한다.
결국 filrebase의 인증은  web에서는 못쓰겠다.!!

결국 Android에서 개발하고   테스트 하고 실 배포하고 확인 되어야할 것 같다.

리턴된 결과는 

{
  "kind": "identitytoolkit#GetAccountInfoResponse",
  "users": [
    {
      "localId": "---삭제----B21XCMQ4XB83",
      "email": "---삭제----@gmail.com",
      "displayName": "---삭제----",
      "photoUrl": "https://---삭제----photo.jpg",
      "emailVerified": true,
      "providerUserInfo": [
        {
          "providerId": "google.com",
          "displayName": "---삭제----",
          "photoUrl": "https://---삭제----/photo.jpg",
          "federatedId": "---삭제----6300192435157629",
          "email": "---삭제----",
          "rawId": "---삭제----2435157629"
        }
      ],
      "validSince": "1584191872",
      "lastLoginAt": "1584240225632",
      "createdAt": "1584191872948",
      "lastRefreshAt": "2020-03-15T02:43:45.632Z"
    }
  ]
}

 디비에 넣고 사용자 정보로 써야겠다.
결국 가져올 수있는 정보는 displayname, 하고 email 하고 photourl 정도 이구나!!

flutter code는 아래와 같다.

import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';

//sign_page.dart
//import './signin_page.dart' START;
import 'package:google_sign_in/google_sign_in.dart';
//import './signin_page.dart' END;


void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Firebase Auth Demo',
      home: MyHomePage(title: 'Firebase Auth Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  FirebaseUser user;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Container(
            child: RaisedButton(
              child: const Text('Test SignIn/SignOut'),
              onPressed: () => _pushPage(context, SignInPage()),
            ),
            padding: const EdgeInsets.all(16),
            alignment: Alignment.center,
          ),
        ],
      ),
    );
  }

  void _pushPage(BuildContext context, Widget page) {
    Navigator.of(context).push(
      MaterialPageRoute<void>(builder: (_) => page),
    );
  }
}

//sign_page.dart

final FirebaseAuth _auth = FirebaseAuth.instance;
final GoogleSignIn _googleSignIn = GoogleSignIn();


class SignInPage extends StatefulWidget {
  final String title = 'Registration';
  @override
  State<StatefulWidget> createState() => SignInPageState();
}

class SignInPageState extends State<SignInPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        actions: <Widget>[
          Builder(builder: (BuildContext context) {
            return FlatButton(
              child: const Text('Sign out'),
              textColor: Theme.of(context).buttonColor,
              onPressed: () async {
                final FirebaseUser user = await _auth.currentUser();
                if (user == null) {
                  Scaffold.of(context).showSnackBar(const SnackBar(
                    content: Text('No one has signed in.'),
                  ));
                  return;
                }
                _signOut();
                final String uid = user.uid;
                Scaffold.of(context).showSnackBar(SnackBar(
                  content: Text(uid + ' has successfully signed out.'),
                ));
              },
            );
          })
        ],
      ),
      body: Builder(builder: (BuildContext context) {
        return ListView(
          scrollDirection: Axis.vertical,
          children: <Widget>[
            _GoogleSignInSection(),
          ],
        );
      }),
    );
  }

  // Example code for sign out.
  void _signOut() async {
    await _auth.signOut();
  }
}

class _GoogleSignInSection extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _GoogleSignInSectionState();
}

class _GoogleSignInSectionState extends State<_GoogleSignInSection> {
  bool _success;
  String _userID;
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Container(
          child: const Text('Test sign in with Google'),
          padding: const EdgeInsets.all(16),
          alignment: Alignment.center,
        ),
        Container(
          padding: const EdgeInsets.symmetric(vertical: 16.0),
          alignment: Alignment.center,
          child: RaisedButton(
            onPressed: () async {
              _signInWithGoogle();
            },
            child: const Text('Sign in with Google'),
          ),
        ),
        Container(
          alignment: Alignment.center,
          padding: const EdgeInsets.symmetric(horizontal: 16),
          child: Text(
            _success == null
                ? ''
                : (_success
                    ? 'Successfully signed in, uid: ' + _userID
                    : 'Sign in failed'),
            style: TextStyle(color: Colors.red),
          ),
        )
      ],
    );
  }

  // Example code of how to sign in with google.
  void _signInWithGoogle() async {
    final GoogleSignInAccount googleUser = await _googleSignIn.signIn();
    final GoogleSignInAuthentication googleAuth =
        await googleUser.authentication;
    final AuthCredential credential = GoogleAuthProvider.getCredential(
      accessToken: googleAuth.accessToken,
      idToken: googleAuth.idToken,
    );
    final FirebaseUser user =
        (await _auth.signInWithCredential(credential)).user;
    assert(user.email != null);
    assert(user.displayName != null);
    assert(!user.isAnonymous);
    assert(await user.getIdToken() != null);

    final FirebaseUser currentUser = await _auth.currentUser();
    assert(user.uid == currentUser.uid);
    setState(() {
      print(user);
      if (user != null) {
        _success = true;
        _userID = user.uid;
      } else {
        _success = false;
      }
    });
  }
}

 

위코드를 가지고 그대로 하려고 하면 android에서도 로그인이 안된다. 
찾아보니 build.gradle에 설치하는 것도 있었다. 
나중에 찾아서 정리하자

여기서 이야기하고 싶은것은 filrebase에서 android 앱을 만들어줘야하고   키도 만들어줘서 입력해주어야한다.
PS C:\st\hello_world\web_hello_world> 
--한줄로입력해야한다.
keytool -list -v -alias androiddebugkey -keystore C:\users\jijs\.android\debug.keystore
키 저장소 비밀번호 입력: 기본 비밀번호는 android 이다.  
별칭 이름: androiddebugkey
생성 날짜: 2020. 3. 6
항목 유형: PrivateKeyEntry
인증서 체인 길이: 1
인증서[1]:
소유자: C=US, O=Android, CN=Android Debug
발행자: C=US, O=Android, CN=Android Debug
일련 번호: 1
적합한 시작 날짜: Fri Mar 06 00:59:11 KST 2020 종료 날짜: Sun Feb 27 00:59:11 KST 2050
인증서 지문:
         MD5:  65:B3:C2:6D:66:59:B2:B2:D1:A2:B1:E9:FA:28:6C:26
         SHA1: 3C:3C:35:0D:0C:0C:DF:BC:3D:74:A0:83:30:FD:D4:ED:47:7C:B0:24
         SHA256: 01:35:A3:CC:D6:87:E0:BA:77:D1:F9:93:6D:B3:81:90:92:85:2D:B9:2E:16:49:7D:72:41:93:12:63:67:4F:61
서명 알고리즘 이름: SHA1withRSA
주체 공용 키 알고리즘: 2048비트 RSA 키
버전: 1

Warning:
JKS 키 저장소는 고유 형식을 사용합니다. "keytool -importkeystore -srckeystore C:\users\jijs\.android\debug.keystore -destkeystore C:\users\jijs\.android\debug.keystore -deststoretype pkcs12"를 사용하는 산업 표준 형식인 PKCS12로 이전하는 것이 좋습니다.
firebase 아래 화면에 넣어줘야한다.