💻 이 글은 Swift 5.0, Xcode Version 13.2.1 를 바탕으로 작성하였습니다.

Naver ID Login SDK for iOS

네이버 로그인 개요
https://developers.naver.com/docs/login/overview/overview.md

네이버 로그인 for iOS 공식문서
https://developers.naver.com/docs/login/ios/ios.md

Github
https://github.com/naver/naveridlogin-sdk-ios

네이버 로그인 SDK는 서드파티 애플리케이션에서 네이버 계정, 애플리케이션으로 로그인, 로그아웃, 토큰 관리, 연동 해제 등의 기능을 쉽게 구현할 수 있게 합니다.

인증 절차

네이버 아이디로 로그인은 OAuth2.0 프로토콜을 기반으로 사용자 인증 기능을 제공합니다.

1. Authorization Code 얻기
네이버 앱 또는 브라우져에서 간편 로그인 프로세스 (Authentication) 를 거쳐 Authorization Code 를 얻고, URL Scheme 으로 등록된 자신의 앱으로 코드가 포함된 URL 을 가지고 리다이렉트 됩니다. 그리고 앱에서 이 URL이 네이버 로그인을 위한 URL인지 판단합니다.

2. Authorization Code로 Token 얻기
네이버 로그인을 위한 URL이라고 판단이 되면, Authorization Code 로 네이버 서버에 Access Token 과 Refresh Token 을 요청합니다.

3. API 호출
발급받은 Access Token 을 헤더에 담아 다른 API를 요청할 수 있습니다.

요구사항

iOS 9.0 이상
XCode 9.0 이상

요구하는 환경의 버전이 상당히 낮은데, iOS용 네이버 로그인 SDK는 Objective-C...로 만들어졌습니다. 그리고 대다수의 자료들이 UIKit Lifecycle 기반이라서 구현에 조금 어려움을 겪었는데요, SwiftUI Lifecycle 로 구현하는 방법을 기술해보도록 하겠습니다.

설치방법

Cocoapods로 설치하기

프로젝트 폴더에서 Pod init → Podfile에 아래 코드를 추가 → Pod install

pod 'naveridlogin-sdk-ios'

프로젝트 설정

애플리케이션 등록

