네이버 간편 로그인 연동

 

1. 네이버 개발자 사이트 앱 등록 (스킵)

네이버 개발자 사이트 접속 후 앱 등록

https://developers.naver.com/

NAVER Developers

 

앱 등록

다운로드 URL은 배포전이라면 회사 홈페이지 주소를 링크해 둬도 되고, URL Scheme은 소문자로 구성하는것을 권장한다. (대문자일경우 사파리에서 인증이 잘 안되는 이슈가 있음)

XCode 설정시에 URL Scheme 설정을 해주는 부분이 있으니 기억해 두도록 하자.

 

2. SDK 설치

코코아팟으로 SDK 설치합니다.

참조 : https://dchkang83.tistory.com/104

iOS/Xcode 14X - 2. CocoaPods 추가

 

네이버 개발자 문서를 보면 아래와 같이 친절히 설명되어 있습니다.

참조 : https://developers.naver.com/docs/login/sdks/sdks.md

target 'gobang' do
  ...
  # 네이버
  pod 'naveridlogin-sdk-ios'
  ...
end

SDK 설치가 완료되었다면 Xcode를 재시작 해주시고 라이브러리가 인식할 수 있도록 해줍니다.

 

3. Xcode 설정

3.1. 앱 실행 허용 목록 설정하기

iOS 9.0 이상에서 iOS SDK를 통해 네이버 등 애플리케이션을 실행시키는 기능을 이용하려면 info.plish 파일에 앱 실행 허용 목록을 설정해야 한다고 합니다.

 

Info -> Open As -> Source Code

 

info.plist 에 LSApplicationQueriesSchemes를 추가하고 해당 키의 item으로 naversearchapp, naversearchthirdlogin 추가

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    ...
    <key>LSApplicationQueriesSchemes</key>
    <array>
        <string>kakaokompassauth</string>
        <string>kakaolink</string>
        <string>naversearchapp</string>
        <string>naversearchthirdlogin</string>
    </array>
    ...
</dict>
</plist>

 

3.2. URL Schemes 설정하기

네이버계정을 통한 인증과 네이버를 통한 앱 실행을 위해 URL Schemes 설정을 해줘야 합니다.

TARGETS -> Info -> URL Types 에서 `+`를 눌러 추가해 주고 URL Schemes 항목에는 naver 개발자 사이트에서 입력한 URL Schemes(naverlogin)를 입력해주고 identifier 항목도 채워주도록 한다.

 

4. 코코아팟 - 환경 구성

https://developers.naver.com/docs/login/ios/ios.md 사이트에 따르면 NaverThirdPartyConstantsForApp.h의 상수를 수정해 줘야 한다고 하는데.. 이렇게 하면 실제 실무에서 사용하기 힘들듯하다.

필자 같은 경우에는 AppDelegate에서 설정을 해줘도 되지만 다른방식으로 설정을 진행하였다. (4.5. 참조!!)

4.1. ~ 4.4. 까지는 하나의 방식일뿐 필자는 사용하지 않는다!

4.1. NaverThirdPartyLogin에서 Finder 열기

Pods -> naverilogin-sdk-ios -> NaverThirdPartyLogin -> Show In Finder

Pods -> naverilogin-sdk-ios -> NaverThirdPartyLogin -> Show In Finder

 

4.2. NaverThirdPartyConstantsForApp.h 설정 변경

 

4.3. 상수 수정

 

4.4. AppDelegate 환경 설정

import NaverThirdPartyLogin

@main
class AppDelegate: UIResponder, UIApplicationDelegate {
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.
        
        ...
        let instance = NaverThirdPartyLoginConnection.getSharedInstance()
        
        // 네이버 앱으로 인증 방식 활성화
        instance?.isNaverAppOauthEnable = true
        
        // SafariViewController로 인증 방식 활성화
        instance?.isInAppOauthEnable = true
        
         // 아이폰에서 인증 화면을 세로모드에서만 적용
        instance?.isOnlyPortraitSupportedInIphone()
        
        instance?.serviceUrlScheme = {Scheme}
        instance?.consumerKey = {Client ID}
        instance?.consumerSecret = {Client Secret}
        instance?.appName = {앱 이름}
        
        return true
    }
    ...
}

 

4.5. 앱의 진입 형태에 따라서 설정

앱 진입부 InitViewController를 설정하고 로컬,개발,스테이징,운영 선택지에 따라서 설정하도록 하였다.

https://dchkang83.tistory.com/124

