![\"\"](\"https://images.velog.io/images/hhjj0506/post/ff9fc80d-fff9-4763-a678-bde9d504b177/image.png\")
\nHome\n![\"\"](\"https://images.velog.io/images/hhjj0506/post/d4549fe6-a69a-4f90-b71f-d63ae47b236f/image.png\")
\n가시성이 너무 떨어지고, 이미지를 보여주기 위해 간단히 디자인을 따로 했다.저번편에서는 Firebase의 설정을 끝마쳤고, 이번편에서는 실제로 구글 로그인 기능을 구현할 차례다.
\n먼저 필요한 패키지들을 설치한다.
\nnpm install @react-native-firebase/app @react-native-firebase/auth @react-native-google-signin/google-signinapp 모듈은 Firebase의 기능들을 사용하기 전에 반드시 깔아야 하는 모듈이고, auth 모듈은 계정 기능을 사용할 수 있게 해준다. 그리고 google-signin은 문자 그대로 React에서 구글 로그인 기능을 쉽게 만들어주는 패키지다.
\n패키지들을 설치한 이후에는 프로젝트 자체에서의 설정을 해준다.\nandroid 폴더 안에 있는 build.gradle 파일에 들어가 google-services 플러그인을 추가해준다.
\nbuildscript {\n dependencies {\n // ... other dependencies\n classpath 'com.google.gms:google-services:4.3.10'\n // Add me --- /\\\n }\n}다음으로는 android/app 경로 안에 있는 build.gradle 파일에서 플러그인을 적용한다. 경로가 비슷하니 헷갈리지 말자.
\napply plugin: 'com.android.application'\napply plugin: 'com.google.gms.google-services' // <- Add this lineauth 모듈도 같은 파일 안에 추가해준다.
\ndependencies {\n // ... other dependencies\n implementation 'com.google.firebase:firebase-auth'\n}이젠 정말로 기능 구현을 할 차례다.
\nApp.js에 있는 코드를 모두 지우고 필요한 패키지들을 불러오자.
\nimport React, { useEffect, useState } from 'react';\nimport auth from '@react-native-firebase/auth';\nimport { GoogleSignin } from '@react-native-google-signin/google-signin';다음으로는 구글 로그인 기능을 이용하기 위한 webClientId를 google-services.json에서 가져와야 한다.\n이 파일 안에서 client/oauth_client/client_id를 가져오면 되는데, client_type이 3인 것을 가져와야 한다.
\nuseEffect(() => {\n GoogleSignin.configure({\n webClientId:\n 'CLIENT_ID'\n });\n}, []);이로써 Google SDK를 사용할 수 있게 됐다.
\n이제는 로그인 버튼을 눌렀을 때 사용자를 로그인 시키는 기능을 만들어보자.
\nasync function onGoogleButtonPress() {\n const { idToken } = await GoogleSignin.signIn();\n const googleCredential = auth.GoogleAuthProvider.credential(idToken);\n return auth().signInWithCredential(googleCredential);\n}한줄한줄 살펴보자면\n첫번째 줄은 구글에 로그인하면서 유저의 idToken을 가져온다.\n두번째 줄은 가져온 유저의 idToken을 이용하여 Google credential을 생성한다.\n마지막 줄은 생성된 credential을 이용해 사용자를 앱으로 로그인 시킨다.
\n다음은 사용자의 접속 유무에 따라서 다른 화면을 보여주는 작업을 해보자.\n사용자가 접속 중일때는 앱의 홈 화면을 보여주고 접속 중이 아닐때는 로그인 화면을 보여주려면 현재 사용자의 상태를 판별하는 state가 필요하다.
\nconst [loggedIn, setLoggedIn] = useState(false);\n\n// ... other codes\n\nauth.onAuthStateChanged((user) => {\n if (user) {\n \tsetLoggedIn(true);\n } else {\n \tsetLoggedIn(false);\n }\n});Firebase에서 제공하는 onAuthStateChanged function을 통해 유저의 접속 유무를 판별 할 수 있다.
\nif (loggedIn) {\n return <Home />;\n}\n\nreturn <LoginScreen onGoogleButtonPress={onGoogleButtonPress} />;로그인 상태에서는 Home 화면을, 아닐때는 LoginScreen 화면을 보인다.\nonGoogleButtonPress function의 정보를 LoginScreen으로 보낸다.
\n이제는 유저에게 보여질 두 화면을 만들 차례다.
\nscreens 폴더를 생성한 뒤 폴더 안에 LoginScreen.js 파일을 생성한다.
\nimport React from 'react';\nimport { Text, View } from 'react-native';\nimport { GoogleSigninButton } from '@react-native-google-signin/google-signin'필요한 모듈들을 가져온다.\n다음으로는 구글 로그인 버튼을 이용한 간단한 페이지를 만든다. 스타일
\nexport default function LoginiScreen(props) {\n return (\n <View>\n <Text>Login Page</Text>\n <GoogleSigninButton onPress={props.onGoogleButtonPress} />\n </View>\n );\n}screens 폴더 안에 Home.js 파일을 만들고 필요한 모듈들을 불러온다.
\nimport React from 'react';\nimport { Text, View, Image, Button } from 'react-native';\nimport auth from '@react-native-firebase/auth';다음은 로그인이 성공했는지를 확인 하기 위해 로그인한 유저의 정보를 불러와 유저의 프로필 사진, 이름, 이메일을 보인다.\nsignOut()을 사용한 로그아웃 버튼도 만들어 준다.
\nexport default function Home() {\n const user = auth().currentUser;\n return (\n <View>\n <Text>{user?.displayName}</Text>\n <Text>{user?.email}</Text>\n <Image source={{ uri: user?.photoURL }} />\n <View>\n <Button title=\"Logout\" onPress={() => auth().signOut()} />\n </View>\n </View>\n );\n}auth.currentUser function을 사용하면 현재 유저의 정보를 불러 올 수 있다.\nEx) user?.photoURL -> 현재 유저의 구글 계정 프로필 사진
\nLoginScreen\n\nHome\n\n가시성이 너무 떨어지고, 이미지를 보여주기 위해 간단히 디자인을 따로 했다.
그동안 포스트를 안하다가 갑자기 삘을 받아서 준비도 안된 상태에서 포스트를 하다 보니까 시간도 굉장히 오래걸리고 글도 난잡하게 써졌던 것 같습니다. 글 읽는데 불편한 점이 계셨다면 정말 죄송합니다…
\n아마 앞으로는 간단한 리뷰 기능과 찜 기능, 그리고 이 둘과 계정을 이용하여 내가 쓴 리뷰와 찜한 식당 불러오기에 대해서 다뤄볼 것 같습니다.\n채팅 기능도 언젠가는 포스트를 하겠지만 아직은 제가 글로 풀어낼 실력이 안되는 것 같아서 다음으로 미루고요.
\n아무튼 긴 글 읽어주셔서 감사합니다!
\n","excerpt":"저번편에서는 Firebase의 설정을 끝마쳤고, 이번편에서는 실제로 구글 로그인 기능을 구현할 차례다. 프로젝트 설정 먼저 필요한 패키지들을 설치한다. app 모듈은 Firebase의 기능들을 사용하기 전에 반드시 깔아야 하는 모듈이고, auth 모듈은 계정 기능을 사용할 수 있게 해준다. 그리고 google-signin은 문자 그대로 React에서 구글 로그인 기능을 쉽게 만들어주는 패키지다. 패키지들을 설치한 이후에는 프로젝트 자체에서의 설정을 해준다.\nandroid 폴더 안에 있는 build.gradle 파일에 들어가 google-services 플러그인을 추가해준다. 다음으로는 android/app 경로 안에 있는 build.gradle 파일에서 플러그인을 적용한다. 경로가 비슷하니 헷갈리지 말자. auth 모듈도 같은 파일 안에 추가해준다. 로그인 기능 구현 이젠 정말로 기능 구현을 할 차례다. App.js App.js에 있는 코드를 모두 지우고 필요한 패키지들을 불러오자…","frontmatter":{"date":"June 02, 2022","title":"[React Native] Firebase를 이용한 Android 구글 로그인 2","categories":"개발 featured","author":"김형진","emoji":"📱"},"fields":{"slug":"/react-native-google-login-2/"}},"next":{"id":"b50d9862-e9cc-5bb3-bff4-9bd88ea4c271","html":"티스토리에서 블로그를 운영하다가 벨로그로 옮겨 운영을 하고, 이제는 github.io 페이지를 따로 만들어서 운영을 하게 됐다.\n왜 이렇게 많이 옮겨다녔나라는 생각이 들지만 솔직히 나도 잘 모르겠다.\n여기서 운영하다보면 저곳이 좋아보이고, 그래서 저곳으로 옮기면 이제는 또 다른 쪽이 좋아보이는 심리가 계속 지속 되었던 것 같다.\n이제는 뭔가 온전한 나의 블로그가 생겼다는 느낌을 가지고 정착을 해야 할것 같다.
\n당장은 이전에 운영하던 블로그에서의 글들을 옮겨오고, 이후에는 계속 하던 기술/공부 관련 포스트를 할 것 같다.\n여름방학부터는 이전에 시도해보지 않았던 아예 새로운 분야를 공부하게 되기도 하고, 지금도 조금씩은 하고 있었지만 이제는 정말로 알고리즘 공부도 열심히 해야한다.\n정보처리기사, 토익 등 취업 관련 해서 하는 공부들에 관해서도 올릴 예정이다.
\n![\"유일하게](\"https://images.velog.io/images/hhjj0506/post/56073794-314a-451a-a667-5d0595643061/google.png\")
구글 로그인은 프로젝트를 시작할 때 내가 가장 처음으로 구현한 기능이다. 프로젝트 시작 전에는 개발에 재미를 붙이지 못했던 내가 이 로그인 기능 구현을 처음으로 성공하고 재미를 붙이게 해준 아주 고마운 기능이 됐다. 구글 로그인말고도 React에서의 계정 기능은 어렵지 않게 구현할 수 있기 때문에 처음 시작하는 사람들이 시도해보면서 재미를 붙이면 좋을 것 같다.
\n이 포스트는 react-native-cli를 이용하여 생성한 프로젝트가 있다는 가정하에 진행됩니다. 만약 expo-cli를 사용하고 있다면 새롭게 프로젝트를 만들어 주시길 바랍니다. (react-native-cli 설정 방법은 여기에서 찾아볼 수 있다.)
\n먼저 Firebase의 계정을 만드는 것부터 시작한다. 계정을 만들었다면 Firebase 홈페이지 우측 상단에 있는 ‘콘솔로 이동’ 버튼을 누르거나 console.firebase.com 으로 직접 이동한다.
\n콘솔에 들어가게 되면 이런 화면이 보일것이다.![\"\"](\"https://images.velog.io/images/hhjj0506/post/b4478f6c-8c67-4864-a3f8-1a5e8532eb5f/image.png\")
작성자는 이미 만들어놓은 프로젝트들이 많아서 꽉 차있지만 처음 계정을 만든 후에는 아무것도 없을것이다. 여기서는 Add project를 눌러서 새 프로젝트를 만들어준다.
\n![\"\"](\"https://images.velog.io/images/hhjj0506/post/5dc6e266-68a8-4246-b62e-21c5ba218087/image.png\")
이름을 설정한 후에는 계속 continue를 누르면 된다. 중간에 구글에서 제공하는 앱 측정 솔루션을 사용할것인지에 대해 물어보는데 써도 안써도 상관은 없다.
\n프로젝트가 생성된 후에는 이런 창이 나오게 된다.\n![\"\"](\"https://images.velog.io/images/hhjj0506/post/41188d88-578d-49a8-b16f-55e38a9c7ba1/image.png\")
\n우리는 안드로이드 앱을 만들것이기 때문에 빨간색 원이 그려진 안드로이드 버튼을 누른다.
![\"\"](\"https://images.velog.io/images/hhjj0506/post/383b7e9b-31e2-443d-9343-e4c931939b84/image.png\")
\n버튼을 누르면 이렇게 안드로이드 앱 생성 페이지가 나오게 된다.\n우리가 입력해야 할 것들은 Android package name과 SHA-1인데, 일단 package name을 어떻게 입력해야 하는지부터 알아보자.
package name은 내가 만든 프로젝트에서 찾아 볼 수 있다. 프로젝트에서 android/app/src/main 경로로 들어가면 AndroidManifest.xml이라는 파일을 발견할 수 있는데, 이 파일 상단에 보이는
\npackage=\"com.프로젝트 이름\"이 이름을 그대로 복사 붙여넣기 하면된다. 내 경우에는 test_project라는 이름으로 프로젝트를 생성했기 때문에 package name은 com.test_project가 된다.
\n다음으로 SHA-1은 페이지에는 optional이라고 써있기는 하지만 구글 로그인 기능을 이용하기 위해서는 필수이다. SHA-1을 얻는 방법은 간단하다.
\ncd android && gradlew signingReport이 명령어를 콘솔에 입력하면 많은 양의 비슷해 보이는 문단들이 나올텐데, 그 중에서 경로가 프로젝트/android/app/debug.keystore인 문단에서의 SHA-1을 입력하면 된다.
\nVariant: debugUnitTest\nConfig: debug\nStore: C:\\react\\test_project\\android\\app\\debug.keystore\nAlias: androiddebugkey\nMD5: -------------------------------\nSHA1: // 여기에 나오는 것을 복붙\nSHA-256: ----------------------------\nValid until: 2052 5 1이렇게 package name과 SHA-1을 입력하고 Register app 버튼을 누르면 무언가를 다운로드 하라는 버튼이 보인다.\n![\"\"](\"https://images.velog.io/images/hhjj0506/post/526d5b8b-cbd8-4e25-84dd-538852e079b4/image.png\")
\n버튼을 누르고 다운받은 google-services.json 파일을 보이는것과 같이 android/app 경로에 넣어준다. 이 파일은 이후에 구글 로그인에 필요한 web client id를 가져올 때 쓰인다.
google-services.json 파일을 다운받아 맞는 경로에 넣기까지 했으면 Firebase에서의 설정은 거의 끝이 났다.\n마지막으로는 Firebase에서 제공하는 Authentication 기능을 활성화 해야한다.\n![\"\"](\"https://images.velog.io/images/hhjj0506/post/11e24afa-5496-4808-b101-58e00737d359/image.png\")
\n페이지 왼쪽에 있는 Authentication 섹션으로 넘어가 Get Started 버튼을 누른다.\n![\"\"](\"https://images.velog.io/images/hhjj0506/post/03994bd9-d994-4797-af5e-7821d8e03dd3/image.png\")
\n페이지가 넘어가면 이런 화면이 나올텐데, 살펴보면 여러 방법의 로그인 기능들이 있는것을 볼 수 있다.\n물론 우리는 구글 로그인을 사용할 것이기 때문에 구글만 활성화시키면 된다.\n![\"\"](\"https://images.velog.io/images/hhjj0506/post/448cfd86-0f19-40a7-adb1-bb3edfca377d/image.png\")
\n구글을 눌러 활성화를 시키면 끝이다. Project support email은 현재 자신이 로그인 되어있는 이메일을 넣으면 된다.
다음편에서는 실제 앱에서 구글 로그인 기능을 구현해보겠다.
\n