10. 소셜로그인 - 구글 로그인

https://lucky516.tistory.com/306

ReactNative Firebase 구글 로그인

 

* 구글 로그인을 위한 라이브러리 추가하기

@react-native-google-signin/google-signin

 

* 안드로이드 파일 설정하기

android/build.gradle에 들어가서 아래와 같이 추가한다.

buildscript {
    ext {
			... 중략 
            googlePlayServicesAuthVersion = "19.2.0"
    }
    ... 중략
 }

 

* SHA-1 키 조회하기

./gradlew signingReport

android 폴더에서 위 코드를 실행하여 SHA-1 키를 조회한다. 

맨 위쪽의 SHA-1키를 위와 같이 등록한다. 물론 화면상의 값이 아니라 자신의 키를 등록해야 한다.

기존의 google-services.json 파일은 삭제하고  파이어베이스 콘솔의 해당 프로젝트에서 google-services.json 다운로드후 android/app 폴더에 드래그해서 추가해준다. 

import React, { useEffect } from 'react'
import { SafeAreaView, View, Text, StyleSheet, StatusBar, Button } from 'react-native'
import { GoogleSignin } from '@react-native-google-signin/google-signin'
import auth from '@react-native-firebase/auth'

function SettingsScreen({navigation}){
  const googleSigninConfigure = () => {
    GoogleSignin.configure({
      webClientId:
        '137262950194-gcouccatiffjp4ei8aqfi05uruv5j4dl.apps.googleusercontent.com',
    })
  }
  async function onGoogleButtonPress() {
    // Check if your device supports Google Play
    await GoogleSignin.hasPlayServices({ showPlayServicesUpdateDialog: true });
    // Get the users ID token
    const { idToken } = await GoogleSignin.signIn();
    console.log("구글 토큰: ", idToken)
  
    // Create a Google credential with the token
    const googleCredential = auth.GoogleAuthProvider.credential(idToken);
  
    // Sign-in the user with the credential
    return auth().signInWithCredential(googleCredential);
  }
  useEffect(() => {
    googleSigninConfigure()
  }, [])
  return (
    <SafeAreaView style={styles.block}>
      <StatusBar backgroundColor="#a8c8ffff"></StatusBar>
      <View>
        <Text>설정</Text>
        <Button
          title="Google Sign-In"
          onPress={() => onGoogleButtonPress().then(() => console.log('Signed in with Google!'))}
        />
      </View>
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  block: {
    flex: 1
  }
})
export default SettingsScreen

screens > SettingsScreen.js 파일을 위와 같이 작성한다. webClientId 값은 아래 google-services.json 파일에서 client_type: 3의 client_id 값이다. 

{
  "project_info": {
    "project_number": "137262950194",
    "project_id": "rn-todo-457db",
    "storage_bucket": "rn-todo-457db.appspot.com"
  },
  "client": [
    {
      "client_info": {
        "mobilesdk_app_id": "1:137262950194:android:d2bd8c4a9f48d60e2dd92b",
        "android_client_info": {
          "package_name": "com.learnreactnative"
        }
      },
      "oauth_client": [
        {
          "client_id": "137262950194-of9ufp3g2ds13pe5fl8vljct3fi1ijd4.apps.googleusercontent.com",
          "client_type": 1,
          "android_info": {
            "package_name": "com.learnreactnative",
            "certificate_hash": "1346faf79f5c45ca4a98e1869e8714ac9a6e97df"
          }
        },
        {
          "client_id": "137262950194-gcouccatiffjp4ei8aqfi05uruv5j4dl.apps.googleusercontent.com",
          "client_type": 3
        }
      ],
      "api_key": [
        {
          "current_key": "AIzaSyAa4SQuNdrNvth4TsxqfBIwvteWRFUiOJc"
        }
      ],
      "services": {
        "appinvite_service": {
          "other_platform_oauth_client": [
            {
              "client_id": "137262950194-gcouccatiffjp4ei8aqfi05uruv5j4dl.apps.googleusercontent.com",
              "client_type": 3
            }
          ]
        }
      }
    }
  ],
  "configuration_version": "1"
}

 

구글 로그인 성공화면

 

* SHA-1 키가 없는 경우 SHA-1 키 생성하기

https://stackoverflow.com/questions/42663114/keystore-file-does-not-exist

keytool -genkey -v -keystore debug.keystore -storepass android -alias androiddebugkey -keypass android -keyalg RSA -keysize 2048 -validity 10000

android/app 폴더에서 위 코드를 실행하여 SHA-1 키를 생성한다. 키를 생성하면 android/app 폴더에 debug.keystore 파일이 생성된다.

 

* 에러 핸들링하기

SHA-1 키 충돌화면

a non recoverable sign in failure occurred

해당 에러는 위와 같이 SHA-1 키가 잘못 등록된 경우에 발생한다. android/app 폴더의 debug.keystore 와 google-services.json 파일을 삭제하고, SHA-1 키를 새로 생성한 다음 google-services.json 파일을 다시 다운로드 후 추가해주면 된다.

* 키 리스트 확인하기

https://prince-mint.tistory.com/11

Android Studio SHA-1 지문 확인 방법

android/app 폴더에서 아래 명령어를 입력하고 엔터키를 누른다.

keytool -list -v -keystore debug.keystore