[React-Native] 리액트 네이티브(react-native) 구글 로그인 연동하기

앱에서 사용자들이 간편하게 로그인할 수 있는 sns 로그인 연동은 필수인 것 같습니다. 저도 안드로이드로는 구글 로그인 연동을 해봤었는데 이번에 프로젝트를 진행하면서 리액트 네이티브로는 처음 연동을 해보았습니다. 자료가 아직 많지 않은 것 같아 정리를 해보았습니다. ios앱 전용으로 테스트한 내용입니다.

1. Firebase 프로젝트 생성

구글 로그인인증을 위해서 우선 새로운 Firebase 프로젝트와 그 안에 새로운 앱을 만들어줍니다.

1) 기존 Firebase 프로젝트가 없는 경우 Firebase 콘솔로 이동하여 이름을 지정하고 새 프로젝트를 생성합니다.

2) 새 앱을 만들어 프로젝트에 연결합니다.

프로젝트 대시보드에서 ios 버튼을 눌러 앱을 추가해보겠습니다.

앱 등록을 위해 시키는 대로 bundle_id와 앱 닉네임을 입력해줍니다.

다음 단계로 IOS

2. Firebase에서 Google 로그인 활성화

앱이 Firebase 프로젝트에 연결되었으므로 콘솔로 이동하여 앱이 Google 인증을 사용하도록 설정해야 합니다.

대시보드에 들어가서

Authentication → 로그인 방법 → Google에서 토글 버튼을 눌러 사용 설정을 활성화시켜줍니다.

웹 클라이언트 ID는 나중에 쓰이니 따로 저장해둡니다.

3. google 로그인 패키지 설치

Google 로그인을 활성화하기 위해 react-native-google-signin 패키지를 설치해야 합니다.

게시물을 작성할 당시 React-Native 버전 0.61이었습니다.

1) 패키지 설치

RN >= 0.60의 경우

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

or

npm install -save @react-native-community/google-signin

RN <= 0.59의 경우

yarn add react-native-google-signin

or

npm install -save react-native-google-signin

※ 버전이 0.59 이하일 경우 iOS guide 를 보고 설정을 더 해주셔야 합니다.

2) pod파일 설치

cd ios pod install

3) Xcode 구성

XCode에서 아래 이미지에 표시된 것처럼 URL 스키마에 REVERSED_CLIENT_ID(GoogleService-Info.plist 파일 안에 있음)을 추가합니다.

4. react-native 앱에서 로그인 기능 적용

1) 컴포넌트 추가

import { GoogleSignin, GoogleSigninButton, statusCodes } from '@react-native-community/google-signin';

2) 로그인 configure 설정

YOUR_WEB_CLIENT_ID_HERE에 전에 발급받은 웹 클라이언트 ID를 입력합니다.

componentDidMount() { GoogleSignin.configure({ webClientId: 'YOUR_WEB_CLIENT_ID_HERE', offlineAccess: true, hostedDomain: '', forceConsentPrompt: true, }); }

3) 로그인 버튼

4) 로그인 함수

_signIn = async () => { try { await GoogleSignin.hasPlayServices(); const userInfo = await GoogleSignin.signIn(); this.setState({ userInfo: userInfo, loggedIn: true }); } catch (error) { if (error.code === statusCodes.SIGN_IN_CANCELLED) { // user cancelled the login flow } else if (error.code === statusCodes.IN_PROGRESS) { // operation (f.e. sign in) is in progress already } else if (error.code === statusCodes.PLAY_SERVICES_NOT_AVAILABLE) { // play services not available or outdated } else { // some other error happened } } };

5) 로그아웃 함수

signOut = async () => { try { await GoogleSignin.revokeAccess(); await GoogleSignin.signOut(); this.setState({ user: null, loggedIn: false }); // Remember to remove the user from your app's state as well } catch (error) { console.error(error); } };

6) 전체 코드

import React, { Component } from 'react'; import { SafeAreaView, StyleSheet, View, Text, StatusBar, Button, Image } from 'react-native'; import { GoogleSignin, GoogleSigninButton, statusCodes } from '@react-native-community/google-signin'; class App extends Component { constructor(props) { super(props); this.state = { pushData: [], loggedIn: false } } componentDidMount() { GoogleSignin.configure({ webClientId: '526836440894-d7kvi3jfopuq06jaunnqp6s10r570jel.apps.googleusercontent.com', offlineAccess: true, hostedDomain: '', forceConsentPrompt: true, }); } _signIn = async () => { try { await GoogleSignin.hasPlayServices(); const userInfo = await GoogleSignin.signIn(); this.setState({ userInfo: userInfo, loggedIn: true }); } catch (error) { if (error.code === statusCodes.SIGN_IN_CANCELLED) { // user cancelled the login flow } else if (error.code === statusCodes.IN_PROGRESS) { // operation (f.e. sign in) is in progress already } else if (error.code === statusCodes.PLAY_SERVICES_NOT_AVAILABLE) { // play services not available or outdated } else { // some other error happened } } }; signOut = async () => { try { await GoogleSignin.revokeAccess(); await GoogleSignin.signOut(); this.setState({ user: null, loggedIn: false }); // Remember to remove the user from your app's state as well } catch (error) { console.error(error); } }; render() { return ( {!this.state.loggedIn && You are currently logged out} {this.state.loggedIn && } {this.state.loggedIn && User Info Name {this.state.userInfo && this.state.userInfo.user && this.state.userInfo.user.name} Email {this.state.userInfo && this.state.userInfo.user && this.state.userInfo.user.email} ID {this.state.userInfo && this.state.userInfo.user && this.state.userInfo.user.id} } ); } } const styles = StyleSheet.create({ listHeader: { backgroundColor: '#eee', color: "#222", height: 44, padding: 12 }, detailContainer: { paddingHorizontal: 20 }, title: { fontSize: 18, fontWeight: 'bold', paddingTop: 10 }, message: { fontSize: 14, paddingBottom: 15, borderBottomColor: "#ccc", borderBottomWidth: 1 }, dp:{ marginTop: 32, paddingHorizontal: 24, flexDirection: 'row', justifyContent: 'center' }, sectionContainer: { marginTop: 32, paddingHorizontal: 24, flexDirection: 'row', justifyContent: 'center' }, buttonContainer: { marginTop: 32, paddingHorizontal: 24, flexDirection: 'row', justifyContent: 'center' } }); export default App;

5. 앱 실행 및 테스트

react-native run-ios

정상적으로 앱이 빌드되고 실행되는 것을 확인되고 아래와 같은 화면을 띄우는 것을 확인했습니다.

로그인 버튼을 눌러 구글 로그인을 진행하면 아래와 같이 유저 정보를 가져와서 보여줄 수도 있습니다.

이상으로 react-native 앱에서 구글 로그인을 사용할 수 있도록 구현해봤습니다. 물론 ios용으로 진행하였기 때문에 안드로이드 디바이스에서는 오류가 날 것입니다. 하지만 Android guide 를 보고 따라 하신다면 충분히 안드로이드도 적용할 수 있을 것 같습니다. 기회가 된다면 facebook 로그인과 twitter 로그인도 공유해보도록 하겠습니다.

from http://bangc.tistory.com/12 by ccl(A) rewrite - 2020-03-07 02:20:53