Flutter - 페이스북 로그인, 애플로그인

1. Facebook 개발자 등록

developers.facebook.com 에서 Create App를 해준다.

소비자 모드로 들어가서 로그인 기능을 이용할 수 있게 해준다.

만든 후 login 기능에서 android 부분 선택. SDK 다운로드 할 필요 없이 pub.dev에서 라이브러리 추가하면됨.

프로젝트랑 패키지 네임 추가하기

패키지 네임은 android studio 에서 android - app - src - main - AndroidManifest.xml에서 상단의 manifest에 package 부분을 추가해 주면됨

기본 액티비티 클래스 이름은 같은 파일에서 activity 에서 name을 복사해서 붙여 넣어주면 됨. 패키지네임에 추가로 이어서 해줘야 됨.

이어서 키해시 부분을 추가해 주는 부분이 나오는데 그대로 하면 키해시를 잘못 생성하는 경우가 있어서 다른 방법으로 함. 일단 기본 사용 방법은 파이어베이스 콘솔에서 프로젝트 설정으로 가서 SHA 부분을 보면됨.

일단 터미널에서 안드로이드 폴더로 들어가서 gradlew signingReport로 해서 debug debug 인 부분의 SHA1값을 가져오면 됨(이부분은 복습부분임).

자바 jdk path와 openssl을 설치후 환경변수를 잡아준 후 keytool -exportcert -alias androiddebugkey -keystore -storepass android -keypass android | openssl sha1 -binary | openssl base64 를 실행하니 정상 작동하는 것을 확인. 해기 키 값을 페이스북 콘솔에 추가.

6단계에서는 안드로이드에 추가해야 할 부분임. 현재 까지 부분이 페이스북 콘솔 부분과 키 해시값 만드는 부분이 끝임.

Flutter 프로젝트에 필요한 부분 추가 세팅을 해야함.

첫번째 부분 복사해서 android - app - src - main - res - values에 새 calues resource file을 추가해줌 Strings.xml을 생성. 이부분에 첫번째 부분을 복사해서 넣어줌. resources해 복사한것을 추가해주고 그 밑에 <string name="app_name">Firebase Auth</string>도 추가로 넣어준다.

2번째 복사 부분은 android - app - sr c- main - AndroidManifest.xml에 manifest 안에 application 위에 붙여 넣어 주면 된다.

마지막 복사 부분은 application의 안에 acrivity 위에 넣어주면 된다.

그 이후 단계는 전부 넘겨 주면 된다.

이제 SDK 추가 해주면 된다. pub.dev에서 flutter_facebook_auth 를 추가해 준다. 강의 버전인 2.0.2+1을 활용. nullsafety로 작동하지 않아 최신 버전으로 활용

이제 파이어베이스 콘솔에서 sign-in method에서 제공없체를 추가해 주면 된다. 그런데 facebook의 appid와 secret가 없다. 페이스북 콘솔로 가서 설정 - 기본설정에서 둘다 확인해서 복사 붙여넣기 해주면 된다. 잘 넣어주면 정상 등록 된것을 확인 할 수 있다. 가장 하단의 복사 부분을 복사해서 페이스북 콘솔에서 페이스북 로그인 - 세팅에서 Valid OAuth URIs 에 붙여 넣어주면 된다.

페이스북 콘솔에서 로그인 기능을 사용하려면 public_profile을 고급엑세스 하라고 나와서 그렇게 해주었다.(강의에 없는부분)

2. 플러터에서 구현하기

페이스북 추가하지만 login 메소드가 정상 작동 하지 않음. nullsafety되서 이 부분에 관련 된것으로 보임. firebase_core와 버전 충돌로 보임. 모두 강의 버전으로 바꿈. 버전 바꾼후 정상 작동 나중에 버전 모두 최신으로 바꿔서 정상작동하게 만들어 볼것.

---

  Future<UserCredential> _signInWithFacebook() async {

    final AccessToken accessToken = await FacebookAuth.instance.login();

    final FacebookAuthCredential credential = FacebookAuthProvider.credential(accessToken.token);
    
    UserCredential userCredential = await FirebaseAuth.instance.signInWithCredential(credential);

    return userCredential;
  }

