Q&A
id の扱いが良くないですね。createUserWithEmailAndPassword の結果から user を受け取ってその uid を使う必要があるかと。また、id は user ドキュメントのプロパティではなく、キーにするのがお勧めです。
#新規登録時に取得した名前とIDを元にマイページに反映させたいです。
下記にそれぞれのページを記載しましたが、
現状、新規登録時にFirestoreにてユーザーネームと時間とIDはデータの格納ができてます。
しかしマイページにて新規登録時に格納したデータが取得できていないようです。。
IDを元にマイページへページ遷移させて、名前等ユーザー情報を表示させたいのです。。
分かる方いらっしゃいましたらお力添えをいただきたいです。
よろしくお願いいたします。
#新規登録
<template> <div> <Header /> <div class="signup flex"> <div class="signup-inner flex"> <h2>新規登録</h2> <input type="text" placeholder="Username" v-model="userName" /> <input type="text" placeholder="Email" v-model="email" /> <input type="password" placeholder="Password" v-model="password" /> <button class="btn-signup" @click.prevent="signUp">登録</button> <p> 既に登録済みの方は <router-link to="/signin">こちらへ</router-link> </p> </div> </div> </div> </template>
export default { name: "Signup", data() { return { email: "", password: "", userName: "", }; }, components: { Header, }, methods: { signUp() { const id = firebase .firestore() .collection("users") .doc().id; firebase .auth() .createUserWithEmailAndPassword(this.email, this.password) .then((willDelete) => { if (willDelete) { this.$swal("登録に成功しました。", { icon: "success", }); firebase .firestore() .collection("users") .add({ userName: this.userName, time: firebase.firestore.FieldValue.serverTimestamp(), id: id, }); this.$router.push("/signin"); } }) .catch(() => { this.$swal("登録情報が正しくありません。", { icon: "error", }); }); }, }, }; </script>
新規登録にてユーザーネームとID、時間を取得してFirestoreにデータを追加してます。
#vueルーター
import Vue from "vue"; import VueRouter from "vue-router"; import Signup from "../views/signup.vue"; import Mypage from "../views/mypage.vue"; import firebase from "firebase"; Vue.use(VueRouter); const routes = [ { path: "/signup", name: "Signup", component: Signup, }, { path: "/mypage/:id", name: "Mypage", component: Mypage, meta: { requiresAuth: true }, },
#マイページ
<template v-for="data in allData" :index="index" :profile="profile" :key="data.id"> <div> <Header /> <div class="mypage flex"> <div class="mypage-inner flex"> <div class="profile-inner flex" > <img class="profile-inner-img" src="../assets/アイコン.jpg" alt="デフォルト画像" /> <div class="profile-inner-name">{{ allData.name }}</div> </div> ~ 省略 ~ </div> <div class="profile-list"> <ul class="list-item"> <li class="list-item" >性別：{{ allData.sex }}</li> <li class="list-item">年齢：{{ allData.age }}</li> <li class="list-item">職業：{{ allData.professions }}</li> <li class="list-item">居住地：</li> <li class="list-item">好きな映画：</li> <li class="list-item">好きなジャンル：{{ allData.genre }}</li> <li class="list-item">自己紹介：{{ allData.selfpr }}</li> </ul> </div> <hr class="separate" /> <div class="profile-post flex"> <h3>{{ allData.name }}の投稿一覧</h3> </div> </div> </div> </template>
export default { data() { return { name: "", allData: [], }; }, created() { firebase .firestore() .collection("users") .get() .then((snapshot) => { snapshot.forEach((doc) => { this.allData.push(doc.data()); }); }); },
firebase.firestore().collection("users").get()にて全てのデータを取得して
allDataにデータを格納してます。
#ヘッダー
<template> <header class="header"> <router-link to="/" class="header-ttl neon"> <span class="header-ttl-color neon2">C</span>inema </router-link> <ul class="header-menu"> <li> <router-link to="`mypage/${profile.id}`" class="header-link neon3 flash">MYPAGE</router-link> </li> </ul> </header> </template>
export default { props: { profile: { type: Object, }, index: { type: Number, }, },
ヘッダーにてマイページにて取得したデータをpropsで受け取り、
下記のようにID先のマイページに飛べるように記述してます。
<router-link to="`mypage/${profile.id}`" class="header-link neon3 flash">MYPAGE</router-link>
#補足
<div class="profile-inner-name">{{ profileData.userName }}</div>
export default { data() { return { profileData: [], }; created() { const currentUser = firebase.auth().currentUser; if (currentUser) { firebase .firestore() .collection("users") .doc(currentUser.uid) .get() .then((snapshot) => { this.profileData.push(snapshot.data().userName); console.log(this.profileData); }); } },
そうなのですね・・そういう方法があるのですね。誤ったやり方をしておりました。。しかし、createUserWithEmailAndPasswordで登録した際にuidを使うやり方がいまいち分からずです。。
ずうずうしく申し訳ございませんが、実際試したり調べましたが分からず行き詰っております。。
アカウント作成されたタイミングでユーザー固有のID（uid）が取得されることはわかりました。また、displayNameなども用意されていることも確認致しました。
しかしuidやdisplayNameをどのように記述して、データとして取得できるのか、どこに格納されているのか分からない状況です。。
回答1件
0
ベストアンサー
とりあえず signup はこんな感じでいかがでしょう。
これで users コレクションに uid をキーとするドキュメントができます。
js
1 signUp() { 2 firebase 3 .auth() 4 .createUserWithEmailAndPassword(this.email, this.password) 5 .then((userCredential) => { 6 this.$swal("登録に成功しました。", { 7 icon: "success", 8 }); 9 return firebase 10 .firestore() 11 .collection("users") 12 .doc(userCredential.user.uid) 13 .set({ 14 userName: this.userName, 15 time: firebase.firestore.FieldValue.serverTimestamp(), 16 }); 17 }) 18 .then(() => { 19 this.$router.push("/signin"); 20 }) 21 .catch(() => { 22 this.$swal("登録情報が正しくありません。", { 23 icon: "error", 24 }); 25 }); 26 },
自分の情報を取得するには、currentUser の uid を使って次のように書けます。
js
1 const currentUser = firebase.auth().currentUser; 2 if (currentUser) { 3 firebase 4 .firestore() 5 .collection("users") 6 .doc(currentUser.uid) 7 .get() 8 .then((snapshot) => { 9 console.log(snapshot.data().userName); 10 }); 11 }
投稿2021/04/25 15:46
総合スコア7901
丁寧に教えて頂き本当にありがとうございます。。
userCredential.user.uidとすることでidを使うことが出来るのですね！
自分の情報を取得するやり方までご教示頂き本当に助かります。
頂いた内容でやっと開発が進めれそうです。
ちなみにですが、「userCredential.user.uid」にてuidをsetしてますが、
get(取得)する際には「currentUser.uid」となるのが正ですか・・？
また、今実際に自身の環境下で試してみました。
補足として記事に追加させていただいたのですが、console.log()でuserNameはデータを取得してますが、
HTML内に表示するために、this.profileData.push(snapshot.data().userName);としてprofileDataに入れてから{{ profileData.userName }}で取得するようにしてみましたが、上手く取得できません。。
ほんと初心者で分からないだらけで申し訳ございませんが、教えていただけると幸いです。。
あなたの回答
tips
プレビュー
