flutter 네이버 로그인

 

NAVER Developers

 

 

1. 애플리케이션 추가

 

 

 

2. 안드로이드

 

1) android/app/src/main/AndroidMenifest.xml

 

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

 

2) android/app/src/main/res/values/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">flutter_sns_login_test</string>
</resources>

 

3) MainActivity.kt 수정 : FlutterActivity -> FlutterFragmentActivity

 

package com.example.flutter_sns_login_test

import io.flutter.embedding.android.FlutterFragmentActivity

class MainActivity: FlutterFragmentActivity() {
}

 

 

3. IOS

 

1) ios/Runner/info.plist

 

<array>
    <!-- 네이버 로그인 -->
    <dict>
        <key>CFBundleTypeRole</key>
        <string>Editor</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>naver</string>
        </array>
    </dict>
</array>

<!-- 외부 URL 스키마 설정 -->
<key>LSApplicationQueriesSchemes</key>
<array>
    <!-- 네이버 로그인 -->
    <string>naversearchapp</string>
    <string>naversearchthirdlogin</string>
</array>

<!-- 네이버 로그인 -->
<key>naverConsumerKey</key>
<string>{client_id}</string>
<key>naverConsumerSecret</key>
<string>{client_secret}</string>
<key>naverServiceAppName</key>
<string>flutter_sns_login_test</string>
<key>naverServiceAppUrlScheme</key>
<string>naver</string>

 

2) AppDelegate.swift : 아래 코드 추가 (카카오 로그인 추가 시 변형해야 한다.)

 

  // 네이버 로그인
  override func application(_ app: UIApplication, open url: URL, options: [UIApplicationOpenURLOptionsKey : 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
  }

 

 

4. 패키지 설치

 

flutter pub add flutter_naver_login

 

 

5. flutter 코드 작성

 

import 'dart:developer';

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

import 'package:flutter_naver_login/flutter_naver_login.dart';

final GlobalKey<ScaffoldMessengerState> snackbarKey =
    GlobalKey<ScaffoldMessengerState>();

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Naver Login',
      scaffoldMessengerKey: snackbarKey,
      theme: ThemeData(
        primarySwatch: Colors.green,
        primaryColor: const Color(0xFF00c73c),
        canvasColor: const Color(0xFFfafafa),
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool isLogin = false;
  String? accessToken;
  String? expiresAt;
  String? tokenType;
  String? name;
  String? refreshToken;

  /// Show [error] content in a ScaffoldMessenger snackbar
  void _showSnackError(String error) {
    snackbarKey.currentState?.showSnackBar(
      SnackBar(
        backgroundColor: Colors.red,
        content: Text(error.toString()),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          'Flutter Naver Login Sample',
          style: TextStyle(color: Colors.white),
        ),
      ),
      body: ListView(
        padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 20),
        children: [
          Column(
            children: [
              Text('isLogin: $isLogin'),
              Text('accessToken: $accessToken'),
              Text('refreshToken: $refreshToken'),
              Text('tokenType: $tokenType'),
              Text('user: $name'),
            ],
          ),
          InkWell(
            onTap: () {
              naverLogin();
            },
            child: Image.asset('assets/naver_log_in.png', height: 60),
          ),
          const SizedBox(height: 24.0),
          InkWell(
            onTap: () async {
              naverLogout();
            },
            child: Image.asset('assets/naver_log_out.png', height: 60),
          ),
        ],
      ),
    );
  }

  void naverLogin() async{
    try{
      final NaverLoginResult user = await FlutterNaverLogin.logIn();
      NaverAccessToken res = await FlutterNaverLogin.currentAccessToken;

      log(""네이버 로그인 결과: $res"");

      setState(() {
        accessToken = res.accessToken;
        tokenType = res.tokenType;
        refreshToken = res.refreshToken;
      });


      String id = user.account.email;
      String name = user.account.name;
      String tel = user.account.mobile
          .replaceAll('+82', '0')
          .replaceAll('-', '')
          .replaceAll(' ', '')
          .replaceAll('+', '');
      String sex = user.account.gender;
      String socialNo = '${user.account.birthyear}${user.account.birthday}'.replaceAll('-', '');
      String idx = user.account.id.toString();

      print('$id, $name, $tel, $sex, $socialNo, $idx');

    }catch(error){
      print('naver login error $error');
    }
  }

  Future<void> naverLogout() async {
    try {
      await FlutterNaverLogin.logOut();
      setState(() {
        isLogin = false;
        accessToken = null;
        tokenType = null;
        name = null;
      });
    } catch (error) {
      _showSnackError(error.toString());
    }
  }

}