---

페이스북 로그인 코드 추가 부분.

 

단 기본은 자기 계정으로만 로그인 가능. 그외에는 test users를 추가 해서 해야함.

그러나 다른 소셜로그인이지만 메일 계정이 같으면 에러가 발생함.

그리고 이상태에서는 메일 확인을 하라고 나옴. 소셜로그인은 그냥 넘어감 구글과 같이 바꿔야 함.

 

3. 에러 핸들링

첫번째는 페이스북 로그인시 이메일 확인 없이 넘기기.

page_notifier에서 switch case 문 아래에있던 if 문을 default(이메일로 가입한 부분)에 올려주고 기존 코드는 삭제하고 아래와 같이 변경 해준다.

---

         default:
            if(user.emailVerified){
              goToMain();
            }else{
              showPage(CheckYourEmail.pageName);
            }
            return;

---

다른 로그인과 관련된 3가지 case에는 goToMain();을 break; 위에 추가해줘서 로그인 후 메인으로 가게 해준다.

그리고 로그아웃은 pub.dev에서 로그아웃 기능을 찾아보면 된다. 다른 라이브러리도 이런식으로 기능 찾아서 하면 도움이 됨. FaceBookAuth.instance.logOut();를 PageNotifier에 추가해서 로그아웃 해주면 정상 작동하는것을 알 수 있다.

 

4. 두번째 에러인 다른 소셜이지만 이메일 주소가 같아서 생기는 에러

로그인 시 credential을 가져오는 부분중 google과 facebook으로 나뉘는데 둘다 AuthCredential을 extends를 하고있어서 이부분이 같은 기능이므로 통합하고 여기서 에러처리를 해준다.

구글과 페이스북 로그인 메소드에서 final UserCredential userCredential 뒤 부분을 await _signInWithCredentail(credential); 메소드로 변경 시켜주고 _signInWithCredentail를 추가해 준다.

---

  Future<UserCredential> _signInWithCredentail(AuthCredential authCredential) async {
    /// 소셜 로그인 credential 같은 기능 합치는 부분, 여기서 에러 관리
    try {
      UserCredential userCredential = await FirebaseAuth.instance
          .signInWithCredential(authCredential);
      return userCredential;
    } on FirebaseAuthException catch (e){
      if(e.code == 'account-exists-with-different-credential'){
        /// 기존 가입된 소셜 로그인이 뭔지 가져와야함
        List<String> userSignInMethods = await FirebaseAuth.instance.fetchSignInMethodsForEmail(e.email);//e.email로 이 이메일이 가입된 소셜이 무엇인가 받아옴
        
        switch(userSignInMethods[0]){
          case 'google.com':
            SnackBar snackBar = SnackBar(content: Text('구글로 로그인 다시 시도하세요.'),);
            ScaffoldMessenger.of(_scaffoldKey.currentContext).showSnackBar(snackBar);
            break;
          case 'facebook.com':
            SnackBar snackBar = SnackBar(content: Text('페이스북으로 로그인 다시 시도하세요.'),);
            ScaffoldMessenger.of(_scaffoldKey.currentContext).showSnackBar(snackBar);
            break;
          case 'apple.com':
            SnackBar snackBar = SnackBar(content: Text('애플로 로그인 다시 시도하세요.'),);
            ScaffoldMessenger.of(_scaffoldKey.currentContext).showSnackBar(snackBar);
            break;
          default:
            SnackBar snackBar = SnackBar(content: Text('이메일/비밀번호로 로그인 시도하세요.'),);
            ScaffoldMessenger.of(_scaffoldKey.currentContext).showSnackBar(snackBar);
            break;
        }
      }
      return null;
    }
  }

---

ios에서 로그인과 apple 로그인은 맥이 없어서 해볼 수가 없어서 나중에 강의를 다시 참고하던가 찾아봐야 할듯 하다.