SwiftUI + 네아로

라무·2024년 3월 25일

인증절차

인증코드 얻기(Authorization Code)
a. 네이버 앱 or 브라우저의 간편 로그인 프로세스를 거쳐서 인증코드 획득(authorization code)
b. url scheme을 통해서 앱으로 돌아옴(이때 URL scheme을 통해 어플에 인증코드가 반환됨)
c. 앱에서 가지고온 인증코드로 인증 성공 여부를 판단
refresh token, access Token등 요청하여 네이버 서버로 부터 token등 획득
a. 인증 코드 획득에 성공하면 네이버 서버에서 accessToken과 refreshToken을 받아온다
b. 서버 호출 결과로 값을 받으면 델리게이트를 호출하고 호출 성공 여부를 판단
c. 호출에 성공하면 access token으로 오픈 API 호출 가능
accessToken을 통해서 다른 여러 오픈 API호출 가능
a. 오픈 API를 호출할때 네이버 서버로 부터 발급받은 access Token을 사용해서 authorization header 문자열을 구성한다

네이버에 어플 등록하기

여기에 잘 정리되어있으니까 참고해서 네이버 애플리케이션 등록을 하면 됩니다!
간단하게만 설명하기
1. naverLogin여기로 이동해서 어플을 등록
2. 등록하면 clientID와 clientSecret이 발급됩니다
cf) 아직 개발중인 앱일때 여러명이 네이버 로그인을 해야 한다면 해당 네이버 아이디를 등록해줘야 로그인이 가능합니다~!(내 어플리케이션 -> 등록한 어플 클릭 -> 멤버관리)
3.프로젝트 info로 가서 url types를 하나 추가 후 URL Schemes에 적어주면 됩니다

cf) 앱에 URL Scheme을 적용한다는 것은 특정 형태의 URL로 내 앱을 호출할 수 있다는 것
Scheme은 url에서 https://의 http에 해당한다
ex) 내 앱의 scheme이 naverLoginSample이라면 사파리같은 곳에서 naverLoginSample://~~//이런 형태로 url을 입력했을때 OS에서 해당 scheme를 가지고 실행할 수 있는 앱을 찾아서 실행시키는 것
-> 즉, 네이버 로그인을 시도하고(앱이나 브라우저를 통해서) 내 앱을 다시 돌아올 수 있도록 URL Scheme을 이용해서 설정한 것

프로젝트 셋팅

프로젝트 셋팅도 위에 블로그에 자세히 기술되어져 있으므로 보고 따라하시면 될 것 같습니다!
간단하게 설명하자면
1. pod를 통해서 sdk를 설치해줍니다
(네아로는 놀랍게 spm이 지원을 해주지 않습니다,,,ㅠ)
2. naverLogin/Pods/naveridlogin-sdk-ios/NaverThirdPartyLogin.xcframework/ios-arm64/NaverThirdPartyLogin.framework/Headers/NaverThirdPartyConstantsForApp.h
cf) 저는 이런 경로에 있었지만 프로젝트마다 다른 경우가 있는것 같습니다

3. #define(전처리기)의 값을 변경해준다
4. Info.plist에서 Queried URL Schemes에 naversearchthirdlogin과 naversearchapp을 설정해줘야 한다!!!!!!

자 여기까지 기본적인 셋팅이 끝났습니다!
이제 본격적으로 앱에 네아로를 셋팅해주도록 하겠습니다

본격적으로

App struct에 init()에서 NaverThirdPartyLogin 초기화 코드를 작성해줍니다!

init() {
        //naver
        // 네이버 앱으로 로그인 허용
        NaverThirdPartyLoginConnection.getSharedInstance()?.isNaverAppOauthEnable = true
        // 브라우저 로그인 허용
        NaverThirdPartyLoginConnection.getSharedInstance()?.isInAppOauthEnable = true
        
        // 네이버 로그인 세로모드 고정
        NaverThirdPartyLoginConnection.getSharedInstance().setOnlyPortraitSupportInIphone(true)
        
        // NaverThirdPartyConstantsForApp.h에 선언한 상수 등록
        // URL scheme
        NaverThirdPartyLoginConnection.getSharedInstance().serviceUrlScheme = kServiceAppUrlScheme
        // 클라이언트 아이디
        NaverThirdPartyLoginConnection.getSharedInstance().consumerKey = kConsumerKey
        // 시크릿 아이디
        NaverThirdPartyLoginConnection.getSharedInstance().consumerSecret = kConsumerSecret
        // 앱 이름
        NaverThirdPartyLoginConnection.getSharedInstance().appName = kServiceAppName
    }

