Flutter SNS Login(Naver) 정리

송상민·2022년 11월 25일
0

Flutter

목록 보기
12/13
post-thumbnail

FlutterSNS를 통한 Login을 구현해 보았다.

꽤나 오래 걸려서 고생했는데 했던 것들을 정리해보자2.

참고


NAVER

설정

네이버도 카카오와 마찬가지로 네이버 개발자 페이지에 가입하고 등록을 해야한다.

네이버 개발자 페이지 바로가기☞


로그인 후 상단 헤더에 Application 선택


Application 선택 후 Application 목록 옆에 있는 Application 등록 누르기

애플리케이션 이름을 적어주고 사용할 API 항목 중 네이버 로그인을 선택하면 위의 창이 나온다.
필요한 개인정보를 클릭하면 된다.

저는 일단 회원이름과 이메일주소만 체크했습니다.


개인정보를 체크하고 나면 어느 환경에서 쓸 것인지 체크할 수 있다. 우리는 App에서 사용하게 될테니 AndroidiOS를 클릭하면 위와 같이 나온다.
안드로이드 다운로드 URL은 마켓에 올린게 아니기 때문에 아무렇게나 적어주고 안드로이드 앱 패키지 이름AndroidManifest에 적힌 패키지 이름을 적어준다.
iOS 다운로드 URL은 안드로이드와 같이 아무렇게나 적어주고 URL Scheme은 자신이 사용할 임의의 값을 넣어주면 된다.


등록하기를 누르면 Client IDClient Secret 값을 확인할 수 있다.


Android 설정

android/app/src/main/res/values/strings.xml을 클릭한다. 없으면 새로운 XML 파일을 만들면 된다.

클릭 후 해당 파일에 아래와 같이 코드를 입력하면 된다. 자신이 발급받은 Client_IdClient_Secret를 각각 입력하고, Client_Name에 임의의 값을 넣어준다.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="client_id">{Your Client ID}</string>
    <string name="client_secret">{Your Client Secret}</string>
    <string name="client_name">{Your Client Name}</string>
</resources>

android/app/src/main/AndroidManifest.xml을 클릭 후 아래 코드를 Application 태그 안에 입력하면 된다.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.study.social_login_app">
   <application
        android:label="social_login_app"
        android:name="${applicationName}"
        android:icon="@mipmap/ic_launcher">
        .
        .
        .
      
        <!-- 추가 -->
        <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" />
        
        .
        .
        .
    </application>
</manifest>

그리고 자신의 프로젝트에 존재하는 MainActivity.kt에 있는 FlutterActivityFlutterFragmentActivity로 바꿔주면 안드로이드는 준비가 끝이다.

import io.flutter.embedding.android.FlutterFragmentActivity

class MainActivity: FlutterFragmentActivity()

iOS 설정

cd ios
pod install	

먼저 cd ios를 통해서 ios 파일로 들어간뒤 pod을 설치해줍니다.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
				<!-- other codes -->
        <key>CFBundleURLTypes</key>
        <array>
            <dict>
                <key>CFBundleTypeRole</key>
                <string>Editor</string>
                <key>CFBundleURLSchemes</key>
                <array>
                    <string>[UrlScheme]</string>
                </array>
            </dict>
        </array>

        <key>LSApplicationQueriesSchemes</key>
        <array>
            <string>naversearchapp</string>
            <string>naversearchthirdlogin</string>
        </array>
        <key>naverServiceAppUrlScheme</key>
        <string>[UrlScheme]</string>
        <key>naverConsumerKey</key>
        <string>[ConsumerKey]</string>
        <key>naverConsumerSecret</key>
        <string>[ConsumerSecret]</string>
        <key>naverServiceAppName</key>
        <string>[ServiceAppName]</string>

        <!-- http allows configurations -->
        <key>NSAppTransportSecurity</key>
        <dict>
           <key>NSAllowsArbitraryLoads</key>
           <true/>
           <key>NSExceptionDomains</key>
           <dict>
              <key>naver.com</key>
              <dict>
                 <key>NSExceptionRequiresForwardSecrecy</key>
                 <false/>
                 <key>NSIncludesSubdomains</key>
                 <true/>
              </dict>
              <key>naver.net</key>
              <dict>
                 <key>NSExceptionRequiresForwardSecrecy</key>
                 <false/>
                 <key>NSIncludesSubdomains</key>
                 <true/>
              </dict>
           </dict>
        </dict>
    </dict>
</plist>

그리고 <your project root>ios/Runner/Info.plist에 아래 내용을 추가해준다.
그 다음 appdelegate.swift 파일의 원래 존재하던 코드 밑에 아래 코드를 추가해주면 iOS 준비 끝.

import NaverThirdPartyLogin

override func application(_ app: UIApplication, open url: URL, options: [UIApplicationOpenURLOptionsKey : Any] = [:]) -> Bool {
    var applicationResult = false
    if (!applicationResult) {
       applicationResult = NaverThirdPartyLoginConnection.getSharedInstance().application(app, open: url, options: options)
    }
    // if you use other application url process, please add code here.
    
    if (!applicationResult) {
       applicationResult = super.application(app, open: url, options: options)
    }
    return applicationResult
}

코딩

pubspec.yaml

dependencies:
	flutter_naver_login: ^1.6.0

먼저 yaml에 flutter_naver_login를 추가해준다.

Login

void naverLogin() async{
    try{
      final NaverLoginResult user = await FlutterNaverLogin.logIn();
      NaverAccessToken res = await FlutterNaverLogin.currentAccessToken;

      setState(() {
        accessToken = res.accessToken;
        tokenType = res.tokenType;
        refreshToken = res.refreshToken;
      });


      String id = user.account.email;
      String name = user.account.name;
      String tel = user.account.mobile
          .replaceAll('+82', '0')
          .replaceAll('-', '')
          .replaceAll(' ', '')
          .replaceAll('+', '');
      String sex = user.account.gender;
      String socialNo = '${user.account.birthyear}${user.account.birthday}'.replaceAll('-', '');
      String idx = user.account.id.toString();

      print('$id,$name,$tel,$sex,$socialNo, $idx');

    }catch(error){
      print('naver login error $error');
    }
  }

개인정보를 받아오고 현재 AccessToken, RefreshToken, TokenType의 정보를 받아온다.

이 정보를 서버와 통신해서 DB에 정보를 저장하거나 따로 관리하면 된다.

Logout

if(auth_kind == "NAVER"){
	var code = await FlutterNaverLogin.logOut();
}

로그아웃 부분은 대략 이렇다.

전체적인 코드는 아니지만 이 것을 활용하면 네이버 로그인을 잘 구현할 수 있을 것이다.

재밌었다!

profile
실력있는 Flutter 개발자가 되어보자

0개의 댓글