네이버 로그인

카카오 로그인
구글 로그인 - Firebase 없이 GCP로 로그인하기
네이버 로그인 이슈
네이버 로그인 이슈 - Android

이번 글에서는 네이버 로그인에 대해서 구현하는 방법을 알아보도록 하겠다.
네이버 로그인은 flutter에서 간단하게 처리할 수 있는 SDK를 제공하고 있어서 빠르게 구현할 수 있다.

Naver Developer

네이버 개발자 센터를 방문하여 로그인을 진행한다.
상단 탭에 Application > 애플리케이션 등록을 클릭하여 애플리케이션 등록을 해주어야 한다.

먼저 사용할 이름을 정해준다음 아래 메뉴에서 네이버 로그인을 선택해 준다.

네이버 로그인 API가 추가되는데, 필수 또는 추가로 받고 싶은 항목이 있다면 체크해 준다.

Flutter는 안드로이드와 IOS 둘다 개발이 가능하기에 양대 플랫폼 모두 등록을 하여야 한다.

물론 단일 플랫폼 개발만 한다면 해당되는 플랫폼만 등록해도 된다.

앱 패키지 이름과 번들 ID를 등록해 주고 다운로드 URL은 아무렇게나 적어도 된다.

https://test.com 이런식으로 적어도 일단은 개발하는데는 문제가 없다.

이렇게 등록을 해주면 테스트 개발 환경까지만 사용이 가능하고 실제 배포시에는 네이버에 검수를 받아야 하기에 검수 기간도 고려하여야 한다.

Flutter

네이버 개발자 센터에서 API 등록하여 발급받은 Client ID/Client Secret 키를 안드로이드, ios 각 플랫폼에 등록을 해주어야 한다.

Android

안드로이드에서 필요한 설정이다.

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

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">{your_app_name}</string>
</resources>

IOS

IOS에서 필요한 설정이고, 카카오 로그인 사용시에는 추가로 설정이 필요하다.

ios/Runner/info.plist

해당 파일에 naverServiceAppUrlScheme은 딥링크를 설정해주는 곳인데 해당 딥링크를 사용해야 한다면 아래에 스킴 타입을 추가해 주어야 한다.

	<key>naverConsumerKey</key>
	<string>{Client ID}</string>
	<key>naverConsumerSecret</key>
	<string>{Client Secret}</string>
	<key>naverServiceAppName</key>
	<string>{your_app_name}</string>
	<key>naverServiceAppUrlScheme</key>
	<string>naver</string>

딥링크 사용할 시에 추가해주면 된다.

	<key>CFBundleURLTypes</key>
	<array>
    	<dict>
			<key>CFBundleTypeRole</key>
			<string>Editor</string>
			<key>CFBundleURLName</key>
			<string>naver</string>
			<key>CFBundleURLSchemes</key>
			<array>
				<string>naver</string>
			</array>
		</dict>
    </array>

ios/Runner/AppDelegate.swift

카카오 로그인 사용시 아래 코드를 추가해야 한다.

import NaverThirdPartyLogin

 override func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
         if url.absoluteString.hasPrefix("kakao"){
            super.application(app, open:url, options: options)
            return true
         } else if url.absoluteString.contains("thirdPartyLoginResult") {
            NaverThirdPartyLoginConnection.getSharedInstance().application(app, open: url, options: options)
            return true
         } else {
            return true
         }
     }

Dependencies

flutter_naver_login :

Code

코드는 간단하다 SDK에 static으로 로그인/로그아웃 함수가 구현되어 있어서 바로 사용하면 된다.
NaverLoginResult에는 이 외에도 다른 정보들도 담겨있다.

SignIn

 NaverLoginResult _result = await FlutterNaverLogin.logIn();
 String _id = _result.account.id,
 String _email = _result.account.email,

SignOut

FlutterNaverLogin.logOut();