[React native] Oauth2 (Google, KAKAO)

Webview를 사용한 도전, 그리고 실패

소셜 로그인 서비스를 위해 Oauth2 구현을 시도.
기존 웹 어플리케이션처럼 구현된 백앤드 API는 클라이언트에서 redirect URL을 실행하면 Autorization Server와 백앤드 Server에서 Autorization token 발급 -> 유저 정보 전달 -> DB 저장 후 클라이언트에 JWT를 발급하는 방식으로 작업된다.

참고 블로그 : [Spring Boot] OAuth2 소셜 로그인 가이드 (구글, 페이스북, 네이버, 카카오)

위의 방식으로 구현된 api를 전달받아 React native 로그인에 적용하려 했고 Redirect URL을 실행시키기 위해 Webview를 사용했다.

React-native-webview 라이브러리를 도입해서 다음과 같은 방식으로 리다이렉트 url을 실행했지만 결과는 인증서버에서 보안문제로 webview를 지원하지 않는다는 안내 페이지로 돌아왔다.
구글은 보안 정책으로 인해 더 이상 인증과정에 Webview를 지원하지 않는다고 한다.

import React from 'react';
import { WebView } from 'react-native-webview';

const GoogleLoginScreen = () => {
  const onNavigationStateChange = (navState) => {
    if (navState.url.includes('your_redirect_uri')) {
      const queryParams = new URL(navState.url).searchParams;
      const code = queryParams.get('code');

  return (
    <WebView
      source={{ uri: 'https://accounts.google.com/o/oauth2/v2/auth?client_id=YOUR_CLIENT_ID&redirect_uri=YOUR_REDIRECT_URI&response_type=code&scope=YOUR_SCOPES' }}
      onNavigationStateChange={onNavigationStateChange}
    />
  );
}

export default GoogleLoginScreen;

Firebase를 사용한 Oauth2 인증

구글은 Firebase라는 모바일 SDK를 출시하여 Authentication API를 통한 소셜 로그인 서비스, Firestore를 이용한 데이터 베이스 서비스를 제공한다. 크로스 플랫폼 앱 개발에 최적화되어 있으며 사용이 간편하다.

AOS 등록

• 프로젝트 생성 후 설정 -> 내 앱 섹션에서 안드로이드 아이콘을 클릭하여 앱을 추가한다.

• 안드로이드 패키지 이름 칸에는 project/andriod/app/src/main/AndroidManifest.xml의 package 이름을 입력한다.

나의 경우 초기값은 com.front라는 예명으로 되어 있었는데 패키지 명은 프로젝트 생성 시 사용할 이름으로 바로 바꿔주는게 추후 앱 빌드시 정신 건강에 좋다

• 개발 중인 프로젝트 내의 SHA1키를 확인한 후 등록하면 google-services.json 파일을 다운받을 수 있게 된다. json 파일을 project/andriod/app 폴더로 복사한다.

sha1 확인하는 방법은 프로젝트 루트 폴더에서 아래의 명령어를 실행한다.
cd android && ./gradlew signingReport

IOS 등록

• IOS 아이콘을 클릭한 후 Bundle Id를 입력한다.

Xcode에서 아래의 섹션을 통해 Bundle Id를 확인할 수 있다.

프로젝트 적용

프로젝트 폴더의 env (환경 변수 설정 파일)에 구글 파이어베이스 ID를 저장한 후 불러와서 Oauth2 코드를 작성한다.

// ...
const socialLogin = async (providerType: 'GOOGLE' | 'KAKAO') => {
    try {
      if (providerType === 'GOOGLE') {
        const userInfo = await GoogleSignin.signIn();
        console.log(userInfo);
        postId(userInfo.user.id, providerType);
      } else {
        const kakaoLogin = await KakaoLogin.login();
        const profile = await KakaoLogin.getProfile();
        postId(profile.id, providerType);
      }
    } catch (error: any) {
      console.log(error);
      onError(`${providerType.toLowerCase()} 인증서버 로그인에 실패했습니다.`);
    }
  };
  };

  useEffect(() => {
    GoogleSignin.configure({
      webClientId: Config.API_GOOGLE_ID,
    });
  }, []);
// ...

이번 프로젝트의 경우 클라이언트에서 구글과 카카오 authorization 서버에 idToken을 전달받아 백앤드 서버로 넘겨주면 임의의 프로필이 생성된다. Authorization 서버에서 유저 정보를 추가로 가지고 와서 프로필 정보를 채우는 정석적인 시퀀스를 따라가는 경험도 해보고 싶다.