파이어베이스로 네이버 로그인 연동하기<응용편>

라닉
8 min readJun 9, 2020

--

카카오 로그인 글들이 3편이나 나올지는 꿈에도 몰랐네요. 만약 안보고 오신분이 계시다면 한번씩 보시는걸 추천 드립니다! 네이버 로그인도 카카오 로그인이랑 매우 비슷합니다! 본 강의는 Kotlin(코틀린)으로 진행하고 있습니다.

먼저 Firebase Authentication에서 네이버 로그인을 별도로 지원하지 않습니다. 그렇기 때문에 Firebase에서 인증을 받으려면 네이버쪽의 Access Token을 별도의 서버로 넘겨서 Firebase Admin SDK를 이용해 JWT 형태의 Custom Token을 받아야 합니다.

먼저 앱 수준의 Build.gradle 에서 네이버 로그인 SDK를 implementation를 입력합니다.

implementation "com.naver.nid:naveridlogin-android-sdk:4.2.6"작성 일자 기준으로 4.2.6 버전이 최신입니다. 최신 버전은 아래 링크를 참고하세요!
https://github.com/naver/naveridlogin-sdk-android/releases

그 다음 네이버 지침에 따라 ProGuard를 제외 시켜줘야 하는데 여기서 난독화를 하실 분만 아래 코드를 proguard_rules.pro로 넣어주세요! (난독화를 할게 아니라면 필수는 아닙니다, 할 수 도 있다면 넣어주세요!)

-keep public class com.nhn.android.naverlogin.** {
public protected *;
}

그 다음 AndroidManifest.xml 에서 권한 설정이 필요합니다.

<uses-permission android:name="android.permission.INTERNET" />

네이버 아이디로 로그인을 사용하기 전에 초기화를 해줘야합니다. 아래 코드를 사용할 액티비티에 입력해주세요.

mOAuthLoginModule = OAuthLogin.getInstance()
mOAuthLoginModule.init(
OAuthSampleActivity.this
,OAUTH_CLIENT_ID // 네이버에서 앱 등록후 받은 ID값
,OAUTH_CLIENT_SECRET // 네이버에서 앱 등록후 받은 SECRET값
,OAUTH_CLIENT_NAME // // 네이버에서 앱 등록후 받은 ID값
)

그리고 네이버 아이디로 로그인 하는 방법이 2가지가 존재하는데 OAuthLoginButton 객체로 버튼을 추가하는 방법, startOAuthLoginActivity() 메서드를 이용한 로그인방법이 존재합니다. 다만 저 같은 경우 디자이너에게 제플린으로 받은 이미지가 있고 별도로 커스텀 해야했기 때문에 두번째 방법인 startOAuthLoginActivity() 메서드를 이용한 로그인을 사용했습니다.

class MainActivity : AppCompatActivity() {

lateinit var mOAuthLoginModule : OAuthLogin

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)

button2.setOnClickListener {
mOAuthLoginModule = OAuthLogin.getInstance()
mOAuthLoginModule.init(
this,
"네이버에서 앱 등록후 받은 ID값",
"네이버에서 앱 등록후 받은 SECRET값" ,
"네이버에서 앱 등록후 받은 ID값"
)
mOAuthLoginModule.startOauthLoginActivity(this, mOAuthLoginHandler);
}
}

private val mOAuthLoginHandler: OAuthLoginHandler = object : OAuthLoginHandler() {
override fun run(success: Boolean) {
if (success) {
val accessToken: String = mOAuthLoginModule.getAccessToken(baseContext)
val refreshToken: String = mOAuthLoginModule.getRefreshToken(baseContext)
val expiresAt: Long = mOAuthLoginModule.getExpiresAt(baseContext)
val tokenType: String = mOAuthLoginModule.getTokenType(baseContext)
} else {
val errorCode: String =
mOAuthLoginModule.getLastErrorCode(baseContext).code
val errorDesc: String = mOAuthLoginModule.getLastErrorDesc(baseContext)
Toast.makeText(
baseContext, "errorCode:" + errorCode
+ ", errorDesc:" + errorDesc, Toast.LENGTH_SHORT
).show()
}
}
}
}

이렇게만 추가해주시고 앱을 실행시킨 후 버튼을 클릭해보면 네이버 로그인 창이 뜨는걸 확인하실 수 있습니다.

잘 뜨는걸 확인할 수 있습니다. 동의하기를 누르면 해당앱은 네이버측에 저장되 있는 정보에 접근할 수있는 권한을 Authorization(인가) 받게 되고, Access Token을 이용해 사용자 정보에 접근이 가능합니다.

이제 이 단계에서 별도의 서버(Firebase Cloud Functions)을 이용해 Access Token을 넘겨서 네이버 회원 프로필 조회 API와 Firebase Admin을 이용해 해당 유저가 있는지 확인하고 있으면 Firebase Authentication에 등록하게 됩니다.

카카오 로그인과 다른 점은 requestMe 메서드에서 Header로 넘겨주는 값이 다르다는 점입니다. 카카오 같은 경우는 Access Token 하나만 넘기고, 네이버 같은 경우는 Access Token과 Client ID, Client Secret 값을 넘기기 때문에 수정이 필요합니다. 수정 후 파일을 Firebase Cloud Functions에 업로드 해주시고, OAuthLoginHandler의 run 메서드 아래에 아래 나와있는 메서드를 사용해주시면 됩니다. 카카오와 매우 흡사하기 때문에 초기설정과 해당 메서드들은 2편을 참고해주세요!

이렇게 getFirebaseNaverCustomToken으로 Access Token을 넘기게 되면 네이버 프로필 조회API로 접근해 사용자 정보를 얻고 해당 정보로 Firebase Admin을 이용해 Firebase Authentication에 계정을 등록합니다. 결과적으로 생성된 계정의 UID로 Custom Token을 만들어 반환하게 됩니다. 그런 다음 auth.signInWithCustomToken을 이용해 최종적으로 로그인하게 됩니다.

응용편 치고는 살짝 달라서 이전편을 이해하신분들은 금방 하실수 있으실겁니다. 궁금하신 점 있으시면 댓글 남겨주세요! 박수이나 팔로우도 부탁드립니다!

— — — — — — — — — 질문 내용 추가

.env 파일을 작성하실때 필수적으로 기입해주셔야 하는 부분인

TYPE, PROJECT_ID, PRIVATE_KEY_ID, PRIVATE_KEY, CLIENT_EMAIL, CLIENT_ID, AUTH_URI , TOKEN_URI, AUTH_PROVIDER_X_CERT_URL ,CLIENT_X_CERT_URL

해당 기입 내용들은 파이어베이스 해당 프로젝트 -> 프로젝트 설정-> 서비스 계정 -> Firebase Admin SDK -> 새 비공개 키 생성을 클릭 하시고 다운 받아진 파일을 메모장으로 여신후 기입하시면 됩니다!

--

--