React Native cli Google 로그인 연동하기

Expo가 아닌 React Native cli 환경에서 네이버 구글 로그인을 구현하려고 한다. 

카카오 로그인 또는 네이버 로그인이 필요한 분은 각 링크를 참고해도 좋다. 

 

작업 환경은 iOS ( Macbook )으로 작업했다. 

 

환경 설치 

환경을 통일하면 아무래도 오류가 줄어들 것이기 때문에 시작부터 함께하자. 

공식 사이트의 without Framework에서 내용을 보고 설치하였다. 

npx @react-native-community/cli@latest init [프로젝트명]

 

프로젝트 구성이 끝나면 구글 로그인 라이브러리를 설치한다. 

yarn add @react-native-google-signin/google-signin

 

설치가 끝나면 iOS 환경 설정을 위해서 pod 라이브러리를 설치한다. 

npx pod-install

 

여기까지 진행한다면 프로젝트에 추가 설치할 부분은 없다. 

지금까지의 버전은 다음과 같다. 

"dependencies": {
  "@react-native-google-signin/google-signin": "^12.2.1",
  "react": "18.2.0",
  "react-native": "0.74.2"
},
"devDependencies": {
  "@babel/core": "^7.20.0",
  "@babel/preset-env": "^7.20.0",
  "@babel/runtime": "^7.20.0",
  "@react-native/babel-preset": "0.74.84",
  "@react-native/eslint-config": "0.74.84",
  "@react-native/metro-config": "0.74.84",
  "@react-native/typescript-config": "0.74.84",
  "@types/react": "^18.2.6",
  "@types/react-test-renderer": "^18.0.0",
  "babel-jest": "^29.6.3",
  "eslint": "^8.19.0",
  "jest": "^29.6.3",
  "prettier": "2.8.8",
  "react-test-renderer": "18.2.0",
  "typescript": "5.0.4"
},

 

환경 설정 - iOS

구글 로그인은 iOS 설정을 하면 된다. 

 

1. info.plist 설정

<key>GIDClientID</key>
<string>[구글 클라우드 콘솔 iOS 클라이언트 ID]</string>
<key>CFBundleURLTypes</key>
<array>
	<dict>
		<key>CFBundleURLSchemes</key>
		<array>
			<string>[REVERSED_CLIENT_ID]</string>
		</array>
	</dict>
</array>

 

ios폴더에 프로젝트명으로 작성된 폴더가 있을 것이다. 

여기서 info.plist에 코드를 추가해주면 된다. 

 

여기서 위 정보들은 

구글 클라우드 콘솔의 iOS OAuth의 상세 화면에 있는 클라이언트 ID와 iOS URL 스키마가 해당 정보들이다. 

( [구글 클라우드 콘솔 iOS 클라이언트 ID] = 클라이언트 ID, [REVERSED_CLIENT_ID] = iOS URL 스키마 )

 

2. AppDelegate에 URL 핸들링 로직 추가 

#import <GoogleSignIn/GoogleSignIn.h>

// ...
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url options:(NSDictionary<NSString *,id> *)options {
  return [GIDSignIn.sharedInstance handleURL:url];
}

 

구글 로그인만 하는 경우에는 따로 작성할 필요가 없지만 우린 카카오, 네이버 등 다양한 로그인 방식을 제공하기 때문에 

AppDelegate 설정을 추가해주었다. 

 

이렇게까지 작업하면 iOS 설정은 끝이다. 

 

환경 설정 - android 

android는 사실 특별하게 할 것은 없다. 하지만 사소한 문제 때문에 오랜시간 삽질을 했기 때문에 공유하려고 한다...

 

1. 패키지 이름 설정 

네이버나 카카오는 패키지 이름이 크게 중요하지 않았다. 하지만 Android OAuth를 만들 때 패키지 이름이 달라지면 로그인 후

사용자의 정보를 제대로 불러오지 못하고 DEVELOPER_ERROR가 발생한다. 

패키지 이름은 android폴더 아래에 있는 app폴더에 있는 bundle.gradle에서 확인할 수 있다. 

bundle.gradle 파일에 있는 namespace가 패키지 이름이다. 

 

2. SHA-1

패키지 이름을 입력하는 곳 바로 아래에 SHA-1를 입력하는 부분이 있다. 

명령어로 간단하게 처리할 수 있는데, 다음과 같이 입력할 수 있다 : 

./gradlew signingReport

 

프로젝트 android 경로에서 위 명령어를 입력하면 짜라락 코드가 나온다. 

거기서 SHA-1을 복사해서 넣어주면 된다. 

 

사용 방법 

원래 사용 방법 안알려줍니다. 너무 잘 나와있거든요. 

하지만 구글 로그인의 경우 실수할 수 있기 때문에 함께 공유할 생각이다. 

 

프로젝트를 실행해서 로그인을 해야하는 곳에서 구글 로그인 설정을 초기화 시켜줘야 하는데, useEffect를 사용하면 된다. 

  useEffect(() => {
    GoogleSignin.configure({
      webClientId:
        '420832022478-td4cevb0r3qq474fgpamonksjanl0u4h.apps.googleusercontent.com',
      iosClientId:
        '420832022478-ej1j8u8n83d6trooa266n0e71g9plcae.apps.googleusercontent.com',
    });
  }, []);

 

좋은 개발자이신 여러분들은 Key는 .env처리를 하실 거라고 생각됩니다. 

여기서 특이사항은 webClientId는 android의 클라이언트 ID가 아니고 Web 애플리케이션의 클라이언트 ID입니다. 

 

즉, Android, iOS 로그인 처리를 위해서는 Android, iOS, Web Application 3개를 만들어야 한다. 

그리고 iOS 환경이 필요없다면 iosClientId는 없어도 전혀 문제가 없다. 

 

 const onGoogleButtonPress = async () => {
    try {
      const userInfo = await GoogleSignin.signIn();

      setUserInfo(userInfo);
    } catch (error) {
      console.error(error);
    }
  };

  const onSignOutButton = async () => {
    try {
      await GoogleSignin.signOut();
      setUserInfo(null); 
    } catch (error) {
      console.error(error);
    }
  };

  const getCurrentUser = async () => {
    const currentUser = await GoogleSignin.getCurrentUser();
    console.log(currentUser);
  };

 

이제 필요에 따라 로그인 시 signIn, 로그아웃 시 signOut, 프로필 정보는 getCurrentUser 함수를 사용해서 구현이 가능하다.