[Flutter] 네이버 로그인 방법(NaverLogin) #NaverLoginSDK #naver_login_sdk #네이버로그인패키지

안녕하세요. 플러터에서 네이버 로그인하는 방법에 대해서 설명드리려 합니다.

우리나라 유저를 확보하기 위해서 '네이버 로그인'은 필수라고 해도 과언이 아니죠.

 

Naver에서는 현재 Flutter로 만들어진 API를 제공하지 않고 있습니다.

모바일 개발자인 저는 그러한 점을 해소시키기 위해서 iOS, Android를 지원하는 플러터 네이버 로그인 패키지를 만들게 되었습니다. (이미 훌륭한 패키지가 하나 있는 것을 보았지만, 더욱 이용하기 쉬웠으면 좋겠다는 취지로 개발하였답니다)

 

그 이름은 'NaverLoginSDK'입니다.

링크: https://pub.dev/packages/naver_login_sdk

 

링크 내부에 들어가시면 자세한 설명을 적어놓았습니다. (한국어 번역본이 있습니다)

그래서 핵심적인 기능만 블로그를 통해 설명을 드리고자 합니다.

 

출처:네이버

 

패키지 추가

flutter pub add naver_login_sdk

 

 

설정

제일 먼저, 'void main'함수 내부에서 `initialize`함수를 사용해서 미리 설정을 해주어야 합니다.

섬세하신 분이라면 해당 코드를 인터넷이 연결된 시점에서 선언해주실 것을 권장합니다.

iOS환경에서는 'urlScheme'파라메터를 꼭 설정해주어야 합니다.

Android환경에서는 'clientId', 'clientSecret'만 설정하면 되겠습니다. 'clientName'은 설정을 하지 않아도 괜찮습니다.

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

  runApp(const MyApp());
}

 

 

로그인

로그인은 `authenticate`함수를 사용해서 요청합니다. 괄호 내부에 callback파라메터를 설정하면 로그인을 성공했는지 실패했는지 EventListener를 받을 수 있도록 구성하였습니다.

'0.0.8'버전부터는 onSuccess함수만 required하도록 설정하였고, iOS와 Android는 서로 onError, onFailure를 받는 것이 약간의 차이가 있어서 되도록이면 모두 설정해주는 것이 코드 안정성을 높일 수 있습니다.

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`과 `release`함수 두 개가 있습니다. 로그인을 해서 정보를 확보했을때, 'logout'은 겉모습만 없애고, 'release'는 겉,속모습 모두 없앤다고 이해하시면 쉽습니다. (1) 그래서 'logout'한 이후에 다시 로그인을 요청하면 곧바로 이전 로그인했던 계정으로 로그인이 완료되고, (2) 'relelase'한 이후 다시 로그인을 요청하면 다시 새롭게 어떤 계정으로 로그인할 것인지 선택하는 창이 표출되게 됩니다.

// 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`함수를 호출하면 유저 정보를 불러오게 됩니다. onSuccess함수의 인자 중 'response'에 JSON형식의 유저 데이터가 전달되는데요. NaverLoginProfile이라는 클래스 객체를 만들어주시고, NaverLoginProfile.fromJson 내부에 response를 넣어주시면 자동으로 파싱되도록 구성하였습니다. 편리하시죠~?

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");
  }
));

 

 

플러터를 사용하는 누군가가 네이버 로그인을 편리하게 사용하실 상상을 하면서 만드니 정말 행복했습니다.

이용해주셔서 감사드리고, 항상 건강하시고 행복한 개발하시길 바랍니다.

 

감사합니다💙