[웹 개발 프로젝트] 9. 스프링 Spring 구글 소셜 로그인 로직 변경 (리액트 네이티브 웹뷰 관련)

이번 프로젝트 중에 젤 막혔던 문제...
문제가 어디서 발생했냐.. 하면은

원래 구글 소셜로그인의 A to Z를 백엔드에서 담당하도록 구현을 했다.

오랜만에 시퀀스 다이어그램도 그려봤는데 아래와 같다.

(draw. io 는 그리기는 참 편리한데 저장할 때 화질이 조금만 더 개선되면 좋을 것 같다.. .ㅎ..)

 

 

 

로그인 요청부터 Authorization Code를 받아 사용자 정보 요청하는 것까지 서버에서 진행을 하고

최종 accessToken 또는 사용자 정보를 클라이언트 측으로 반환하도록 구현했었다.
(회원이면 인증/인가를 위한 accessToken만, 비회원이라면 회원가입을 바로 진행할 수 있도록

사용자정보 (name, email, picture) 을 담아보낸다.

근데 정말 예상치도 못하게 프론트(React Native Expo) 와의 연결에서 오류가 났다..

웹이랑 앱이랑 무작정 같진 않겠지.. 라고 생각했긴 하지만...

 

처음 시도는 WebView 를 통해 구글 로그인 창으로 이동하는 것이었다. 일단 여기서도 매끄럽지만은 않았던게, 구글이 웹뷰 이용을 막아서 웹뷰를 사용하려면 아래와 같이 userAgent 에 다른 브라우저를 입력하여 우회하는 방법을 사용해야 했다.

<WebView
                source={{ uri: url }}
                onNavigationStateChange={handleNavigationStateChange}
                userAgent='Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36'
                style={{ flex: 1 }}
            />

 

그리고 메인 문제는 로그인 완료 후에 가져와야할 json 정보들을 이 웹뷰 브라우저에서 앱으로 보낼 방법을 도저히 못찾겠다는 것이었다. (아마 애초에 방법이 없는 것 같다... 있으면 알려주시길 바랍니다..)

 

 

 

로그인을 하고

사용자 정보 json 이 반환된 상태이다.

현재 앱이 아니라 외부 브라우저에 있는 상태이니 가져올 수가 없는 것이다.무작정 여기서 어떻게 가져올까만 하루종일 고민하다가

다른 동기에게 의견을 구해본 결과 구글 로그인 요청을 프론트에서 구글로 직접 보내는 것으로 변경하기로 했다!

보통은 이런 로직으로 한다네요)

그래서 최종적으로 변경한 것은 아래와 같다

 

 

 

 

확실히 뭔가 더 분업화가 되었다

백엔드 코드는 크게 달라진건 없어서 프론트 쪽 코드만 한번씩 언급을 하겠다

/** @format */

import * as React from "react";
import * as WebBrowser from "expo-web-browser";
import * as Google from "expo-auth-session/providers/google";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { Button, View, Text, StyleSheet, TouchableOpacity } from "react-native";
import { useEffect } from "react";
import axios from "axios";

WebBrowser.maybeCompleteAuthSession();
export default function GoogleLogin() {
  const [request, response, promptAsync] = Google.useAuthRequest({
    webClientId: process.env.EXPO_PUBLIC_WEB_CLIENT_ID,
    androidClientId: EXPO_PUBLIC_ANDROID_CLIENT_ID,
  });

  const [userInfo, setUserInfo] = React.useState(null);

  const handleSignInWithGoogle = async () => {
    const user = await AsyncStorage.getItem("@accessToken");
    if (!user) {
      if (response?.type === "success") {
        await sendToken(response.authentication?.accessToken);
      }
    }
  };

  //구글로그인을 해서 받은 토큰을 백엔드로 보내서 디비에 있는 회원 내용 조회 예정
  const sendToken = async (token) => {
    await axios
      .get(`http://fit-friends.duckdns.org:8081/api/login/${token}`)
      .then(async (res) => {
        if (res.data.accessToken == null) {
          setUserInfo(res.data);
          // 회원가입 해야 함
        } else {
          console.log("accessToken = ", res.data.accessToken);
          await AsyncStorage.setItem(
            "@accessToken",
            JSON.stringify(res.data.accessToken),
          );
        }
      });
  };

  const handleLogout = async () => {
    await AsyncStorage.removeItem("@user");
    setUserInfo(null);
  };

  useEffect(() => {
    handleSignInWithGoogle();
  }, [response]);

  return (
    <View>
      <TouchableOpacity
        style={[styles.buttonStyle, { marginBottom: 18 }]}
        disabled={!request}
        title='Login'
        onPress={() => {
          promptAsync();
        }}
      >
        <Text style={styles.buttonTextStyle}>로그인하여 시작하기</Text>
      </TouchableOpacity>

      <Button title='logout' onPress={() => handleLogout()} />
    </View>
  );
}

 

구글 로그인을 지원하는 expo 의 여러 라이브러리를 사용해서 구현하였다.

 

 

로그인 버튼을 누르면

const handleSignInWithGoogle = async () => {
    const user = await AsyncStorage.getItem("@accessToken");
    if (!user) {
      if (response?.type === "success") {
        await sendToken(response.authentication?.accessToken);
      }
    }
  };

 

이 메서드에서 먼저 AsyncStorage 에 저장돼있는 accessToken 값을 가져와 로그인 상태인지 확인하고 값이 없다면

백엔드에서 구글에게 사용자 정보를 요청할 수 있도록 구글로부터 받은 코드(변수 accessToken) 를 전달한다.

그것이 아래의 sendToken 메서드이다.

 

다시보니 헷갈리게 적어뒀는데 AsyncStorage에 저장해두는 accessToken 은 스프링 서버에서 제공하는 사용자 인가용jwt 토큰이고 백엔드에 보내는 accessToken 은 구글용 인가코드이다!

sendToken()

    await axios
      .get(`{백엔드 api 주소}/api/login/${token}`)
      .then(async (res) => {
        if (res.data.accessToken == null) {
          setUserInfo(res.data);
          // 회원가입 해야 함
        } else {
          console.log("accessToken = ", res.data.accessToken);
          await AsyncStorage.setItem(
            "@accessToken",
            JSON.stringify(res.data.accessToken),
          );
        }
      });
  };

 

 

AsyncStorage 는 @react-native-async-storage/async-storage 라이브러리에 있는건데
앱에서 작동 시에 웹 브라우저에 로컬 스토리지 역할을 하는 것 같다.
실제로 지금 expo 앱이 안드로이드에서 오류가 계속 나서 웹으로 개발을 하고 있는데
확인해보면 로컬스토리지에 accessToken 값이 저장된다.

드디어 내가 생각했던대로 작동을 한다..... 아직 해결할 문제들은 있긴 하지만 (expo 앱이 안드로이드 빌드가 안됨, expo는 .env 의 변수 이름을 EXPO_PUBLIC_{NAME} 으로 하면 된다는데 변수값이 불러와지질 않음..)

그래도 가장 큰 문제를 해결해서 다행이다....

햅삐햅삐.........