| 한국어 | English | 日本語 |

Pub Version Static Badge Static Badge

NaverLoginSDK

Flutter-Naver Login SDK

Naver is a leading web service in South Korea. Since almost every citizen uses it, incorporating Naver Login would be an excellent choice if you're targeting South Korean users. It supports only iOS and Android OS. Please follow the guidelines below for setup. If you like ❤ this project, it will motivate us to provide more services in the future.


Getting Started


Install

Please refer to this https://pub.dev/packages/picture_button/install for installation instructions.

flutter pub add naver_login_sdk

Common

First, visit the Naver Developer Center. Click on the Application > My Applications > Register Application button at the top of the page. Select your application and find the Client ID and Client Secret in the "Overview" section. You will need these later for registration in your Flutter project.
img

Next, click on the API Settings tab and add environments under the "Login Open API Service Environment" section. Add both iOS and Android. For iOS, you must include a URL Scheme.
(Snake or camel case is recommended. If unfamiliar, lowercase text will suffice) For the Download URL, you can enter anything if there is no specific website.
iOS URL Scheme img


iOS

iOS IDE
9.0 🔼 Xcode 9.0 🔼

Refer to the iOS Development Guide for better understanding.

Add the following code to the Info.plist file of your iOS project.
The URL Scheme value should match the URL Scheme you added earlier.

Info.plist

  <!--Url Scheme Setting-->
  <key>CFBundleURLTypes</key>
  <array>
      <dict>
          <key>CFBundleTypeRole</key>
          <string>Editor</string>
          <key>CFBundleURLSchemes</key>
          <array>
              <string>[URL Scheme]</string>
          </array>
      </dict>
  </array>
  <!--Query Scheme Setting-->
  <key>LSApplicationQueriesSchemes</key>
  <array>
      <string>naversearchapp</string>
      <string>naversearchthirdlogin</string>
  </array>

  <!--Always IPhone Device(Not used MAC)-->
  <key>LSRequiresIPhoneOS</key>
  <true/>

If you are using the overridden function func application(_ app: UIApplication, open url: URL, options:...) in your AppDelegate,
you can check the URL Scheme or return it as follows.

If there are no special conditions, simply return with super.application(...) without checking the URL Scheme.

AppDelegate.swift

  override func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {        
      if url.scheme == "[URL Scheme]" {
          return super.application(app, open: url, options: options)
      }
      
      ...

      return true
  }

Android

Target SDK JDK
API 21 🔼 11 🔼

Refer to the Android Development Guide for better understanding.
For Android, no additional settings are required. Isn't that great?

If you are using proguard-rules.pro, please configure it as follows.

-keep public class com.nhn.android.naverlogin.** {
  public protected *;
}
-keep public class com.navercorp.nid.** {
  public *;
}

Usage

import

import 'package:naver_login_sdk/naver_login_sdk.dart';

To use the NaverLoginSDK package, you must first run the initialize() function in the main() function as follows. The urlScheme parameter should be entered if developing for iOS.

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  NaverLoginSDK.initialize(
    urlScheme: urlScheme, 
    clientId: clientId, 
    clientSecret: clientSecret,
    clientName: clientName
  );

  runApp(const MyApp());
}

Login

Congratulations 🎉! You are now at the stage where you can execute 'Login.' Use the authenticate() function to log in, and the OAuthLoginCallback listener to check whether the login was successful.

NaverLoginSDK.authenticate(callback: OAuthLoginCallback(
  onSuccess: () {
    Log.d("onSuccess..");
  },
  onFailure: (httpStatus, message) {
    Log.w("onFailure.. httpStatus:$httpStatus, message:$message");
  },
  onError: (errorCode, message) {
    Log.e("onError.. errorCode:$errorCode, message:$message");
  }
));

Logout

You should also know how to 'logout' after logging in. There are two ways to do so:

  1. The logout() function only deletes the token stored on the client side. This means the information is reset only on the current smartphone.
  2. The release() function deletes tokens on both the client and server sides, resetting everything.

The logout() function does not have a callback listener, but the release() function can use the OAuthLoginCallback listener.

// logout
NaverLoginSDK.logout();

// release
NaverLoginSDK.release(callback: OAuthLoginCallback(
  onSuccess: () {
    Log.d("onSuccess..");
  },
  onFailure: (httpStatus, message) {
    Log.w("onFailure.. httpStatus:$httpStatus, message:$message");
  },
  onError: (errorCode, message) {
    Log.e("onError.. errorCode:$errorCode, message:$message");
  }
));

Profile

To retrieve the user's information after logging in, use the profile() function.
User information is delivered via the ProfileCallback listener, and you can use the NaverLoginProfile data model class to obtain the details.
Use NaverLoginProfile.fromJson(response:) to automatically parse and utilize user data.

NaverLoginSDK.profile(callback: ProfileCallback(
  onSuccess: (resultCode, message, response) {
    Log.i("onSuccess.. resultCode:$resultCode, message:$message, profile:$response");
    final profile = NaverLoginProfile.fromJson(response: response);
    Log.i("profile:$profile");
  },
  onFailure: (httpStatus, message) {
    Log.w("onFailure.. httpsStatus:$httpStatus, message:$message");
  },
  onError: (errorCode, message) {
    Log.e("onError.. message:$message");
  }
));

Functions

Name Feature Listener
initialize API Settings :x:
authenticate Login OAuthLoginCallback
refresh Token Refresh OAuthLoginCallback
logout Logout :x:
release Unlink Account OAuthLoginCallback
profile User Information ProfileCallback
getVersion Library Version Info :x:
getTokenType Token Type Info :x:
getExpireAt Token Expiry Time :x:
getAccessToken Access Token Info :x:
getRefreshToken Refresh Token Info :x:

Widgets

Naver Login Button Guide Ref.
NaverLoginButton & NaverLogoutButton Widgets extended by PictureButtonWidget.
(PictureButton was very smart widget. It could calculate image size)

login
 NaverLoginButton(
    onPressed: () => NaverLoginSDK.authenticate(),
    style: NaverLoginButtonStyle(
        language: NaverButtonLanguage.english,
        mode: NaverButtonMode.green,
        type: NaverButtonType.rectangleBar
    ),
    width: 200,
  ),
NaverButtonLanguage Output
korean

ko

english

ko

NaverButtonStyle NaverButtonMode.green NaverButtonMode.white NaverButtonMode.dark
NaverButtonType.circleIcon

circle

circle

circle

NaverButtonType.rectangleIcon

rectangle

rectangle

rectangle

NaverButtonType.rectangleBar

rectangleBar

rectangleBar

rectangleBar

NaverButtonType.rectangleWithNaverBar

rectangleWithNaverBar

rectangleWithNaverBar

rectangleWithNaverBar


login
  NaverLogoutButton(
    onPressed: () => NaverLoginSDK.logout(),
    style: NaverLogoutButtonStyle(
      language: NaverButtonLanguage.english,
      mode: NaverButtonMode.green
    ),
    width: 200,
  ),
NaverButtonStyle NaverButtonMode.green NaverButtonMode.white NaverButtonMode.dark
NaverButtonLanguage.korean

rectangleWithNaverBar

rectangleWithNaverBar

rectangleWithNaverBar

NaverButtonLanguage.english

rectangleWithNaverBar

rectangleWithNaverBar

rectangleWithNaverBar



About

Thank you for using the NaverLoginSDK package.
I was genuinely happy while making this. Lastly, I will leave a few links to my humble activities.

Repository(GitHub)
LinkedIn
Inflearn(Courses)
Youtube

Thanks💙

Libraries