[Flutter] 네이버 로그인 (iOS/Android)

1.  naver 개발자 설정

https://developers.naver.com/apps/#/register?api=nvlogin 

애플리케이션 - NAVER Developers

 

- 애플리케이션 등록

- 안드로이드 설정

다운로드 url : https://play.google.com/store/ (아직 등록한 url이 없으므로 우선 이렇게 입력해줍니다.)

앱 패키지 이름 : (android/app/src/main/AndroidManifest.xml 에서 패키지 명을 가져와 복붙합니다.)

 

- iOS 설정

다운로드 url : https://www.apple.com/kr/app-store/ (이것도 아직 없음으로 일단 입력해줍니다.)

URL Scheme : 로그인 후 Callback을 전달받을 URL-Scheme를 입력합니다.

 

 

필요한 정보들이니 기억해줍니다.

- Client Name (설정한 앱 이름) : ${app_name}

- Client ID : ${clientId}

- Client Secret : ${client_secret} 

- URL Scheme (iOS) : ${url_scheme}

 

 

 

 

 

 

 

 

 

 

2. 패키지 설치

flutter_naver_login: ^1.6.0

https://pub.dev/packages/flutter_naver_login

flutter_naver_login | Flutter Package

 

 

 

 

 

 

 

 

 

 

3 . 안드로이드 설정

android/app/src/main/res/values/strings.xml

위에서 기억해둔 정보들을 입력해줍니다.

<?xml version="1.0" encoding="utf-8"?>
<resources>
	... 

    <!-- naver login -->
    <string name="client_id">${client_id}</string>
    <string name="client_secret">${client_secret}</string>
    <string name="client_name">${app_name}</string>
    
</resources>

android/app/src/main/AndroidManifest.xml

<application
...
        <meta-data
            android:name="flutterEmbedding"
            android:value="2" />
            
        <!-- 아래의 코드를 추가해줍니다. -->    
        <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" />
...

 

 

 

 

 

 

 

 

 

4 . iOS 설정

info.plist 설정에 아래의 코드를 추가합니다.

위에서 기억해둔 정보들을 입력해줍니다.

${...} 인 부분 들만 바꾸어주면 됩니다.

<plist version="1.0">
		...
        <key>CFBundleURLTypes</key>
        <array>
            <dict>
                <key>CFBundleTypeRole</key>
                <string>Editor</string>
                <key>CFBundleURLSchemes</key>
                <array>
                    <string>${url_scheme}</string>
                </array>
            </dict>
        </array>

        <key>LSApplicationQueriesSchemes</key>
        <array>
            <string>naversearchapp</string>
            <string>naversearchthirdlogin</string>
        </array>
        <key>naverServiceAppUrlScheme</key>
        <string>${url_scheme}</string>
        <key>naverConsumerKey</key>
        <string>${client_id}</string>
        <key>naverConsumerSecret</key>
        <string>${client_secret}</string>
        <key>naverServiceAppName</key>
        <string>${app_name}</string>

        <!-- http allows configurations -->
        <key>NSAppTransportSecurity</key>
        <dict>
           <key>NSAllowsArbitraryLoads</key>
           <true/>
           <key>NSExceptionDomains</key>
           <dict>
              <key>naver.com</key>
              <dict>
                 <key>NSExceptionRequiresForwardSecrecy</key>
                 <false/>
                 <key>NSIncludesSubdomains</key>
                 <true/>
              </dict>
              <key>naver.net</key>
              <dict>
                 <key>NSExceptionRequiresForwardSecrecy</key>
                 <false/>
                 <key>NSIncludesSubdomains</key>
                 <true/>
              </dict>
           </dict>
        </dict>
        
        ...
    </dict>
</plist>

 

ios/Runner/AppDelegate.swift

/// ... 와 /// 로 둘러쌓인 부분의 코드를 추가합니다.

import UIKit
import Flutter

/// naver 로그인 import 추가
import NaverThirdPartyLogin
///



@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
    override func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
    ) -> Bool {
        GeneratedPluginRegistrant.register(with: self)
        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
    }
    
    
    /// 아래의 코드 추가
    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
    }
    /// 
    
}

 

 

 

 

 

 

 

 

5. 코드 작성

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

class NaverLoginView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('네이버 로그인')),
      body: _buildBody(context),
    );
  }

  Widget _buildBody(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(24),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        mainAxisSize: MainAxisSize.max,
        children: [
          _loginBtn(context),
          Padding(padding: EdgeInsets.all(8)),
          _logoutBtn(context)
        ],
      ),
    );
  }


  // 로그인 버튼
  Widget _loginBtn(BuildContext context) {
    return GestureDetector(
      onTap: () {
        _tapLoginBtn(context);
      },
      child: Container(
        decoration: const BoxDecoration(
          color: Color.fromRGBO(3, 199, 90, 1),
          borderRadius: BorderRadius.all(Radius.circular(8)),
        ),
        padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 24),
        child: Row(
          children: [
            SizedBox(
                width: 40,
                child: Image.asset('assets/auth/naver_logo_icon.png')),
            const Padding(padding: EdgeInsets.all(4)),
            const Text(
              '네이버로 로그인하기',
              style: TextStyle(
                  fontSize: 16, color: Color.fromARGB(255, 25, 22, 22)),
            ),
          ],
        ),
      ),
    );
  }


  // 로그아웃 버튼
  Widget _logoutBtn(BuildContext context) {
    return TextButton(
      onPressed: () {
        _tapLogoutBtn(context);
      },
      child: Text('로그아웃'),
    );
  }


  // 로그인
  void _tapLoginBtn(BuildContext context) async {
    NaverLoginResult loginResult = await FlutterNaverLogin.logIn();

    print(loginResult.account.email);
    print(loginResult.account.birthday);
    print(loginResult.account.nickname);
    print(loginResult.account.mobile);

    NaverAccessToken accessToken = await FlutterNaverLogin.currentAccessToken;
    print(accessToken.accessToken);
  }


  // 로그아웃
  void _tapLogoutBtn(BuildContext context) async {
    NaverLoginResult loginResult = await FlutterNaverLogin.logOut();
    print(loginResult.account.email);
    print(loginResult.account.birthday);
    print(loginResult.account.nickname);
    print(loginResult.account.mobile);
  }
}

 

 

 

 

 

 

 

 

 

6. 네이버 로그인 버튼 디자인 가이드

https://developers.naver.com/docs/login/bi/bi.md

로그인 버튼 사용 가이드 - LOGIN

 

 

 

 

 

7.  kakao && naver 사용 시 발생할 수 있는 문제점

https://velog.io/@tygerhwang/FLUTTER-Kakao-Login-Issue

[FLUTTER] Kakao Login Issue