React.js/Firebase4 Firebase Authentication part 3 1. 구글 사용 설정 구글 소셜 로그인을 해보자. 1-1 우선 Firebase Authentication 페이지로 가자. 1-2 현재는 이메일/비밀번호만 사용 설정이 되어있는데 새 제공업체 추가 버튼을 눌러 추가하자. 1-3 다양한 소셜로그인을 할 수 있지만 지금은 구글만 진행하자. 구글을 누르자. 1-4 구글을 누르면 이런 창이 보일 것이다. 오른쪽 사용 설정을 눌러 활성화시킨다. 1-5 활성화 시키면 이런 창이 보일텐데 프로젝트 설정 하이퍼링크를 눌러준다. 1-6 현재 우리의 지원 이메일이 구성되지 않음이라고 되어있는데 이를 눌러 자신의 구글 이메일을 누르면 된다. 저장이 완료되면 1-3 창을 끄고 페이지를 새로고침한 후 다시 1-3 창을 켜보면 창에 있는 사용설정을 누른다. 그럼 저장버튼이 활성화가.. 2022. 8. 7. Firebase Authentication part 2 1. 로그인 구현 Firebase Authentication 페이지에서 회원가입이 되는 것 까지 확인을 했으니 로그인을 구현해보자. 회원가입 페이지와 마찬가지로 로그인 페이지 또한 간단하게 만들어본다. 먼저 Login.js 파일을 만들어 코드를 작성하자. import { useState } from "react"; import { useNavigate } from 'react-router-dom'; import { Box, Button, Grid, Link, TextField, Typography } from "@mui/material"; import Avatar from '@mui/material/Avatar'; import LockOutlinedIcon from '@mui/icons-material/.. 2022. 8. 5. Firebase Authentication part 1 1. Firebase Authentication 설정 Firebase Authentication으로 로그인 기능을 만들어보자. 만들었던 프로젝트를 눌러보면 왼쪽 메뉴에 빌드 탭이 보일것이다. 빌드 탭 안에 Authentication을 누르자. 시작하기 버튼을 누르면 이 페이지를 보고 있을 것이다. 지금은 이메일/비밀번호 기능만 사용할 것이므로 이메일/비밀번호 버튼을 누른다. 위에 거만 체크하고 저장 버튼을 누른다. 사용 설정이 완료되었다는 문구가 보이면 이제 React로 넘어간다. 2. Firebase Authentication 적용 전에 만들었던 Firebase.js 파일에서 하나를 추가한다. import { initializeApp } from "firebase/app"; import { getAna.. 2022. 8. 4. Firebase 연동 1. Firebase 프로젝트 생성 Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다. firebase.google.com Firebase에 접속한 후 로그인을 하면 상단에 콘솔로 이동 버튼이 있다. 버튼을 눌러 들어가면 프로젝트 추가 버튼이 있을 것이다. 프로젝트 이름을 쓰고 계속 버튼을 누른다. 2단계에서는 딱히 건들게 없다. 계속 버튼을 누른다. 마지막 3단계에서 계정 선택을 누르고 Default Account for Firebase를 선택하고 프로젝트 만들기를 누르면 시간이 잠시 소요되고 프로젝트가 만들어질 것이다. 2. Firebase SDK 생성 및 추가 프로젝트가 만들어지면 이런 화면을 보고 있을 것이다. 우.. 2022. 8. 2. 이전 1 다음
