1. pubspec.yaml에 라이브러리 추가하기
flutter_naver_login: ^1.8.0
2. 로그인하고 애플리케이션 등록하기
- 앱을 앱 스토어에 배포한 경우가 아니라면 안드로이드는 앱패키지 명만 입력해도 됨
- 패키지명 확인하기
위치 : android/app/src/main/AndroidManifest.xml
- 없으면 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 만들기
- 이미지 다운받아 네이버 로그인 버튼 만들기
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로 설정 ), ),
Share article
