[flutter + firebase auth] 플러터 + 파이어베이스 로그인 연동 <facebook 로그인> part-3

안녕하세요 개발하는 남자 개남입니다.

지난 포스팅에는 구글 로그인을 알아봤는데요

[flutter + firebase auth] 플러터 + 파이어베이스 로그인 연동 <구글로그인> part-2

이어서 이번에는 facebook 로그인을 구연해보겠습니다.

---

페이스북 / 파이어베이스 콘솔 설정

페이스북 로그인을 하기위해선 지난 번 구글때와는 다르게 페이스북에 앱을 등록 시켜 줘야합니다.

페이스북 개발자 사이트로 이동 링크< 클릭

 

잘보이진 않지만, 사이트 상단 우측 메뉴에 내앱 메뉴가 있습니다 클릭해서 앱관리로 들어가 줍니다.

 

 

상단에 앱 만들기 버튼 클릭 해서 앱을 생성해줍니다.

 

 

로그인 구현을 위한 연결된 환경 구축 기능을 선택하고 계속 버튼을 눌러줍니다.

 

 

 

앱 이름을 적당한 이름으로 선택해줍니다 ( 개인적으로는 앱이름과 동일하면 구별하기 쉽겠죠? ) 

비즈니스 관리자 계정은 선택사항이니 패스해줍니다. 

앱 만들기 버튼 클릭해줍니다.

 

여기까지 했다면 이제 Firebase console 로 접속해줍니다. 클릭

 

관리하고 있는 앱 리스트 중에 구현중인 앱을 선택해서 관리콘솔로 이동합니다.

 

 

위 순서로 클릭해줍니다  Authentication > Sign-in method > Facebook Edit 버튼 

 

 

사용 설정을 해줍니다. 

그렇게 되면 앱 ID 와 앱 비밀번호를 입력하라고 알려줍니다. 

자 그럼 다시 페이스북 개발 콘솔로 돌아와서 값을 확인해줍니다.

 

콘솔에서 왼쪽 메뉴에 설정 > 기본 설정을 클릭해주면 앱ID 와 앱 시크릿 코드가 보입니다. 

앱ID 값을 복사해서 파이어베이스 앱ID 항목에 넣어줍니다.

앱 시크릿 코드값은 값을 복사해서 파이어베이스 앱 비밀번호 항목에 넣어줍니다.

(앱 시크릿 코드값을 보려면 보기 버튼을 클릭해줘야 합니다. )

 

 

그다음은 구글 콘솔에 리디렉션 URL 을 복사해서 페이스북에 등록해줘야 합니다. 

 

 

제품 + 버튼을 클릭해줍니다.

 

그럼 보여지는 화면처럼 보여지는데 facebook 로그인부분을 설정 눌러줍니다.

 

 

 

위 사진처럼 각 플렛폼을 선택하여 구현하라고 나오는데 이부분은 잠시뒤에 설정하기로 하고 

외쪽 메뉴에 생성된 facebook 로그인 메뉴에서 

설정 메뉴를 선택해서 Facebook 로그인 설정 창으로 이동해줍니다.

 

유요한 OAuth 리디렉션 URl 부분이 있는데 이곳에 아까 파이어베이스 콘솔에 제공하던 리디렉션 URI를 넣어주면 된다.

 

하단에 변경 내용 저장을 눌러 줍니다.

 

자 그러고 다시 페이어베이스 콘솔에서 저장 버튼을 눌러줍니다.

 

여기까지 완료 했다면 콘솔에서 작업할 것들은 다 완료된 샘이다.

이제부터는 안드로이드 iOS 별 설정작업만 남았다.

 

---

가장먼저 안드로이드 먼저 설정해주도록 하겠다.

안드로이드 설정

이제 페이스북에서 제공하는 가이드에 따라 안드로이드 설정을 진행하겠습니다.

아까 지나쳤던 화면으로 돌아가줍니다. 

1번과 2번은 패스 합니다. 

3번 항목에서 패키지 이름과 액티비티 클래스 이름을 넣어주면 되는데 

패키지 이름은 프로젝트 > android > app > build.gradle 파일에서 확인 할 수 있다.

applicationId 값을 페이스북 관리 콘솔에 패키지 이름에 넣어줍니다

기본 액티비티 클래스 이름은 패키지 이름뒤에 .MainActivity 로 넣어주면 됩니다.

저장하고 다음으로 넘어가 줍니다.

 

 

 

이부분은 인증 해시키를 등록해줘야 한다.

맥환경은 위에 Mac OS 의 코드 복사를 해주면 되고 

Window 환경은 아래 Windows 환경의 코드복사를 클릭해주면 됩니다.

 

자 이제 터미널을 열어서 복사한 것을 붙여 실행해줍니다.

비밀번호는 android 를 넣어줍니다 ( 개발 버전일 경우 , 릴리즈일 경우는 생성했던 비번을 넣어줘야 합니다)

