react-native-google-signing으로 구글, 애플 로그인 만들기

지리·2023년 5월 31일

reactnative

01 react-native-google-signing

react-native-google-signing은 구글 로그인과 애플 로그인을 할 수 있게 만들어진 react-native 라이브러리이다.

Github -> 공식 문서에 설명이 잘 되있다
구글 Outh2 Document

Ios

ios 가이드

나는 firebase를 사용하지 않아서 firebase가 없는 경우의 가이드를 참고했다.

Firebase가 없을 경우
1. Get an OAuth client ID.
2. Add a URL scheme to your project

Android

android 가이드

Configure a Google API Project

02 적용 방법

1. Google Cloud Platform에 프로젝트 만들기

Google Cloud Platform 에 프로젝트 만들고 WebClintId, IosClientId(firebase를 이용안할경우)저장

2. 라이브러리 설치

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

Cocoapods가 있을경우
Podfile에 넣고 pod-install

pod 'GoogleSignIn', '~> 6.1.0'

3. App화면에 googleSignConfigure실행

WebClientId

webClientId 는 firebase 콘솔에 앱을 만들경우 자동으로 만들어진다!
만들어진 아이디는 여기에서 확인이 가능하다.

import {GoogleSignin} from '@react-native-google-signin/google-signin';

const googleSigninConfigure = () => {
	GoogleSignin.configure({
	webClientId:'웹클라이언트 아이디',
	iosClientId:'ios클라이언트 아이디', //파이어베이스 서버 이용을 안할경우 필요한듯
  });
};

useEffect(() => {
  googleSigninConfigure();
}, []);

4. 로그인페이지에 구글 로그인 함수 실행

import {
GoogleSignin,
GoogleSigninButton, //구글 로그인 이미지 버튼
} from '@react-native-google-signin/google-signin';

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

};

<TouchableOpacity onPress={onGoogleButtonPress}>
<Text>구글 로그인</Text>
</TouchableOpacity>

userInfo

{
  idToken: string,
  serverAuthCode: string,
  scopes: Array<string>, // on iOS this is empty array if no additional scopes are defined
  user: {
    email: string,
    id: string,
    givenName: string,
    familyName: string,
    photo: string, // url
    name: string // full name
  }
}