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.
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:
- The
logout()
function only deletes the token stored on the client side. This means the information is reset only on the current smartphone. - 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)
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💙