네이버 앱 혹은 브라우저로 이동해서 사용자의 동의 이후에 다시 앱으로 이동하는 과정을 거치는데 이때 앱이 받은 URL을 호출할 핸들러를 등록해야 한다.(그게 바로 onOpenUrl)

  var body: some Scene {
        WindowGroup {
            ContentView()
                .onOpenURL { url in
                    if NaverThirdPartyLoginConnection
                        .getSharedInstance()
                        .isNaverThirdPartyLoginAppschemeURL(url)
                    {
                        // Token 발급 요청
                        NaverThirdPartyLoginConnection
                            .getSharedInstance()
                            .receiveAccessToken(url)
                    }
                }
        }
    }

viewModel만들기
네이버 로그인이 실행되었을때 실제로 토큰을 받아서 처리해줄 위임자(delegate)이 필요하다
swiftUI에서 이를 구현하기 위해서는 ViewModel에 UIApplicationDelegate와 NSObject를 상속받아야 한다

class NaverAuth: NSObject, UIApplicationDelegate,

이제 viewModel에 코드를 작성해줘야 한다
cf)이전에는 앱이 없어서 브라우저를 통해서 로그인을 시도할 경우 브라우저를 여는 코드가 따로 필요했지만 지금은 따로 필요하지 않다!!!!!!!!!!(여기서 많이 헤맸다ㅠ)

import Foundation
import NaverThirdPartyLogin

class NaverAuth: NSObject, UIApplicationDelegate, NaverThirdPartyLoginConnectionDelegate, ObservableObject {
	//MARK: - 로그인 시도
    func handleNaverLogin() {
        NaverThirdPartyLoginConnection.getSharedInstance().delegate = self
        // 이 코드만 넣어주면 앱을 통한 로그인 & 브라우저를 통한 로그인이 모두 가능하다
        NaverThirdPartyLoginConnection
            .getSharedInstance()
            .requestThirdPartyLogin()
            
    }

    //MARK: - 토큰 발급 성공
    func oauth20ConnectionDidFinishRequestACTokenWithAuthCode() {
        guard let loginInstance = NaverThirdPartyLoginConnection.getSharedInstance() else { return }
        print(#fileID, #function, #line, "- naver token : \(loginInstance.accessToken)")
        // 여기에서 서버에 accessToken을 날려줄 예정이므로 naver token의 accessToken을 가지고와야 한다.
    }
    
    //MARK: - 토큰 갱신시
    func oauth20ConnectionDidFinishRequestACTokenWithRefreshToken() {
        print(#fileID, #function, #line, "- 토큰 갱신 완료")
    }
    
    //MARK: - 로그아웃(토큰 삭제)시
    func oauth20ConnectionDidFinishDeleteToken() {
        print(#fileID, #function, #line, "- 네이버 토큰이 삭제되었습니다")
    }
    
    //MARK: - Error발생시
    func oauth20Connection(_ oauthConnection: NaverThirdPartyLoginConnection!, didFailWithError error: Error!) {
        print(#fileID, #function, #line, "- naver login error: \(error.localizedDescription)")
    }
    
}

설명을 덧붙이자면
a. handleNaverLogin() : 실제 네이버 로그인을 시도하는 부분이다
b. oauth20ConnectionDidFinishRequestACTokenWithAuthCode(): 네이버 토큰 발급을 성공하면 여기서 accessToken등을 확인할 수 있다
(ex. accessToken, refreshToken, appName 등등)
백엔드 구성에 따라 다르겠지만 보통 백엔드가 있는 실프로젝트의 경우 accessToken만 필요한 경우가 많아 내 프로젝트 같은 경우에는 accessToken만 확인했다
c. oauth20ConnectionDidFinishRequestACTokenWithRefreshToken(): 토큰을 갱신해서 받아오는 곳이다
d. oauth20ConnectionDidFinishDeleteToken(): 토큰 삭제시 여기를 탄다

유저가 네이버 로그인을 시도할 수 있도록 버튼을 만들어줍니다

var body: some View {
        Button(action: {
            naverAuth.handleNaverLogin()
        }, label: {
            Text("네이버 로그인")
        })
        .frame(height: 53)
        .frame(maxWidth: .infinity)
    }

cf) 만약에 a아이디로 로그인을 했을 때 b아이디로 로그인을 다시 시도하고 싶은 경우
이미 a아이디로 로그인한 token이 남아있기 때문에 로그인을 시도하기도 전에 이미 로그인이 되어 화면이 넘어가버린다.
이럴때는 NaverThirdPartyLoginConnection.getSharedInstance().requestDeleteToken()를 통해서 token을 지우고 다시 로그인을 시도하면 된다~!(연동해제)
이거때문에 고생 좀 해따,,,,