SwiftUI - Naver Login

 

지난 구글, 카카오 로그인 에 이어서 Naver API 를 이용한 로그인 (네아로) 를 진행 하고자 합니다.

SwiftUI 방식으로 진행 했습니다. 운영하면서 다른내용이 나온다면 추가 하겠습니다.

---

1. 설치

pod 'naveridlogin-sdk-ios'

 

 

2. 셋팅

네이버 회원가입, 어플리케이션 추가는 완료 했다는 가정하에 진행입니다.

info.plist 파일에 다음과 같이 스키마를 추가 해줍니다.

<key>LSApplicationQueriesSchemes</key>
<array>
    <string>naversearchapp</string>
    <string>naversearchthirdlogin</string>
</array>

*iOS 14 부터 LSApplicationQueriesSchemes 키값이 Queried URL Schemes 으로 바뀌었습니다 (상단 이미지 참고)
Source Code 방식으로 수정할경우 LSApplicationQueriesSchemes 키 값으로 추가 합니다. (Property List 방식으로 추가 했습니다)

 

아래 이미지 연동 규격서에 알맞게 해당 파일을 직접 수정해주는 작업을 해야합니다.

SDK 가 objective-c 으로 만들어져 있으며 해당 헤더파일을 열어서 수정 해줍니다.

Pods -> naveridlogin-sdk-ios -> frameworks -> NaverThirdPartyLogin -> Show In Finder

해당 파일 Headers 에 있는 NaverThirdPartyConstantsForApp  파일을 열어줍니다.

해당 파일에있는 kServiceAppUrlScheme, kConsumerKey, kConsumerSecret 값을 바꿔줍니다

kServiceAppUrlScheme: URL 스키마 값

kConsumerKey: Naver Developers 내 어플리케이션에있는 Client ID

kConsumerSecret: Naver Developers 내 어플리케이션에 있는 Client Secret

 

설정후 실행시에 다음과 같은 오류가 발생할수 있습니다.

 

project -> Build Settings -> User Script Sandboxing 값 No 로 변경

 

3. 소스 추가

필자는 SwiftUI 로 정말 간단하게, 일회성으로 실행이 가능하도록만 구현했습니다.

추가적으로 필요한 사항은 지속적으로 업데이트 하겠습니다.

 

Appdelegate, SceneDelegate 상에 다음 코드를 추가 합니다. 필자는 SwiftUI @main 에서 처리 했습니다.

import SwiftUI
import NaverThirdPartyLogin

@main
struct TestApp: App {
    
    init() {
        let instance = NaverThirdPartyLoginConnection.getSharedInstance()
        instance?.isNaverAppOauthEnable = true // 네이버 앱으로 인증
//      instance?.isInAppOauthEnable = true // Safari 웹으로 인증
        instance?.isOnlyPortraitSupportedInIphone()

        instance?.serviceUrlScheme = "" //  URL 스키마 값
        instance?.consumerKey = "" // Naver Developers 내 어플리케이션에있는 Client ID
        instance?.consumerSecret = "" // Naver Developers 내 어플리케이션에 있는 Client Secret
        instance?.appName = "" // 앱 이름
    }
    
    var body: some Scene {
        WindowGroup {
            ContentView().onOpenURL(perform: { url in
                NaverThirdPartyLoginConnection
                    .getSharedInstance()
                    .receiveAccessToken(url)
            })
        }
    }
}

 

호출 영역 (버튼 클릭시)

카카오와 다른 로그인 API 와 다르게, 네이버 같은경우 결과 값이 NaverThirdPartyLoginConnectionDelegate 상에서 들어오기에 해당

UIViewControllerRepresentable 를 이용하여 처리 해줍니다.

@State var isNaverLogin: Bool = false
    
var body: some View {
    ZStack {

        if isNaverLogin {
            NaverLoginRepresentable()
        }

        VStack(spacing: 0) {
            Text("네이버로 시작하기")
                    .foregroundColor(Color.white)
                    .font(Font.system(size: 16, weight: .bold, design: .default))
                    .padding(.vertical, 16)
                    .onTapGesture {
                        isNaverLogin = true
                    }
        }
    }
}

 

결과값 수신 (API 통신 로직 생략)

import Foundation
import UIKit
import NaverThirdPartyLogin
import SwiftUI

struct NaverLoginRepresentable: UIViewControllerRepresentable {
    
    func makeUIViewController(context: UIViewControllerRepresentableContext<NaverLoginRepresentable>) -> NaverLoginViewController {
       let naverLoginViewController = NaverLoginViewController()

        return naverLoginViewController
    }
    
    func updateUIViewController(_ uiViewController: UIViewControllerType, context: Context) { }
}

class NaverLoginViewController: UIViewController {

    let naverLoginInstance = NaverThirdPartyLoginConnection.getSharedInstance()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        self.naverLoginInstance?.delegate = self
        self.naverLoginInstance?.requestThirdPartyLogin()
    }
}


extension NaverLoginViewController: NaverThirdPartyLoginConnectionDelegate {
	// 로그인 성공시 메소드 (추가적인 API 통신을 진행하여 정보를 가져옴)
    func oauth20ConnectionDidFinishRequestACTokenWithAuthCode() {
        print("Success login")
    }
    
    // 토큰을 재 갱신하는경우 메소드
    func oauth20ConnectionDidFinishRequestACTokenWithRefreshToken() {
        print("Success RefreshToken")
    }
    
    // 로그아웃 (토큰 삭제) 완료시 메소드
    func oauth20ConnectionDidFinishDeleteToken() {
        print("Success logout")
        naverLoginInstance?.requestDeleteToken()
    }
    
    // 모든 에러관련한 메소드
    func oauth20Connection(_ oauthConnection: NaverThirdPartyLoginConnection!, didFailWithError error: Error!) {
        print("error = \(error.localizedDescription)")
        naverLoginInstance?.requestDeleteToken()
    }
}

 

 

해당 함수 같은경우 네이버 앱을 통해 인증을 완료했을때 반응 합니다.

토큰, 기타 사용자 정보를 가져오기 위해서는 API 통신을 이용하여 데이터를 가져올수 있습니다.

func oauth20ConnectionDidFinishRequestACTokenWithAuthCode() {
    print("Success login")
}

 

해당 정보를 가져오는 API 는 다음 규격으로 호출하여 가져올수 있습니다.

func getNaverUserInfo() {
    guard let isValidAccessToken = naverLoginInstance?.isValidAccessTokenExpireTimeNow() else { return }

    if !isValidAccessToken {
        return
    }

    guard let tokenType = naverLoginInstance?.tokenType else { return }
    guard let accessToken = naverLoginInstance?.accessToken else { return }
    guard let refreshToken = naverLoginInstance?.refreshToken else { return }

    let urlStr = "https://openapi.naver.com/v1/nid/me"
    let url = URL(string: urlStr)!

    let request = AF.request(url, method: .get, parameters: nil, encoding: JSONEncoding.default, headers: ["Authorization":  "\(tokenType) \(accessToken)"])

    request.responseJSON { 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 id = object["id"] as? String else {return}
    }
}

 

참고

https://doggyfootstep.tistory.com/22

[iOS] 네이버 로그인 SDK 연동하기

https://developers.naver.com/docs/login/ios/ios.md

IOS - LOGIN

https://developer-fury.tistory.com/18

[Swift] Naver 로그인 API 사용하기(네아로 사용하기)