React Native Expo 카카오 로그인

지금 expo 환경에서 카카오 로그인을 할려고 하는데, 큰 문제가 있다..

바로 RedirectURI..

이 전 웹을 할 땐, URI가 확실하게 존재해서 하나의 콜백 페이지 만 든 다음에 백엔드로 인가코드 보내는 방식을 사용했는데, 우리는 앱이라서 확실한 RedirectURI가 존재하지 않는다..

(웹으로 치면 http://localhost:3000/auth/kakao/callback 같은..)

저기 ‘이동통신사’ 뒤에 Cannot get auth/kakao/callback 이런 로그가 떠 있음..

그래서 이런 상황에 AndroidManifest.xml을 수정해서 RedirectURI을 적용시킨다고 하는데, 우린 Expo라서 AndroidManifest.xml를 따로 수정할 순 없다..

뭐 WebView 사용 없이, @react-native-seoul/kakao-login을 사용하면 된다는데, 우리는 반드시 카카오 로그인 성공시 발급받은 인가코드를 백엔드로 보내야한다.. 그렇기 때문에 WebView는 반드시 써야할 듯..

한번 생각해보자..

일단 현재 내 코드는

KakaoLoginScreen.js

import { WebView } from 'react-native-webview';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { StyleSheet, View, Text, Button } from 'react-native';
import axios from 'axios';
import { REST_API_KEY, REDIRECT_URI } from '@env';

const INJECTED_JAVASCRIPT = `window.ReactNativeWebView.postMessage('message from webView')`;

export default function KakaoLoginScreen({ navigation }) {
	const getCode = (target) => {
		const exp = 'code=';
		const condition = target.indexOf(exp);
		if (condition !== -1) {
			const requestCode = target.substring(condition + exp.length);
			console.log('code = ', requestCode);
			requestToken(requestCode);
		}
	};

	const requestToken = async (code) => {
		const requestTokenUrl = 'https://lastdance.kr/api/members/kakao/login';

		try {
			const body = {
				code,
			};
			const response = await axios.post(requestTokenUrl, body);

			console.log(response.headers);

			const accessToken = response.headers['authorization'];
			const refreshToken = response.headers['authorization-refresh'];

			if (accessToken) {
				// AsyncStorage에 accessToken 저장
				await AsyncStorage.setItem('accessToken', accessToken);
			}

			if (refreshToken) {
				// AsyncStorage에 refreshToken 저장
				await AsyncStorage.setItem('refreshToken', refreshToken);
			}

			console.log(response.data);

			await navigation.navigate('가족선택');
		} catch (e) {
			console.log(e);
		}
	};

	return (
		<View style={{ flex: 1 }}>
			<WebView
				style={{ flex: 1 }}
				source={{
					uri: `https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}`,
				}}
				injectedJavaScript={INJECTED_JAVASCRIPT}
				javaScriptEnabled
				onMessage={(event) => {
					const data = event.nativeEvent.url;
					getCode(data);
				}}
			/>
		</View>
	);
}

.env

REST_API_KEY=어쩌구 저쩌구 API KEY
REDIRECT_URI=http://localhost:8081/auth/kakao/callback

이렇게 되어있다.

일단 내가 생각한 해결방법은

Expo용 Redirect URI 만들기

난 일단 앱이 오류없이 정상적으로 나오게 하는게 목적이기 때문에,,

https://auth.expo.io/@hyeongseoklee/zip-app/auth/kakao/callback

이런 URI를 써보는게 어떨까..?

그리고 Expo에 적용시키기 위해 app.json도 수정하자

{
  "expo": {
    "name": "zip-app",
    "slug": "zip-app",
    "owner": "hyeongseoklee",
    "version": "1.0.0",
		...

(이게 맞나 모르겠네..)

.env도 바꾸자

REST_API_KEY=어쩌구 저쩌구 API KEY
REDIRECT_URI=https://auth.expo.io/@hyeongseoklee/zip-app/auth/kakao/callback

그리고

카카오 개발자의 우리 애플리케이션에 Redirect URI에 추가하자 (사진을 제공해준 shout out to 제혁이형)

그리고 이 상태로 카카오 로그인을 해보면

Not found가 뜨고, 다음 화면으로 넘어간다..

넘어 가지기는 하니까!

시간날 때 해결하자