Firebase Authentication3 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. 이전 1 다음
