서론

대상독자

React Native Expo 개발 시, 구글 로그인을 구현하고 싶은 개발자

학습목표

최신 Expo 환경(Expo 44)에서 구글 로그인을 구현하는 방법에 대해서 알아보겠습니다.

본론

먼저 필요한 패키지들을 설치합니다.

expo-auth-session 설치하기

expo install expo-auth-session expo-random

expo-auth-session와 expo-random 라이브러리를 설치해줍니다. expo 모듈 같은 경우에는 expo 버젼에 따라 패키지 사용방법이 상이하므로, expo cli로 설치해주는 것이 중요합니다. 그럼 자동으로 expo에서 앱의 expo 버젼에 맞게 패키지를 설치해줍니다.

코드 작성하기

공식 문서에서 예제 코드를 불러와 사용하겠습니다.

import * as React from 'react';
import * as WebBrowser from 'expo-web-browser';
import * as Google from 'expo-auth-session/providers/google';
import { Button } from 'react-native';

WebBrowser.maybeCompleteAuthSession();

export default function App() {
  const [request, response, promptAsync] = Google.useAuthRequest({
    expoClientId: 'GOOGLE_GUID.apps.googleusercontent.com',
    iosClientId: 'GOOGLE_GUID.apps.googleusercontent.com',
    androidClientId: 'GOOGLE_GUID.apps.googleusercontent.com',
    webClientId: 'GOOGLE_GUID.apps.googleusercontent.com',
  });

  React.useEffect(() => {
    if (response?.type === 'success') {
      const { authentication } = response;
      }
  }, [response]);

  return (
    <Button
      disabled={!request}
      title="Login"
      onPress={() => {
        promptAsync();
        }}
    />
  );
}

Client Key 받아오기 (Expo)

다음으로 해야 할 일은 GCP(Google Cloud Platform)에서 키를 발급하는 것입니다. 사용자 인증 정보 탭에 들어가, OAuth 2.0 클라이언트를 위한 ID를 발급 받습니다. Expo, IOS, Android 세 개의 키를 발급 받도록 하겠습니다. 먼저 Expo 키부터 발급 받겠습니다. 먼저 웹 애플리케이션의 클라이언트 ID를 생성해줍니다.

승인된 자바스크립트 원본에 https://auth.expo.io를 입력해줍니다. 승인된 리다이렉트 URI에는 https://auth.expo.io/@계정명/어플명을 입력해줍니다. 참고로 계정명은 expo 계정 이름이며, 어플명은 app.json 파일의 slug 항목에 해당하는 이름입니다. 따로 설정해주지 않았다면 프로젝트명과 동일합니다.

{
  "expo": {
    "name": "프로젝트명",
    "slug": "어플명",
    }
}

Client Key 받아오기 (IOS)

IOS에선 번들 아이디를 생성해주고 app.json의 ios, bundleIdentifier에 똑같이 입력해줍니다.

{
    "expo": {
      "ios": {
        "supportsTablet": true,
        "bundleIdentifier": "com.xxx.xxx"
      },
   }
}

Client Key 받아오기 (Android)

Android도 IOS와 마찬가지의 작업을 해줍니다. 다만, Android 키 발급을 위해선 SHA-1 인증서가 필요합니다. 이를 위해, expo credentials:manager -p android를 실행해줍니다. 그런 후, "Update upload Keystore"를 선택하고 "Generate new keystore"를 선택합니다. 그런 후, "Go back to experience overview"를 선택합니다. 이렇게 발급된 정보를 SHA-1 인증서 정보에 입력해줍니다.

{
    "expo": {
      "android": {
        "package": "com.xxx.xxx",
      },
}

이제 모든 키를 발급 받았습니다. 구글 Oauth 클라이언트 ID 발급 페이지의 오른쪽 상단에서 클라이언트 ID를 확인 후, useAuthRequest 훅 안에 넣어줍니다. 그럼 끝입니다!!

저작자표시 비영리