Blockchain code Metaverse VR

Crypto×VR×SmartContract(518)

スポンサーリンク

//tips

//smart contract

Authでの登録後のログアウト、そしてログインの実装を行なっていく。

まずはsignoutから。importでsignout機能も加え、イベント機能を実装。

import {
getAuth,
createUserWithEmailAndPassword,
signOut
} from "firebase/auth"

async function handleOnAuthOut(e) {
e.preventDefault();

console.log('out')
signOut(auth)
.then(()=>{
console.log('signed out')
})
}

Logout
<Box textAlign="center">
<Button
type="submit"
varient="contained"
onClick={handleOnAuthOut}
>
submit
</Button>
</Box>

こちらできちんとボタンクリック後にログアウトできた。

続けてsignInWithEmailAndPasswordをimport。

先の登録と同様に下記のように作成。

async function handleOnAuthIn(e) {
e.preventDefault();

console.log('aiu')
const email=umail
const password=upass

signInWithEmailAndPassword(auth,email,password)
.then((cred)=>{
console.log('user loged in:',cred.user)
setUmail('')
setUpass('')

})

Login
<form noValidate autoComplete="off" onSubmit={handleOnAuthIn}>
Mail
<TextField
onChange={(e)=>setUmail(e.target.value)}
variant="outlined"
color="secondary"
fullWidth
required
/>
Pass
<TextField
onChange={(e)=>setUpass(e.target.value)}
variant="outlined"
color="secondary"
fullWidth
required
/>

<Box textAlign="center">
<Button
type="submit"
varient="contained"
onClick={()=>console.log('aa')}
>
submit
</Button>
</Box>

</form>

この内容でログインし直す。

下記で登録したものにログインし直す。
naki@gmail.com
naki123

無事に入ることができた。

ただ不思議なのはcreateUserWithEmailAndPasswordで登録された情報はどこに保存されるのかということ。

これは見事にfirebaseのAuthenticationのusersリストの中に情報が入っていた。

認証中であれば自身のeditページへ遷移可能にする。

その場合には登録emailと同じ登録emailページを探して表示するようにする。とするとデータベースの方へのmailの設定はマストになるか。

また、この場合emailで検索したuseridを取得し、http://localhost:3000/ID/[id]/editの[id]部分に代入させる必要がある。

その前にこのauthでCORS エラーが解消されるようになったかを確認する。

https://zenn.dev/ryo_kawamata/articles/cors-on-firebase-functions

https://stackoverflow.com/questions/42755131/enabling-cors-in-cloud-functions-for-firebase

https://firebase.google.com/docs/functions/http-events

下記が一番わかりやすそう。

https://github.com/firebase/functions-samples/tree/main/authorized-https-endpoint

const cors = require("cors")({ origin: true });

export const foo = functions.https.onRequest((req, res) => {
res.set("Access-Control-Allow-Origin", "*");
res.send({
data: "foo"
});

});

もしかしたらproviderなどを使う必要があるかもしれないのでこちらも目を通した。

https://zenn.dev/wattanx/articles/1b8d4b7b92a237

ログイン状態でhttp://localhost:3000/ID/1/editの中に入り、カードのhandleDeleteのボタンをクリックするも動作せず。

クリックしたところNoteCard内での受け渡しは問題なくできているようで、<IconButton onClick={()=>console.log('hi1'+note.id)}>ではきちんとhi110と表示された。note.idの番号もきちんと抜き出せている。

deleteDoc(docRef).then(()=>{console.log("deleteDoc(docRef)”)})としたところdeleteDoc(docRef)はログとして吐き出された。にもかかわらずデータベースから削除はされていない。

const handleDelete=async(id)=>{
//e.preventDefault()

console.log('Delete')
console.log(id)

const docRef=doc(firebaseApp,"mydata",id.toString())
//const docRef=doc(firebaseApp,"mydata",id)

console.log(docRef)

deleteDoc(docRef).then(()=>{console.log(deleteDoc(docRef))})

もしかしたらドキュメントの中のidではなくドキュメント番号そのものなのかもしれないと思い、

const docRef=doc(firebaseApp,"mydata","4")

で実行。

見事に消滅した。

ドキュメント番号のことだったか。

ドキュメント番号の取得仕方を確認する。

const querySnapshot = await getDocs(q);
querySnapshot.forEach((doc) => {
// doc.data() is never undefined for query doc snapshots
console.log(doc.id, " => ", doc.data());
});

このような表記を見ているとdoc.idで取得できそうなので、getstaticpropsにconsole.log('doc.id',doc.id)を追加して確認。

きちんと取得できていた。なのでdoc.idを取得する。

pile.docid = doc.id ?doc.id:null

また、カードでそちらの変数を受け取れるように設定。

action={
<IconButton onClick={()=>handleDelete(note.docid)}>

これできちんとクリックしたら消せるようになった。

ただ、更新ボタンを押さないといけないので再度リダイレクトさせて更新させる。

リアルタイム表示もできるが重くなりそうなので、router.reload()での再表示を代用する。

deleteDoc(docRef).then(()=>{router.reload()})

 

人気の記事

1

コロナによる需要変化 コロナパンデミックの影響で、人々は外に出られなくなり、自宅で過ごす時間が増えました。 この自粛ムードの中、下記のようなビジネスの需要変化が引き起こされています。 【利用者減少】 ...

2

米国レストランの決済時に毎日お世話になっていた「Square」のビジネスモデルについて本日はふれていきたいと思います。 「Square」とは、ネットにつながったモバイル端末と専用のカードリーダーを用意 ...

3

無料でネットショップを開けるアプリとして多くの人に驚きを与えたBASE株式会社が、2019年10月25日東証マザーズに上場しました。2020年2月時点で90万店を超えるショップを抱えるまでに成長してい ...

4

2011年にサービスを開始してから圧倒的な成長率を誇るインテリア通販サイト 【FLYMEe/フライミー】を皆さんご存じでしょうか。 「自分のイメージするインテリア、本当に欲しいインテリアがどこにあるの ...

5

ナイキのSNKRSが、なぜこれほどまでに人気なのか?調べてみました。 きっかけは米国での友達との会話。彼は自分のシューズをみせて、「これ20万円もしたんだぜ。」と語ってくれました。 あまり靴に興味がな ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HACKER , 2022 All Rights Reserved Powered by AFFINGER5.