userInfo를 찍어보면 아래 이미지와 같이 firebase에서 제공하는 photoURL을 사용할 수있습니다.
useEffect(() => {
//*onAuthStateChanged firebase사용자의 상태 변화에 따라 추적 함수..
firebase.auth().onAuthStateChanged((userInfo) => {
//photoURL로 사용자img 줄수있음..firebase.auth자체기능
console.log(userInfo);
});
}, []);
개발도구창 확인시 photoURL 확인가능
네이버 클라우드에서 유저 등록시에 제공할 기본 프로필 이미지를 등록하고
등록한 이미지의 주소를 불러와서 firebase에서 제공하는 updateProfile()로 firebase에 업데이트 시켜줍니다.
await createdUser.user.updateProfile({
//updateProfile을 통해서 firbase에서 제공하는 유저 정보를 설정 할 수 있음
//displayName은 firbase 자체 기능 : 값 설정 가능
//유저가 입력한 name을 넣어줌
displayName: name,
//user 프로필 이미지추가
photoURL:
});
mongoDB에도 저장하기 위해서 register 페이지에 body에도 추가하여 server로 보내줍니다.
let body = {
displayName: createdUser.user.multiFactor.user.displayName,
email: createdUser.user.multiFactor.user.email,
uid: createdUser.user.multiFactor.user.uid,
//user 프로필 이미지추가
photoURL:
};
// console.log(body);
axios.post("/api/user/register", body).then((res) => {
if (res.data.success) {
//회원가입 성공시
setLoaded(false);
navigate("/login");
} else {
//회원가입 실패시
return alert("회원가입 실패했어요..");
}
});
photoURL추가로 server쪽 User스키마도 수정 작업 진행
const mongoose = require("mongoose");
const userSchema = new mongoose.Schema(
{
userNum: Number,
email: String,
displayName: String,
uid: String,
//프로필 img 추가
photoURL: String,
},
{ collection: "users" }
);
const User = mongoose.model("User", userSchema);
module.exports = { User };
이후에 회원가입 후 로그인을 진행한 뒤에 mongoDB에서 확인을 해보면 photoURL이 잘 저장 되어 있는 것을 확인할 수 있습니다.
firebase에서도 확인 가능합니다.
MongoDB유저정보
photoUrl reducer로 관리하기 위해서 추가
export const userSlice = createSlice({
name: "user",
initialState: {
displayName: "",
uid: "",
accessToken: "",
//프로필 이미지 추가
photoURL: "",
},
reducers: {
//로그인시에 데이터
loginUser: (state, action) => {
state.displayName = action.payload.displayName;
state.uid = action.payload.uid;
state.accessToken = action.payload.accessToken;
state.photoURL = action.payload.photoURL;
},
//user 로그아웃시에 값 비워줌
clearUser: (state) => {
state.displayName = "";
state.uid = "";
state.accessToken = "";
},
},
});
list페이지에서 아래처럼 react-avatar를 사용하여 user프로필 이미지 등록
<Avatar
size="40"
round={true}
src={post.author.photoURL}
/>
유저 기본 프로필 이미지 출력 확인
공식 문서 https://firebase.google.com/docs/auth/web/manage-users?hl=ko
Firebase에서 사용자 관리하기
의견 보내기 Firebase에서 사용자 관리하기 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. 사용자 생성하기 Firebase 프로젝트에서 신규 사용자를 생성할 때는 c
firebase.google.com
아바타 https://www.npmjs.com/package/react-avatar
react-avatar
Universal React avatar component makes it possible to generate avatars based on user information.. Latest version: 5.0.3, last published: 10 months ago. Start using react-avatar in your project by running `npm i react-avatar`. There are 129 other projects
www.npmjs.com