Naver Developers (https://developers.naver.com/main/) 의 [Application] 탭으로 이동해서 애플리케이션을 등록합니다. 사용할 네이버 오픈 API와 제공받을 정보를 선택하고, URL Scheme을 등록합니다. 이때 URL Scheme은 소문자로만 구성하는 것을 권장드립니다.

info.plist 설정

[Info] > [Custom iOS Target Properties]에 LSApplicationQueriesSchemes를 추가 (Array 타입)
해당 키의 아이템으로 커스텀 URL 스킴에 사용할 값인 naversearchapp, naversearchthirdlogin을 추가

URL Schemes 설정

바로 아래의 URL Types을 펼쳐 아까 등록했던 URL Scheme을 추가합니다.

상수값 설정

프로젝트 폴더에서 [Pods > naveridlogin-sdk-ios > NaverThirdPartyLogin.framework 우클릭후 패키지 내용 보기 > Headeras > NaverThirdPartyConstantsForApp.h] 를 열어 제일 아래 define된 4개의 변수를 자신의 프로젝트에 맞게 수정해줍니다.

#define kServiceAppUrlScheme    @"[앱 등록때 설정한 URL Scheme]"
#define kConsumerKey            @"[애플리케이션 정보 > Client ID]"
#define kConsumerSecret         @"[애플리케이션 정보 > Client Secret]"
#define kServiceAppName         @"[앱 이름]"

초기화

프로젝트 최상위 코드인 [project name]App.swift 의 초기화 함수 init() 에서 NaverThirdPartyLogin 초기화 코드를 작성해줍니다.

import SwiftUI
import NaverThirdPartyLogin

@main
struct NanuriApp: App {
    init() {
        // Naver SDK Initializing
 
 		// 네이버 앱으로 로그인 허용
        NaverThirdPartyLoginConnection.getSharedInstance()?.isNaverAppOauthEnable = true 
        // 브라우저 로그인 허용
        NaverThirdPartyLoginConnection.getSharedInstance()?.isInAppOauthEnable = true 
 
        // 네이버 로그인 세로모드 고정
        NaverThirdPartyLoginConnection.getSharedInstance().setOnlyPortraitSupportInIphone(true)
        
        // NaverThirdPartyConstantsForApp.h에 선언한 상수 등록
        NaverThirdPartyLoginConnection.getSharedInstance().serviceUrlScheme = kServiceAppUrlScheme
        NaverThirdPartyLoginConnection.getSharedInstance().consumerKey = kConsumerKey
        NaverThirdPartyLoginConnection.getSharedInstance().consumerSecret = kConsumerSecret
        NaverThirdPartyLoginConnection.getSharedInstance().appName = kServiceAppName
    }
    
	var body : some View {
    	WindowGroup {
	    	ContentView()
            	.onOpenURL { url in 
            		if NaverThirdPartyLoginConnection
                    		.getSharedInstance()
                            .isNaverThirdPartyLoginAppschemeURL(url) 
                    {                            
	                	// Token 발급 요청
	    	            NaverThirdPartyLoginConnection
    	    	            .getSharedInstance()
        	    	        .receiveAccessToken(url)
            		}
        }
	}
}

네이버 로그인은 로그인을 위해 네이버 앱 또는 브라우저로 이동한 후, 사용자의 동의 이후에 다시 앱으로 이동하는 과정을 거칩니다. 이때 다시 앱으로 돌아왔을 때 네이버 로그인을 처리하기 위해 .onOpenURL { ... } 다음 코드를 추가해야 합니다. 리다이렉트되어 돌아올때 갖고 있는 URL 이 네이버 로그인을 위한 URL 인지 판단을 하고 맞다면 토큰을 요청하는 것 입니다.

Delegate 구현

네이버 로그인을 구현하기 위해서는 네이버 로그인이 실행되었을때 필요한 delegate가 필요한데 스유에서 구현하기 위해서 viewModel 을 extension 했습니다. 그리고 viewModel 은 NSObject와 UIApplicationDelegate 를 상속해야 합니다.

extension MyPageViewModel : UIApplicationDelegate, NaverThirdPartyLoginConnectionDelegate {
    // 토큰 발급 성공시
    func oauth20ConnectionDidFinishRequestACTokenWithAuthCode() { ... }
    // 토큰 갱신시 
    func oauth20ConnectionDidFinishRequestACTokenWithRefreshToken() { ... }
    // 로그아웃(토큰 삭제)시 
    func oauth20ConnectionDidFinishDeleteToken() { ... }
    // Error 발생
    func oauth20Connection(_ oauthConnection: NaverThirdPartyLoginConnection!, didFailWithError error: Error!) { ... }
}

Naver Login

네이버 로그인은 NaverThirdPartyLoginConnection의 싱글턴 객체인 .getSharedInstance() 를 통해서 모든 작업이 이루어집니다!

네이버 로그인 호출

Button {
	if NaverThirdPartyLoginConnection
		.getSharedInstance()
		.isPossibleToOpenNaverApp() // Naver App이 깔려있는지 확인하는 함수
	{
		NaverThirdPartyLoginConnection.getSharedInstance().delegate = viewModel.self
		NaverThirdPartyLoginConnection
        	.getSharedInstance()
			.requestThirdPartyLogin()
	} else { // 네이버 앱 안깔려져 있을때
		// Appstore에서 네이버앱 열기
		NaverThirdPartyLoginConnection.getSharedInstance().openAppStoreForNaverApp()

	}
} label : {
	Image("naver_login")
		.resizable()
		.aspectRatio(contentMode: .fit)
}

네이버 로그인은 카카오 로그인과 다르게 .requestThirdPartyLogin() 이 실행되면 앱 설치여부를 자동으로 판단해서 네이버 앱으로 이동 또는 웹 브라우져 모달을 띄우지만, 앱스토어 이동을 위해서 따로 조건을 나누어 주었습니다.

여기서 실제 데이터의 Flow는

.requestThirdPartyLogin() 후 네이버 앱 또는 브라우져에서 네이버 계정1 로그인

앱에 사용자 정보 제공을 위한 동의

Authorization Code를 담고 있는 URL을 가지고 앱으로 돌아옴 (Redirect)

.onOpenURL { ... } 에서 URL이 네이버 로그인을 위한 URL이라고 판단되면 .receiveAccessToken(url) 를 호출해서 토큰 발급

성공적으로 토큰을 발급받은 후 아까 구현한 Delegate 내의 oauth20ConnectionDidFinishRequestACTokenWithAuthCode() 가 실행됩니다.

유저 정보 받아오기

네이버 로그인 SDK 에서는 따로 유저정보를 받아오는 함수가 정의 되어있지 않습니다. 그래서 https 요청을 이용해서 정보를 받아올 수 있습니다. 아래는 Alamofire 를 이용해서 유저 정보를 요청하는 함수입니다.

func getUserInfo() {        
        guard let tokenType = NaverThirdPartyLoginConnection.getSharedInstance().tokenType else { return }
        guard let accessToken = NaverThirdPartyLoginConnection.getSharedInstance().accessToken else { return }
        let url = "https://openapi.naver.com/v1/nid/me"
        
        AF.request(url,
                   method: .get,
                   encoding: JSONEncoding.default,
                   headers: ["Authorization": "\(tokenType) \(accessToken)"]
        ).responseJSON { [weak self] response in
            guard let result = response.value as? [String: Any] else { return }
            guard let object = result["response"] as? [String: Any] else { return }
            
            guard let name = object["name"] as? String else { return }
            guard let email = object["email"] as? String else { return }
            guard let profileimage = object["profile_image"] as? String else { return }

            self?.profileImage = URL(string: profileimage)
            self?.userMail = email
            self?.userName = name
        }
    }

토큰 관련

// Refresh Token 
let refreshToken = NaverThirdPartyLoginConnection.getSharedInstance().refreshToken
// Access Toekn 
let accessToken = NaverThirdPartyLoginConnection.getSharedInstance().accessToken

// 유효한 Token 존재 여부 확인 
NaverThirdPartyLoginConnection.getSharedInstance().isValidAccessTokenExpireTimeNow()
// Token Refreshing
NaverThirdPartyLoginConnection.getSharedInstance().requestAccessTokenWithRefreshToken()

로그아웃 (토큰 삭제)

NaverThirdPartyLoginConnection.getSharedInstance().resetToken()

연결 끊기 (연동 해제)

NaverThirdPartyLoginConnection.getSharedInstance().requestDeleteToken()

마무리

SwiftUI 로 네이버 아이디로 로그인을 구현하는 방법을 알아보았습니다. 네이버 아이디로 로그인은 SDK 자체가 오래되기도 하였고, Objective-C 를 처음 봐서 신기하기도 했습니다😅

틀린 정보 또는 궁금한 점이 있다면 댓글 부탁드립니다! 읽어주셔서 감사합니다‼️

Author And Source

이 문제에 관하여([iOS] 네이버 아이디로 로그인 구현하기 with SwiftUI), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@parkgyurim/iOS-SwiftUI-Naver-Login

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

[iOS] 네이버 아이디로 로그인 구현하기 with SwiftUI