{ "componentChunkName": "component---src-templates-blog-template-js", "path": "/react-native-google-login-1/", "result": {"data":{"cur":{"id":"c876f69f-dc03-5325-b070-9385c3e699a6","html":"

\"유일하게

\n

구글 로그인은 프로젝트를 시작할 때 내가 가장 처음으로 구현한 기능이다. 프로젝트 시작 전에는 개발에 재미를 붙이지 못했던 내가 이 로그인 기능 구현을 처음으로 성공하고 재미를 붙이게 해준 아주 고마운 기능이 됐다. 구글 로그인말고도 React에서의 계정 기능은 어렵지 않게 구현할 수 있기 때문에 처음 시작하는 사람들이 시도해보면서 재미를 붙이면 좋을 것 같다.

\n

주의!!

\n

이 포스트는 react-native-cli를 이용하여 생성한 프로젝트가 있다는 가정하에 진행됩니다. 만약 expo-cli를 사용하고 있다면 새롭게 프로젝트를 만들어 주시길 바랍니다. (react-native-cli 설정 방법은 여기에서 찾아볼 수 있다.)

\n

Firebase 설정

\n

먼저 Firebase의 계정을 만드는 것부터 시작한다. 계정을 만들었다면 Firebase 홈페이지 우측 상단에 있는 ‘콘솔로 이동’ 버튼을 누르거나 console.firebase.com 으로 직접 이동한다.

\n

콘솔에 들어가게 되면 이런 화면이 보일것이다.\"\"

\n

작성자는 이미 만들어놓은 프로젝트들이 많아서 꽉 차있지만 처음 계정을 만든 후에는 아무것도 없을것이다. 여기서는 Add project를 눌러서 새 프로젝트를 만들어준다.

\n

\"\"

\n

이름을 설정한 후에는 계속 continue를 누르면 된다. 중간에 구글에서 제공하는 앱 측정 솔루션을 사용할것인지에 대해 물어보는데 써도 안써도 상관은 없다.

\n

프로젝트가 생성된 후에는 이런 창이 나오게 된다.\n\"\"\n우리는 안드로이드 앱을 만들것이기 때문에 빨간색 원이 그려진 안드로이드 버튼을 누른다.

\n

\"\"\n버튼을 누르면 이렇게 안드로이드 앱 생성 페이지가 나오게 된다.\n우리가 입력해야 할 것들은 Android package name과 SHA-1인데, 일단 package name을 어떻게 입력해야 하는지부터 알아보자.

\n

package name은 내가 만든 프로젝트에서 찾아 볼 수 있다. 프로젝트에서 android/app/src/main 경로로 들어가면 AndroidManifest.xml이라는 파일을 발견할 수 있는데, 이 파일 상단에 보이는

\n
package=\"com.프로젝트 이름\"
\n

이 이름을 그대로 복사 붙여넣기 하면된다. 내 경우에는 test_project라는 이름으로 프로젝트를 생성했기 때문에 package name은 com.test_project가 된다.

\n

다음으로 SHA-1은 페이지에는 optional이라고 써있기는 하지만 구글 로그인 기능을 이용하기 위해서는 필수이다. SHA-1을 얻는 방법은 간단하다.

\n
cd android && gradlew signingReport
\n

이 명령어를 콘솔에 입력하면 많은 양의 비슷해 보이는 문단들이 나올텐데, 그 중에서 경로가 프로젝트/android/app/debug.keystore인 문단에서의 SHA-1을 입력하면 된다.

\n
Variant: debugUnitTest\nConfig: debug\nStore: C:\\react\\test_project\\android\\app\\debug.keystore\nAlias: androiddebugkey\nMD5: -------------------------------\nSHA1: // 여기에 나오는 것을 복붙\nSHA-256: ----------------------------\nValid until: 2052 5 1
\n

이렇게 package name과 SHA-1을 입력하고 Register app 버튼을 누르면 무언가를 다운로드 하라는 버튼이 보인다.\n\"\"\n버튼을 누르고 다운받은 google-services.json 파일을 보이는것과 같이 android/app 경로에 넣어준다. 이 파일은 이후에 구글 로그인에 필요한 web client id를 가져올 때 쓰인다.

\n

google-services.json 파일을 다운받아 맞는 경로에 넣기까지 했으면 Firebase에서의 설정은 거의 끝이 났다.\n마지막으로는 Firebase에서 제공하는 Authentication 기능을 활성화 해야한다.\n\"\"\n페이지 왼쪽에 있는 Authentication 섹션으로 넘어가 Get Started 버튼을 누른다.\n\"\"\n페이지가 넘어가면 이런 화면이 나올텐데, 살펴보면 여러 방법의 로그인 기능들이 있는것을 볼 수 있다.\n물론 우리는 구글 로그인을 사용할 것이기 때문에 구글만 활성화시키면 된다.\n\"\"\n구글을 눌러 활성화를 시키면 끝이다. Project support email은 현재 자신이 로그인 되어있는 이메일을 넣으면 된다.

\n

다음편에서는 실제 앱에서 구글 로그인 기능을 구현해보겠다.

\n
\n\n
","excerpt":"유일하게 디자인을 못했던 로그인 페이지다 구글 로그인은 프로젝트를 시작할 때 내가 가장 처음으로 구현한 기능이다. 프로젝트 시작 전에는 개발에 재미를 붙이지 못했던 내가 이 로그인 기능 구현을 처음으로 성공하고 재미를 붙이게 해준 아주 고마운 기능이 됐다. 구글 로그인말고도 React에서의 계정 기능은 어렵지 않게 구현할 수 있기 때문에 처음 시작하는 사람들이 시도해보면서 재미를 붙이면 좋을 것 같다. 주의!! 이 포스트는 react-native-cli를 이용하여 생성한 프로젝트가 있다는 가정하에 진행됩니다. 만약 expo-cli를 사용하고 있다면 새롭게 프로젝트를 만들어 주시길 바랍니다. (react-native-cli 설정 방법은 여기에서 찾아볼 수 있다.) Firebase 설정 먼저 Firebase의 계정을 만드는 것부터 시작한다. 계정을 만들었다면 Firebase 홈페이지 우측 상단에 있는 ‘콘솔로 이동’ 버튼을 누르거나 console.firebase.com 으로 직접 이동…","frontmatter":{"date":"June 02, 2022","title":"[React Native] Firebase를 이용한 Android 구글 로그인 1","categories":"개발 featured","author":"김형진","emoji":"📱"},"fields":{"slug":"/react-native-google-login-1/"}},"next":{"id":"094a6858-baf4-518c-b591-1e65e9c3c2d4","html":"

저번편에서는 Firebase의 설정을 끝마쳤고, 이번편에서는 실제로 구글 로그인 기능을 구현할 차례다.

\n

프로젝트 설정

\n

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

\n
npm install @react-native-firebase/app @react-native-firebase/auth @react-native-google-signin/google-signin
\n

app 모듈은 Firebase의 기능들을 사용하기 전에 반드시 깔아야 하는 모듈이고, auth 모듈은 계정 기능을 사용할 수 있게 해준다. 그리고 google-signin은 문자 그대로 React에서 구글 로그인 기능을 쉽게 만들어주는 패키지다.

\n

패키지들을 설치한 이후에는 프로젝트 자체에서의 설정을 해준다.\nandroid 폴더 안에 있는 build.gradle 파일에 들어가 google-services 플러그인을 추가해준다.

\n
buildscript {\n  dependencies {\n    // ... other dependencies\n    classpath 'com.google.gms:google-services:4.3.10'\n    // Add me --- /\\\n  }\n}
\n

다음으로는 android/app 경로 안에 있는 build.gradle 파일에서 플러그인을 적용한다. 경로가 비슷하니 헷갈리지 말자.

\n
apply plugin: 'com.android.application'\napply plugin: 'com.google.gms.google-services' // <- Add this line
\n

auth 모듈도 같은 파일 안에 추가해준다.

\n
dependencies {\n    // ... other dependencies\n    implementation 'com.google.firebase:firebase-auth'\n}
\n

로그인 기능 구현

\n

이젠 정말로 기능 구현을 할 차례다.

\n

App.js

\n

App.js에 있는 코드를 모두 지우고 필요한 패키지들을 불러오자.

\n
import React, { useEffect, useState } from 'react';\nimport auth from '@react-native-firebase/auth';\nimport { GoogleSignin } from '@react-native-google-signin/google-signin';
\n

다음으로는 구글 로그인 기능을 이용하기 위한 webClientId를 google-services.json에서 가져와야 한다.\n이 파일 안에서 client/oauth_client/client_id를 가져오면 되는데, client_type이 3인 것을 가져와야 한다.

\n
useEffect(() => {\n    GoogleSignin.configure({\n      webClientId:\n        'CLIENT_ID'\n    });\n}, []);
\n

이로써 Google SDK를 사용할 수 있게 됐다.

\n

이제는 로그인 버튼을 눌렀을 때 사용자를 로그인 시키는 기능을 만들어보자.

\n
async function onGoogleButtonPress() {\n    const { idToken } = await GoogleSignin.signIn();\n    const googleCredential = auth.GoogleAuthProvider.credential(idToken);\n    return auth().signInWithCredential(googleCredential);\n}
\n

한줄한줄 살펴보자면\n첫번째 줄은 구글에 로그인하면서 유저의 idToken을 가져온다.\n두번째 줄은 가져온 유저의 idToken을 이용하여 Google credential을 생성한다.\n마지막 줄은 생성된 credential을 이용해 사용자를 앱으로 로그인 시킨다.

\n

다음은 사용자의 접속 유무에 따라서 다른 화면을 보여주는 작업을 해보자.\n사용자가 접속 중일때는 앱의 홈 화면을 보여주고 접속 중이 아닐때는 로그인 화면을 보여주려면 현재 사용자의 상태를 판별하는 state가 필요하다.

\n
const [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});
\n

Firebase에서 제공하는 onAuthStateChanged function을 통해 유저의 접속 유무를 판별 할 수 있다.

\n
if (loggedIn) {\n    return <Home />;\n}\n\nreturn <LoginScreen onGoogleButtonPress={onGoogleButtonPress} />;
\n

로그인 상태에서는 Home 화면을, 아닐때는 LoginScreen 화면을 보인다.\nonGoogleButtonPress function의 정보를 LoginScreen으로 보낸다.

\n

이제는 유저에게 보여질 두 화면을 만들 차례다.

\n

LoginScreen.js

\n

screens 폴더를 생성한 뒤 폴더 안에 LoginScreen.js 파일을 생성한다.

\n
import React from 'react';\nimport { Text, View } from 'react-native';\nimport { GoogleSigninButton } from '@react-native-google-signin/google-signin'
\n

필요한 모듈들을 가져온다.\n다음으로는 구글 로그인 버튼을 이용한 간단한 페이지를 만든다. 스타일

\n
export default function LoginiScreen(props) {\n    return (\n        <View>\n            <Text>Login Page</Text>\n            <GoogleSigninButton onPress={props.onGoogleButtonPress} />\n        </View>\n    );\n}
\n

Home.js

\n

screens 폴더 안에 Home.js 파일을 만들고 필요한 모듈들을 불러온다.

\n
import React from 'react';\nimport { Text, View, Image, Button } from 'react-native';\nimport auth from '@react-native-firebase/auth';
\n

다음은 로그인이 성공했는지를 확인 하기 위해 로그인한 유저의 정보를 불러와 유저의 프로필 사진, 이름, 이메일을 보인다.\nsignOut()을 사용한 로그아웃 버튼도 만들어 준다.

\n
export 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}
\n

auth.currentUser function을 사용하면 현재 유저의 정보를 불러 올 수 있다.\nEx) user?.photoURL -> 현재 유저의 구글 계정 프로필 사진

\n

결과

\n

LoginScreen\n\"\"\nHome\n\"\"\n가시성이 너무 떨어지고, 이미지를 보여주기 위해 간단히 디자인을 따로 했다.

\n

마치며

\n

그동안 포스트를 안하다가 갑자기 삘을 받아서 준비도 안된 상태에서 포스트를 하다 보니까 시간도 굉장히 오래걸리고 글도 난잡하게 써졌던 것 같습니다. 글 읽는데 불편한 점이 계셨다면 정말 죄송합니다…

\n

아마 앞으로는 간단한 리뷰 기능과 찜 기능, 그리고 이 둘과 계정을 이용하여 내가 쓴 리뷰와 찜한 식당 불러오기에 대해서 다뤄볼 것 같습니다.\n채팅 기능도 언젠가는 포스트를 하겠지만 아직은 제가 글로 풀어낼 실력이 안되는 것 같아서 다음으로 미루고요.

\n

아무튼 긴 글 읽어주셔서 감사합니다!

\n
\n\n
","frontmatter":{"date":"June 02, 2022","title":"[React Native] Firebase를 이용한 Android 구글 로그인 2","categories":"개발 featured","author":"김형진","emoji":"📱"},"fields":{"slug":"/react-native-google-login-2/"}},"prev":{"id":"1b12bfbd-c20d-59f0-af06-8150b73f13a8","html":"

계획은 잘 세우는 나

\n

이전에도 블로그를 운영하면서 여러번 방학계획을 올렸었지만, 제대로 지켜진 적은 거의 없었다.\n팀 프로젝트 같이 다른 사람들과 같이 진행하는 것은 당연히 열심히 했었지만, 그러다보니 오히려 혼자서 해야하는 계획들을 잘 지키지 못했던 것 같다.\n그러니까 이번에 좀 제대로 해보자.

\n

1. 공프기 공부

\n

다음 학기부터 수강하는 공학프로젝트기획의 주제와 팀원들이 정해졌다.\n일단은 학교에 남아서 같이 ROS 등을 배우고, 주제에 관련된 기술과 특허를 찾는 등의 공부를 할것같다.\n아무래도 다른 사람들과 같이 진행하고, 1년 동안 지속적으로 진행할 프로젝트이다보니 가장 열심히 할것 같다.

\n

2. 알고리즘 / 코딩테스트

\n

2학년 방학부터 계속해서 조금씩 공부를 하긴 했지만 실력이 만족할만큼 늘진 않았다.\n공부를 해본 결과 학기 중에는 공부가 힘들다고 생각이 들었고, 혼자서 진행하기에는 내가 너무 나약하기 때문에 이번에는 학교에서 진행하는 알고리즘 공부 캠프를 신청했다.\n이걸 바탕으로 AtCoder나 CodeForce에서 진행하는 대회도 꾸준히 참가할 예정이다.

\n

3. 개인프로젝트

\n

웹/앱을 만든건 꽤 있지만 정작 맘에 드는 건 하나도 없다.\n이전부터 사람들이 실제로 사용할 수 있는 서비스를 만들고 싶었는데 이번 방학에 해보려고 한다.\n일단 주제는 헬스, 크로스핏 등의 운동을 하는 사람들을 타겟으로 잡았는데 언제 바뀔지 모른다.

\n
\n\n
","frontmatter":{"date":"June 09, 2022","title":"22 여름방학 계획","categories":"기타","author":"김형진","emoji":"🚘"},"fields":{"slug":"/2022-summer-todo/"}},"site":{"siteMetadata":{"siteUrl":"https://hhjj0506.github.io","comments":{"utterances":{"repo":"hhjj0506/hhjj0506.github.io"}}}}},"pageContext":{"slug":"/react-native-google-login-1/","nextSlug":"/react-native-google-login-2/","prevSlug":"/2022-summer-todo/"}}, "staticQueryHashes": ["1073350324","1956554647","2938748437"]}