1. pubspec.yaml에 라이브러리 추가하기
flutter_naver_login: ^1.8.02. 로그인하고 애플리케이션 등록하기
- 앱을 앱 스토어에 배포한 경우가 아니라면 안드로이드는 앱패키지 명만 입력해도 됨
- 패키지명 확인하기
위치 : 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
