프로젝트에서 내가 할 일이 주어졌다!
소셜로그인 중 가장 데이터가 잘 나와있는 네이버로그인을 배정해주셨다.
바로 개발에 들어가기 앞서 정리하면서 진행하자!

네이버 로그인 연동하기!

네이버개발자센터
위의 링크로 들어가서 진행한다.

📌먼저 API 생성하자.

1. 네이버 로그인 페이지에서 오픈API를 신청하자!

2. 이름은 어플이름을 작성하고 사용할 API를 선택하자
사용 API는 추후에 수정이 가능하니 편하게 선택하고 넘어가도 된다.

3. 다운로드 URL은 임시주소를 넣고(www.test.com 이런 임시주소 가능)
앱 패키지 이름을 입력한다.
이때 패키지 이름은 개발폴더/android/app/src/main/AndroidManifest.xml
의 최 상단에 있는 package명을 기록해주었다.

4. 생성 완료 후 확인
상단의 어플리케이션에서 내 어플리케이션으로 들어가서 확인 가능하다.
이 곳에서 요청정보 수정도 가능하다.

📌네아로 SDK구성하자.

네아로 SDK 가이드문서

요구사항 확인

네아로SDK를 사용하려면 다음과 같은 환경이 필요합니다.

SDK: Android API 21 이상
JDK: JDK 11 이상
IDE: Android Studio

내 SDK 환경 확인은 안드로이드 스튜디오 SDK매니저에서 확인했다.

JDK는 cmd창에 java --version을 입력해서 확인했다.

IDE는 안드로이드 스튜디오 설치했으니 문제 없음~

개발환경 설정

가이드 문서의 3.2.를 참고하여 Gradle 에서 설정을 하였다.

1. 파일을 다운받아서 libs 폴더안에 복사하기
   

2. build.gradle 파일에 dependencies 추가 : implementation files('libs/oauth-5.9.0.aar')

문제발생

가이드 문서가 코틀린 언어로 작성되어 있어서 해석이 안된다.
잠시 고민에 빠졌다가 다른 방안을 찾아보았다.

나의 빛 나의 소금 구글은 답을 주었다

📌네이버로그인 라이브러리를 활용하자.

역시 답은 있었다.

크로스플랫폼코리아-네이버로그인

깃허브에 있는 가이드를 따라서 다시 진행했다.
물론 상단에 설정한 개발환경은 다시 되돌려놨다.

1. 라이브러리 설치

cd로 프로젝트 폴더에 접근해서 cmd창에 하단의 코드를 실행했다.

npm install @react-native-seoul/naver-login --save

2. 사용법

나는 안드로이드로 진행하기때문에 별도의 설정이 필요없이 바로 코드를 사용했다.

라이브러리에 자세히 설명이 나와있어 그대로 따라서 진행했다.
예제 프로젝트를 클릭해서 App.tsx파일을 참고했다.

// 로그인
const login = async (): Promise<void> => {
    const {failureResponse, successResponse} = await NaverLogin.login({
      appName,
      consumerKey,
      consumerSecret,
      serviceUrlScheme,
    });
    setSuccessResponse(successResponse);
    setFailureResponse(failureResponse);
  };

로그인을 수행할 때 NaverLogin객체의 login에 앱이름, 키, 시크릿키, url 스킴을 보내면 성공과 실패 상태를 반환하는 코드로 구성되어 있다.

serviceUrlScheme의 경우는 ios에서만 존재하기 때문에 어떤 로직으로 해당 값을 처리하나 확인하니

//@react-native-seoul index.js

import { NativeModules, Platform } from "react-native";
var RNNaverLogin = NativeModules.RNNaverLogin;
var login = function (_a) {
    var appName = _a.appName, consumerKey = _a.consumerKey, consumerSecret = _a.consumerSecret, serviceUrlScheme = _a.serviceUrlScheme, _b = _a.disableNaverAppAuth, disableNaverAppAuth = _b === void 0 ? false : _b;
    return Platform.OS === "ios"
        ? RNNaverLogin.login(serviceUrlScheme, consumerKey, consumerSecret, appName, disableNaverAppAuth)
        : RNNaverLogin.login(consumerKey, consumerSecret, appName);
};
var NaverLogin = {
    login: login,
    logout: logout,
    deleteToken: deleteToken,
    getProfile: getProfile,
};
export default NaverLogin;

플랫폼이 ios인가에 따라서 파라미터를 다르게 보내서 처리하고 있었다.

일단 해당 코드를 확인하고 우리 코드로 돌아왔다.

3. 사용하기

https://developers.naver.com/apps/#/list

일단 안드로이드에서 사용하기 위해 네이버에서 받은 API 관련 정보를 입력했다.

//안드로이드 전달값
const androidKeys = {
        consumerKey: "{{Client ID값 입력}}",
        consumerSecret: "{{Client Secret값 입력}}",
        appName: "{{앱이름 입력}}"
};
//네이버 로그인 코드
const naverSignIn = async(props:any):Promise<void> => {
    try{
        const {failureResponse, successResponse} = await NaverLogin.login(props);
        const token = successResponse;
        const userAccessToken = token!.accessToken;
        const userInfo = await NaverLogin.getProfile(userAccessToken);
        const userEmail = userInfo.response.email;
        const userAge = userInfo.response.birthyear;
        const userProfileImg = userInfo.response.profile_image;
        const userGender = userInfo.response.gender;
        const userNickNmae = userInfo.response.nickname;
        
        if (userAccessToken) {
            navigation.navigate("Tabs");
        }
        
        setResult(JSON.stringify(token));
        
        } catch (error) {
            console.error(error);
        }
    }

네이버 로그인은 키를 보내면 성공과 실패를 다음의 형태로 반환한다.
{failureResponse, successResponse}

여기서 로그인 토큰은 successResponse에 저장되어 있다.
토큰은 하단처럼 구성되어있다.

successResponse?: {
        accessToken: string;
        refreshToken: string;
        expiresAtUnixSecondString: string;
        tokenType: string;
    };

여기서 아직 어플의 API가 구성이 완료되지 않았으므로 기존의 코드와 동일하게 구성될 수 있도록 카카오로그인과 동일한 값을 저장하도록 나머지 값을 저장했다.

실패시 반환값failureResponse은 다음과 같다.

failureResponse?: {
        message: string;
        isCancel: boolean;
        /** Android Only */
        lastErrorCodeFromNaverSDK?: string;
        /** Android Only */
        lastErrorDescriptionFromNaverSDK?: string;
    };

아직 해당정보를 이용한 적은 없지만 message는 이용하게 되지 않을까 싶다.

📌로그인 성공

- 및 소감

첫 기능구현에 라이브러리를 이용해서 솔직히 너무 간단하지 않았나 싶었지만,
토큰에 대한 이해가 부족해서 어떤 값이 넘어오는지 찾아보는데 좀 오래걸렸다.

점점 찾아보다 보면 머리에 쌓이겠지 하는 마음으로
오늘도 코딩한다.