naver_login_sdk 1.0.3

Flutter-Naver Login SDK. Naver is a leading web service in South Korea.

| 한국어 | English | 日本語 |

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
• Common Setting
• Usage
• Login
• Logout
• User Profile
• Functions
• LoginButtonWidget
• LogoutButtonWidget
• About

Install

Please refer to this https://pub.dev/packages/naver_login_sdk/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.


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

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	❌
authenticate	Login	OAuthLoginCallback
refresh	Token Refresh	OAuthLoginCallback
logout	Logout	❌
release	Unlink Account	OAuthLoginCallback
profile	User Information	ProfileCallback
getVersion	Library Version Info	❌
getTokenType	Token Type Info	❌
getExpireAt	Token Expiry Time	❌
getAccessToken	Access Token Info	❌
getRefreshToken	Refresh Token Info	❌

🔼

Widgets

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

If you want naverColor, try it.

  backgroundColor: Theme.of(context).naverColor,

NaverLoginButton

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

NaverButtonLanguage	Output
korean
english

NaverButtonStyle	NaverButtonMode.green	NaverButtonMode.white	NaverButtonMode.dark
NaverButtonType.circleIcon
NaverButtonType.rectangleIcon
NaverButtonType.rectangleBar
NaverButtonType.rectangleWithNaverBar

🔼

NaverLogoutButton

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

NaverButtonStyle	NaverButtonMode.green	NaverButtonMode.white	NaverButtonMode.dark
NaverButtonLanguage.korean
NaverButtonLanguage.english

🔼

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💙