[flutter] 과제일지 day18: firebase + 페이스북 로그인(안드로이드)

과제를 진행하기 위해서 아래의 설정을 맞춰주세요.

하나의 프로젝트에 1, 2, 3번을 모두 구현해주세요.

프로젝트에 컬렉션 (post)를 만들고 2가지 Document를 만들어 다음의 값을 넣도록 한다.

• 문서명은 자동생성할 수 있도록 한다.
• 필드값은 content, likes, title를 같도록 하며, 데이터타입은 다음과 같다.
  • content - string
  • title - string
  • likes - number

위의 제공된 코드의 주석을 해제하면 다음과 같이 구현이 가능하다.
trailing의 IconButton을 클릭하면 해당 포스트의 좋아요 수가 +1만큼 올라간다.
주석을 해제하고, 코드를 알맞게 작성하시오.

• FieldValue를 사용하여 해결할 것

Firebase의 Authentication을 통하여 다음 중 하나를 선택하여 구현하여 프로젝트에 적용하시오.

• apple
• facebook

1. 인증된 사용자가 올바른 유저인지 구별하기 위해서 이메일로 가입된 유저에 한해 email verification을 진행할 수 있다.
   • Email Verification을 진행하는 방법을 알아보고
     로그인 된 사용자에 한해 인증된 사용자의 경우 다음과 같이 나올 수 있도록 플러터 화면에 표시하시오.
     - 이메일 인증을 하지않은 유저의 경우: '이곳을 눌러 이메일 인증을 해주세요'
     - 이메일 인증이 진행된 유저의 경우: '이메일이 인증된 사용자입니다'
     

facebook login

facebook dev doc

flutter_login_facebook: ^1.8.0

facebook developer 홈페이지에 들어가 개발자 등록을 한 후, 앱을 하나 만든다.
필자는 sfac-test로 그냥 대충 지었다. 나중에 수정도 가능하다고 한다.

1. Meta for Developers에서 개발자로 등록한다.

2. '내 앱' > '앱 만들기' > '페이스북 계정으로 로그인하도록 허용' > 앱 이름 추가

페이스북 계정으로 로그인하도록 허용 클릭

2. 대시보드에서 '제품' > '페이스북 로그인'

페이스북 로그인 제품을 추가하면 이렇게 나온다. 여기서 '구성' 셀렉트 창을 누르면 '빠른 시작'을 할 수 있다.

3. 안드로이드 클릭

페이스북 SDK를 사용할거라면 1, 2단계를 따라서 한다.
필자는 3단계부터 진행했다.

4. 안드로이드 프로젝트에 대해 페북에 알리기

필자는 어플 이름이 assignment로 되어있어서 이렇게 작성했다. 기본 액티비티 클래스는 동일하게 하고 .MainActivity 붙여준다. Save 버튼 누르면 계속 버튼이 활성화된다.

5. 개발 및 릴리스 키 해시 추가(맥)

keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64

필자는 맥북을 사용하기 떄문에 이 코드를 복사해서 터미널에 입력했다.
그럼 28자 키 해시가 생성된다. 이 키를 복사해서 '키 해시' 텍스트필드에 입력하고 Save한다.

6. 앱에 대한 SSO 활성화

처음엔 '아니요'로 되어있다. 클릭하면 토글된다. '예'로 바꿔서 Save

7. 리소스 및 메니페스트 수정

하라는대로 따라하면 된다. 글치만 좀 복잡하다고 느낄 수 있기 때문에 자세히 적어본다.

1. /app/res/values/strings.xml 파일에 코드 추가

당연히 android 폴더에 있는 app 폴더를 말한다.

<string name="facebook_app_id">1234</string> //대시보드 상단의 '앱ID' 복붙
<string name="fb_login_protocol_scheme">fb1234</string> // fb'$앱ID' 입력
<string name="facebook_client_token">56789</string> // 대시보드 > 앱 설정 > 고급 설정 > 클라이언트 토큰 복붙

2. /app/manifest/AndroidManifest.xml 파일에 코드 추가

application 태그 내에 복붙한다.

   	<meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/facebook_app_id"/>
   	<meta-data android:name="com.facebook.sdk.ClientToken" android:value="@string/facebook_client_token"/>

이 코드 역시 application 태그 내에 복붙한다.

    <activity android:name="com.facebook.FacebookActivity"
        android:configChanges=
                "keyboard|keyboardHidden|screenLayout|screenSize|orientation"
        android:label="@string/app_name" />
    <activity
        android:name="com.facebook.CustomTabActivity"
        android:exported="true">
        <intent-filter>
            <action android:name="android.intent.action.VIEW" />
            <category android:name="android.intent.category.DEFAULT" />
            <category android:name="android.intent.category.BROWSABLE" />
            <data android:scheme="@string/fb_login_protocol_scheme" />
        </intent-filter>
    </activity>

application 태그 뒤, manifest 태그 내에 아래 코드를 복붙한다.

<uses-permission android:name="android.permission.INTERNET"/>

여기에 추가로 광고도 붙이려면 추가해야하는 코드도 따로 있음. 본인은 패스

8. 이제 flutter 코드로 돌아와서, flutter_login_facebook 다운로드

참고로 필자의 패키지 버전은 아래와 같다. 에뮬레이터를 켰을때 에러가 발생해서 파이어페이스 패키지들을 다운그레이드 시켰다.

dependencies:
  cloud_firestore: 4.9.2
  cupertino_icons: ^1.0.2
  firebase_auth: 4.10.0
  firebase_core: 2.16.0
  firebase_storage: 11.2.7
  flutter:
    sdk: flutter
  get: ^4.6.6
  flutter_login_facebook: ^1.8.0

9. AuthController

class AuthController extends GetxController {
  final Rxn<FacebookAccessToken> _fbToken = Rxn();

  FacebookAccessToken? get token => _fbToken.value;

  fbLogin() async {
    final fb = FacebookLogin();

    final res = await fb.logIn(permissions: [
      FacebookPermission.publicProfile,
      FacebookPermission.email,
    ]);

    print(res);

    if (res.status == 200) {
      _fbToken(res.accessToken);
      // profile = await fb.getUserProfile();
      // imageUrl = await fb.getProfileImageUrl(width: 100);
      // email = await fb.getUserEmail();
    }
  }

  logout() {}

  _handleAuthChanged(FacebookAccessToken? fbToken) {
    if (fbToken != null) {
      Get.to(const AssignmentPage());
      return;
    }
    // 로그인 페이지로 이동
    Get.to(const LoginPage());
    return;
  }

  @override
  void onInit() {
    super.onInit();
    ever(_fbToken, (fbToken) => _handleAuthChanged(fbToken));
  }
}

로그인 버튼을 눌르면 페이스북으로 리다이렉트된다.

그런데 에뮬레이터에서 위와 같은 에러가 나왔다. 페이스북 앱을 다운로드받으라는데 어떻게 해야하는건지... SDK를 다운로드했어야하는걸까?? 🤔