iOS/WebView/Project - 서버별 테스트 환경 만들기#11

 

`로컬,개발,스테이징,운영` 버튼을 선택할때 아래 코드를 통해서 인증에 대한 초기화를 해주었다.

let instance = NaverThirdPartyLoginConnection.getSharedInstance()

// 네이버 앱으로 인증 방식 활성화
instance?.isNaverAppOauthEnable = true

// SafariViewController로 인증 방식 활성화
instance?.isInAppOauthEnable = true

 // 아이폰에서 인증 화면을 세로모드에서만 적용
instance?.isOnlyPortraitSupportedInIphone()

instance?.serviceUrlScheme = {로컬 Scheme}
instance?.consumerKey = {로컬 Client ID}
instance?.consumerSecret = {로컬 Client Secret}
instance?.appName = {로컬 앱 이름}

 

그밖에도 User-Defined에 운영환경에 따른 변수를 추가하고 (https://dchkang83.tistory.com/154)

https://leechanho.tistory.com/48 블로그의 내용처럼 추가해서 사용도 가능하다.

 

5. SceneDelegate 설정

네이버는 AppDelegate에서 해주는것 같은나.. 카카오처럼 SceneDelegate에서 해도 괜찮은듯해서 옮겨서 사용하고 있다!

import NaverThirdPartyLogin

class SceneDelegate: UIResponder, UIWindowSceneDelegate {
    ....
    func scene(_ scene: UIScene, openURLContexts URLContexts: Set<UIOpenURLContext>) {
        // 네이버 로그인 화면이 새로 등장 -> 토큰을 요청하는 코드
        let result = NaverThirdPartyLoginConnection.getSharedInstance().receiveAccessToken(URLContexts.first?.url)
        if result == CANCELBYUSER {
            Utils.Log("result : \(result)")
        }
    }
    ...
}

 

6. 로그인,  로그아웃, 리플래시,  유저 정보 확인 및 가져오기

6.1. 로그인

naverLoginInstance?.delegate = self 이부분때문에 좀 헤멧다.. self를 넣어주지 않으면 NaverThirdPartyLoginConnectionDelegate 상속을 통해 선언함 함수부가 타지 않는것으로 확인되어 self를 넣어주었다.

뭔가 잘못했겟지! 하지만 시간 없으니 일단 요렇게만 넣고 패스하자!

let naverLoginInstance = NaverThirdPartyLoginConnection.getSharedInstance()

// 반드시 self 해줘야함.. 안그럼 delegate 못타는듯??
naverLoginInstance?.delegate = self
let accessToken = naverLoginInstance?.accessToken

 

6.2. 로그아웃

NaverThirdPartyLoginConnection.getSharedInstance()?.resetToken()

 

6.3. 연동해제

NaverThirdPartyLoginConnection.getSharedInstance()?.requestDeleteToken()

 

6.4. 이벤트 등

extension MainViewController: NaverThirdPartyLoginConnectionDelegate {
    ...
    func oauth20ConnectionDidFinishRequestACTokenWithAuthCode() {
        // 로그인 성공 (로그인된 상태에서 requestThirdPartyLogin()를 호출하면 이 메서드는 불리지 않는다.)
        print("로그인 성공!!")
        
    }
    
    func oauth20ConnectionDidFinishRequestACTokenWithRefreshToken() {
        // 로그인된 상태(로그아웃이나 연동해제 하지않은 상태)에서 로그인 재시도
        print("리프레시 토큰")
    }
    
    func oauth20ConnectionDidFinishDeleteToken() {
        // 연동해제 콜백
        print("로그아웃")
//        getInfo()
    }
    
    func oauth20Connection(_ oauthConnection: NaverThirdPartyLoginConnection!, didFailWithError error: Error!) {
        //  접근 토큰, 갱신 토큰, 연동 해제등이 실패
        print("---ERROR: \(error.localizedDescription)---")
    }
    ...
}

 

성공!! 짝짝짝!

 

간단히만 처리해 두고 실제 적용할때 리팩토링좀 해야겠다.

 

 

참조

https://www.zehye.kr/blog/page14/

Blog · 지혜의 개발공부로그

https://docfriends.github.io/DevStrory/2018-12-18/swift-sns-login/#4naver

닥프렌즈

https://velog.io/@yc1303/ios%EB%84%A4%EC%9D%B4%EB%B2%84-%EC%95%84%EC%9D%B4%EB%94%94%EB%A1%9C-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EA%B5%AC%ED%98%84

[ios]네이버 아이디로 로그인 구현