[Flutter] Client Credentials Grant 3 - 네이버 로그인

류재성

Jun 07, 2024

[Flutter] Client Credentials Grant 3 - 네이버 로그인

Contents

1. 기본 설정 2. 플러터 설정 3. 서버와 통신하기

1. 기본 설정

1.1 내 애플리케이션 만들기

NAVER Developers

네이버 오픈 API들을 활용해 개발자들이 다양한 애플리케이션을 개발할 수 있도록 API 가이드와 SDK를 제공합니다. 제공중인 오픈 API에는 네이버 로그인, 검색, 단축URL, 캡차를 비롯 기계번역, 음성인식, 음성합성 등이 있습니다.

https://developers.naver.com/main/

필요한 데이터를 체크한다.

플러터는 안드로이드, iOS 둘 다 사용 가능하다. 지금은 안드로이드만 사용할 예정이라 안드로이드만 체크한다.

다운로드 URL 과 패키지 이름을 넣는다. 테스트용이기 때문에 임의의 다운로드 URL 주소를 넣는다.

패키지 주소는 플러터의 build.gradle 에서 확인할 수 있다.

Client ID 와 Client Secret 을 확인할 수 있다.

2. 플러터 설정

2.1 strings.xml 설정

android/app/src/main/res/values/strings.xml


<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="client_id">[client_id]</string>
    <string name="client_secret">[client_secret]</string>
    <string name="client_name">[client_name]</string>
</resources>

strings.xml 을 생성 후 위의 코드를 넣어준다.

💡

strings.xml 에 값을 직접 입력해놓는다. Client_name은 임의의 값을 넣어도 된다.

2.2 AndroidManifest.xml 설정

android/app/src/main/AndroidManifest.xm


        <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" />

AndroidManifest.xml에 meta-data를 넣는다.

2.3 flutter_naver_login 라이브러리 적용

flutter_naver_login | Flutter package

A Flutter plugin for using the native Naver Login SDKs on Android and iOS.

https://pub.dev/packages/flutter_naver_login

pub.dev 의 네이버 로그인 라이브러리를 설치한다.

pubspec.yaml 에 flutter_naver_login 라이브러리를 적용 후 pub get을 누른다.

3. 서버와 통신하기

3.1 네이버 토큰 받기

login_page.dart


void NaverLogin() async {
  try {
    // 1. 로그인 (토큰 가져오기)
    await FlutterNaverLogin.logIn();  // 네이버 로그인 시도
    NaverAccessToken token = await FlutterNaverLogin.currentAccessToken; // 토큰 가져오기

    print('네이버계정으로 로그인 성공 ${token.accessToken}');

  } catch (error) {
    print('네이버계정으로 로그인 실패 $error');
  }

네이버에서 받은 토큰을 확인할 수 있다.

3.2토큰 서버로 보내기

login_page.dart


    final response = await dio.get("/oauth/naver/callback",
        queryParameters: {"accessToken": token.accessToken});

userContoller


    @GetMapping("/oauth/naver/callback")
    public ResponseEntity<?> oauthNaverCallback(@RequestParam("accessToken") String naverAccessToken){
        System.out.println("스프링에서 받은 카카오토큰 : "+naverAccessToken);

        return null ;
    }

스프링 서버에서 토큰을 받았다.

3.3 토큰 검증 후 로그인

UserController


    @Transactional
    public String 네이버로그인(String naverAccessToken) {
        // 1. RestTemplate 객체 생성
        RestTemplate rt = new RestTemplate();

        // 2. 토큰으로 사용자 정보 받기 (PK, Email)
        HttpHeaders headers = new HttpHeaders();
        headers.add("Content-type", "application/x-www-form-urlencoded;charset=utf-8");
        headers.add("Authorization", "Bearer " + naverAccessToken);

        HttpEntity<MultiValueMap<String, String>> request =
                new HttpEntity<>(headers);

        ResponseEntity<NaerResponse.NaverUserDTO> response = rt.exchange(
                "https://openapi.naver.com/v1/nid/me",
                HttpMethod.GET,
                request,
                NaerResponse.NaverUserDTO.class);

        // 3. 해당정보로 DB조회 (있을수, 없을수)
        String username = "Naver_" + response.getBody().getResponse().getId();
        User userPS = userJPARepository.findByUsername(username)
                .orElse(null);

        // 4. 있으면? - 조회된 유저정보 리턴
        if (userPS != null) {
            return JwtUtil.create(userPS);
        } else {
            // 5. 없으면? - 강제 회원가입
            User user = User.builder()
                    .username(username)
                    .password(UUID.randomUUID().toString())
                    .email(response.getBody().getResponse().getEmail())
                    .provider("naver")
                    .build();
            User returnUser = userJPARepository.save(user);
            return JwtUtil.create(returnUser);
        }
    }

NaverLogin


package shop.mtcoding.blog.user;

import com.fasterxml.jackson.annotation.JsonProperty;
import lombok.Data;

public class NaerResponse {
    @Data
    public static class TokenDTO {
        @JsonProperty("access_token")
        private String accessToken;

        @JsonProperty("refresh_token")
        private String refreshToken;

        @JsonProperty("token_type")
        private String tokenType;

        @JsonProperty("expires_in")
        private String expiresIn;

    }

    @Data
    public static class NaverUserDTO {
        private String resultcode;
        private String message;
        private ResponseDTO response;

        @Data
        class ResponseDTO {
            private String id;
            private String email;
        }
    }

}

UserController


   @GetMapping("/oauth/naver/callback")
    public ResponseEntity<?> oauthNaverCallback(@RequestParam("accessToken") String naverAccessToken){
        System.out.println("스프링에서 받은 카카오토큰 : "+naverAccessToken);

        String blogAccessToken = userService.네이버로그인(naverAccessToken);

        return ResponseEntity.ok().header("Authorization", "Bearer "+blogAccessToken).body(new ApiUtil(null));
    }

3.4 토큰 디바이스 저장


void NaverLogin() async {
  try {
    // 1. 로그인 (토큰 가져오기)
    await FlutterNaverLogin.logIn(); // 네이버 로그인 시도
    NaverAccessToken token =
        await FlutterNaverLogin.currentAccessToken; // 토큰 가져오기

    print('네이버계정으로 로그인 성공 ${token.accessToken}');

    //2. 토큰 서버로 보내기
    final response = await dio.get("/oauth/naver/callback",
        queryParameters: {"accessToken": token.accessToken});

    // 3. 토큰 응답받기
    final blogAccessToken = response.headers["Authorization"]!.first;
    print("blogAccessToken : ${blogAccessToken}");

    // 4. 시큐어 스토리지에 저장
    secureStorage.write(key: "blogAccessToken", value: blogAccessToken);
  } catch (error) {
    print('네이버계정으로 로그인 실패 $error');
  }
}