아래의 해시키가 생성된것을 볼 수 있습니다 해당 키를 복사해서 

넣어주고 저장한뒤에 계속 버튼을 눌러줍니다.

 

다음은 SSO활성화 입니다 

간단하게 예로 바꿔주고 저장한뒤에 다음버튼으로 진행해 줍니다.

 

이부분이 다소 귀찮고 헷갈릴 수 있으니 잘 따라와 보자 

1번 항목부터 진행해 보겠다. 

/app/res/values/strings.xml 파일을 열라고 나오지만 플로터 프로젝트는 strings.xml 파일이 없다.

고로 strings.xml 파일을 생성해준다.

생성된 xml 에 다음과 같이 우선 넣어준다.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">앱이름 넣기</string>
</resources>

그다음 위에 2번항목 다음을 추가합니다 부분에 코드 복사를 해서 

<string name="app_name">앱이름 넣기</string>

밑에 붙여 넣어준다.

위와 같은 파일을 만들어 줘야 한다.

 

다음 항목으로 넘어가자 

/app/manifest/AndroidManifest.xml 파일을 열라고 하니 열어보자 ( 플러터 프로젝트 경우 /app/main/AndroidManifest.xml 위치에 있다)

 

4번 항목의 인터넷 퍼미션 코드를 복사해서 소스에 추가하자 

 

마지막으로 5번 항목은 소스를 복사해서 넣어주면 되는데 한줄로 표기 된 것을 이쁘게 정리된 소스 아래것을 복사해서 넣어주자.

 

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

              <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>

 

소스코드까지 넣었다면 다시 콘솔로 넘어와 다음을 눌러보자 

그 다음부터 나오는 항목은 플러터로 개발하기때문에 해당사항이 없다 이제 해당 화면에서 나오자 

다음은 iOS 설정을 해보자 

 

---

IOS 설정

 

1번 항목은 패스 시켜주자 

2번 번들 식별자는 Xcode 에서 확인 할 수 있다. 

번들 ID 넣어주고 저장 해주자 

 

추가적으로 Facebook 은 iOS Target 버전을 최소 9로 잡아줘야한다.

다음과같이 8> 9 로 잡아주자 .

 

3번항목인 SSO 활성화 시켜주고 저장 누르고 다음 눌러주자 

 

 

 

4번 항목은 ios > Info.plist 파일에 추가 하는 작업이다. 

이부분은 다소 ;; 헷갈릴 수 있다. 

CFBundleURLTypes 가 이미 있을수도 없을 수도 있기때문이다.( 구글 URLSchemes 를 하신 분들에게는 이미 있을 것이다)

중복된 것 없이 잘 확인하면서 수정을 해줘야 한다.

붉은색 네모칸  부분을 추가해 준것이다. 

다시 콘솔로 넘어와서 다음을 눌러주자 다음부터 나오는 항목은 이제 필요가 없다 

자 여기까지 했다면 이제 소스코드만 작성해주면 페이스북 로그인이 동작 될 것이다.

 

---

플러터 페이스북 로그인 구현

우선 플러터 라이브러리중 페이스북 로그인 관련 라이브러리를 추가 해주자 

pub.dev 로 이동 

flutter_facebook_auth 라이브러리를 사용하겠다.

플러터 버전에 따라 라이브러리를 사용해야겠다 

 

flutter_facebook_auth: ^1.0.2+2 이버전이 나에게 맞는다. 

최신버전인 2.0.0 대의 라이브러리는 나의 플러터 버전으로는 돌릴 수 없다;; (플러터 버전 업을 해야겠지만;;; 구찮다... ) 

 

flutter_facebook_auth: ^1.0.2+2 버전을 pubspec.yaml 파일에 추가 해주자 

 

그다음 지난번 구글 로그인 버튼을 만들었던 위치로 돌아가자 파일 위치는 login.dart 다.

 

구글 버튼과 동일한 facebook 버튼을 만들어주자

FlatButton(
  color: Colors.grey.withOpacity(0.3),
  onPressed: signInWithFacebook,
  child: Text("Facebook Login"),
),

구글 버튼 밑에 추가 해 주었다.

 

이제 signInWithFacebook 이벤트만 만들어주면 된다.

 Future<UserCredential> signInWithFacebook() async {
    // Trigger the sign-in flow
    final AccessToken result = await FacebookAuth.instance.login();

    // Create a credential from the access token
    final FacebookAuthCredential facebookAuthCredential =
        FacebookAuthProvider.credential(result.token);

    // Once signed in, return the UserCredential
    return await FirebaseAuth.instance
        .signInWithCredential(facebookAuthCredential);
  }

이렇게 추가해주면 된다 

해당 소스는 flutterfire 공식 문서를 참조하였다.

정상적으로 안드로이드 IOS 동작이 완료 된다.

 

다음으로는 Apple login을 알아보도록 하자 

(험난하고 아주 긴 포스팅이 될 것이다 )