서버없이 Flutter로 네이버 로그인하기 - Android

1. pubspec.yaml에 라이브러리 추가하기

flutter_naver_login | Flutter package

A Flutter plugin for using the native Naver Login SDKs on Android and iOS.

https://pub.dev/packages/flutter_naver_login

flutter_naver_login: ^1.8.0

2. 로그인하고 애플리케이션 등록하기

NAVER Developers

네이버 오픈 API들을 활용해 개발자들이 다양한 애플리케이션을 개발할 수 있도록 API 가이드와 SDK를 제공합니다. 제공중인 오픈 API에는 네이버 로그인, 검색, 단축URL, 캡차를 비롯 기계번역, 음성인식, 음성합성 등이 있습니다.

https://developers.naver.com/main/

• 앱을 앱 스토어에 배포한 경우가 아니라면 안드로이드는 앱패키지 명만 입력해도 됨
• 패키지명 확인하기

• 없으면 android/app/build.gradle에 android>defaultConfig>applicationId 입력하기

• iOS는 URL스킴, 로그인 후 돌아온 주소, 넣어주고 싶은 이름으로 넣어주면 됨

3. 클라이언트 id, 클라이언트 secret 확인하기

4. strings.xml 설정하기

• 파일 위치 : 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">[client_name]</string>
</resources>

5. AndroidManifest.xml설정하기

• 파일 위치 : android/app/src/main/AndroidManifest.xml

• strings.xml에 저장된 값이랑 연결해주기

        android:icon="@mipmap/ic_launcher">
        <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" />

6. MainActivity.kt 확인하기

• 파일 위치 : android/app/src/main/kotlin/com/example/flutter_game_test/MainActivity.kt

• 아래 예제 코드와 다르면 패키지 명 밑에 복붙하면 됨

import io.flutter.embedding.android.FlutterFragmentActivity

class MainActivity: FlutterFragmentActivity()

8. 로그인 구현하기

• 예제코드

NaverLoginResult res = await FlutterNaverLogin.logIn();
final NaverLoginResult result = await FlutterNaverLogin.logIn();
NaverAccessToken res = await FlutterNaverLogin.currentAccessToken;
setState(() {
   accesToken = res.accessToken;
   tokenType = res.tokenType;
});

9. main.dart 설정하기

• 카카오 로그인과 달리 네이버 로그인은 초기화할 필요가 없음

import 'package:flutter/material.dart';
import 'package:kakao_flutter_sdk/kakao_flutter_sdk.dart';
import 'oauth/login_page.dart';

Future<void> main() async {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: LoginPage(),
    );
  }
}

10. naver_login_service.dart 만들기

• 굳이 따로 안 만들어도 됨

import 'package:flutter_naver_login/flutter_naver_login.dart';

class NaverLoginService {

  Future<void> naverLogin() async {
    try {
      // 네이버 로그인 시도
      final NaverLoginResult result = await FlutterNaverLogin.logIn();

      // 현재 액세스 토큰 가져오기
      final NaverAccessToken res = await FlutterNaverLogin.currentAccessToken;

      // 액세스 토큰 및 토큰 타입 출력
      print("======accesToken: ${res.accessToken}");
      print("======tokenType: ${res.tokenType}");
    } catch (e) {
      // 로그인 과정에서 오류 발생 시 처리
      print("로그인 중 오류 발생: $e");
    }
  }
}

11. login_page.dart 만들기

• 이미지 다운받아 네이버 로그인 버튼 만들기

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

로그인 버튼 사용 가이드 NAVER Developers - 네이버 로그인 로그인 버튼 사용 가이드 네이버 로그인은 애플리케이션에 사용할 수 있는 네이버 로그인 버튼 기본 이미지를 제공합니다. 애플리케이션의 상황에 맞게 버튼 이미지의 디자인을 변경할 수 있지만 네이

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

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

class LoginPage extends StatelessWidget {
  final NaverLoginService _naverService = NaverLoginService(); // NaverLoginService 인스턴스 생성

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Login'),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            // Naver 로그인 버튼을 이미지로 구현
            InkWell(
              onTap: () async {
                await _naverService.naverLogin(); // 로그인 처리
              },
              child: Image.asset(
                'assets/images/btnG_완성형.png', // 이미지 경로
                width: 200, // 이미지 너비 (필요에 따라 조정)
              ),
            ),
          ],
        ),
      ),
    );
  }
}

• 직접 네이버 로그인 버튼 만들기

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

class LoginPage extends StatelessWidget {
  final NaverLoginService _naverService = NaverLoginService();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Login'),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            // Naver 로그인 버튼
            ElevatedButton(
              onPressed: () async {
                await _naverService.naverLogin(); // 로그인 처리
              },
              style: ElevatedButton.styleFrom(
                foregroundColor: Colors.white,
                backgroundColor: Colors.green, // 초록색 배경 설정
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(8),
                ),
              ),
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  SizedBox(width: 10),
                  Text(
                    'Naver 로그인',
                    style: TextStyle(fontSize: 16),
                  ),
                  SizedBox(width: 10),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

12. 로그아웃

• 코드아웃 코드 적용하기

• 통신없이 플러터로만 구현하고 있다면 로그아웃이 되었음에도 자동로그인이 될 수 있음
• 애뮬레이터의 브라우저와 토큰 관리가 별개로 이루어져있기 때문
• 통신코드 추가해서 시도하면 해결됨

Future<void> naverLogout() async {
    try {
      // 네이버 로그아웃 시도
      await FlutterNaverLogin.logOut();
      print("로그아웃 성공");
    } catch (e) {
      // 로그아웃 과정에서 오류 발생 시 처리
      print("로그아웃 중 오류 발생: $e");
    }
  }

• 버튼 만들기

ElevatedButton(
  onPressed: () async {
    await _naverService.naverLogout(); // 로그아웃 처리
  },
  style: ElevatedButton.styleFrom(
    foregroundColor: Colors.white,
    backgroundColor: Color(0xFF03C75A), // 네이버의 쨍한 초록색
    fixedSize: Size(200, 50), // 버튼의 너비를 200으로 설정 (높이는 50으로 설정)
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(0), // 모서리를 각지게 설정
    ),
  ),
  child: Text(
    '네이버 로그아웃',
    style: TextStyle(fontSize: 18), // 텍스트 크기를 18로 설정
  ),
),