[Flutter] Firebase 로그인 : Naver

네이버 로그인 연동은 Firebase 공식 지원 패키지가 아닌 서드파티 패키지이므로, 직접 구축한 서버에서 Custom Token을 발급 받을 수 있어야 합니다.

사용한 플러그인

flutter_naver_login : https://pub.dev/packages/flutter_naver_login

Android 설정

1. app > src > main > res > strings.xml 파일 추가

    <?xml version="1.0" encoding="utf-8"?>
    <resources>
        <string name="client_id">client_id</string>
        <string name="client_secret">client_secret</string>
        <string name="client_name">client_name</string>
    </resources>

• 본인이 설정한 naverConsumerKey naverConsumerSecret
naverServiceAppName naverServiceAppName naverServiceAppUrlScheme
  을 <string></string> 사이에 넣기

2. AndroidMenifest.xml 수정

    <manifest xmlns:android="http://schemas.android.com/apk/res/android">
        <uses-permission android:name="android.permission.INTERNET"/>
        <application
            android:label="${라벨이름}"
            android:name="${applicationName}"
            android:icon="@mipmap/ic_launcher">
            <!--meta-data 추가-->
           <meta-data
               android:name="com.naver.sdk.clientId"
               android:value="@string/client_id" />
            <meta-data
               android:name="com.naver.sdk.clientSecret"
               android:value="@string/client_secret" />
            <meta-data
               android:name="com.naver.sdk.clientName"
               android:value="@string/client_name" />
            <activity
    			      ...

3. 문제 상황

[이슈 상황] kotiln과 java 컴파일러의 버전 호환성 에러 발생
[해결 방법]

• settings.gradle 수정

  plugins {
     id "dev.flutter.flutter-plugin-loader" version "1.0.0"
     id "com.android.application" version "8.1.0" apply false
     // START: FlutterFire Configuration
    id "com.google.gms.google-services" version "4.3.15" apply false
    // END: FlutterFire Configuration
    // id "org.jetbrains.kotlin.android" version 
    **"1.8.22"** apply false
    // flutter_naver_login ^2.0.0. 호환시키기 위해 버전 변경
    id "org.jetbrains.kotlin.android" version **"2.0.21"** apply false
   }

---

iOS 설정

1. info.plist 수정

  <!--array에 추가-->
  <dict>
          <key>CFBundleTypeRole</key>
          <string>Editor</string>
          <key>CFBundleURLSchemes</key>
          <array>
              <string>com.temp.test</string>
          </array>
      </dict>
     ...
    <!--가장 하단에 추가-->
    <key>naverConsumerKey</key>
    <string>$ConsumerKey</string>
    <key>naverConsumerSecret</key>
    <string>$ConsumerSecret</string>
    <key>naverServiceAppName</key>
    <string>$AppName</string>
    <key>naverServiceAppUrlScheme</key>
    <string>$AppUrlScheme</string>

• 본인이 설정한 naverConsumerKey naverConsumerSecret
naverServiceAppName naverServiceAppName naverServiceAppUrlScheme
  을 <string></string> 사이에 넣기

2. AppDelegate.swift 수정

    ...
    import NaverThirdPartyLogin
    
      // 가장 하단에 추가
      override func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
          var applicationResult = false
          if (!applicationResult) {
             applicationResult = NaverThirdPartyLoginConnection.getSharedInstance().application(app, open: url, options: options)
          }
          // if you use other application url process, please add code here.
    
          if (!applicationResult) {
             applicationResult = super.application(app, open: url, options: options)
          }
          return applicationResult
      }

---

코드 구현 예시

• pubspec.yaml 수정

  flutter_naver_login: ^2.0.0 # 플러그인 추가

• signinWithNaver()

  signinWithNaver() {
    IndicatorClient.instance.show();
    return FirebaseClient.auth.signinWithNaver().then((_) {
      return NetworkClient.auth.create('naver').then((_) {
        IndicatorClient.instance.hide();
        BaseNavigator.reset(const SplashRoute());
      });
    }).catchError((e) {
      // print(e);
      IndicatorClient.instance.hide();
      if (e == 'error') {
        BaseDialog.showToast('로그인이 취소되었습니다');
        return;
      }
      BaseDialog.showToast('오류가 발생했습니다');
    });
  }