Blockchain code Metaverse VR

Crypto×VR×SmartContract(517)

スポンサーリンク

//tips

//smart contract

Address部分に表示するwalletのアドレスを組み込み。

pile.address = data.address ?data.address:null

[id].jsにはおおよそ反映ができたのでedit.jsの方の反映に移る。

こちらでは反映に加えてfirebaseへのpostなどの操作も必要になる。

Deleteボタンの修正から。

const handleDelete=async(id)=>{
// データベース側の削除
await fetch('http://localhost:8000/notes/'+id,{
method:'DELETE'
})

// stateで保存しているデータの編集
//ここでクリックしたid以外のものを取得
const newNotes=notes.filter(note => note.id != id )

setNotes(newNotes)
}

ドキュメント名を特定するか、そもそものフィールドに何番目のドキュメントの格納しているかの目標を作るか考える。

自動生成されたIDを持つドキュメントリファレンスを作成して、後でそのリファレンスを使用する方法があるようなので、そちらを利用できるようにする。

一旦は手動でidを設定。

現在のNoteCardでは

{handleDelete
?
<CardHeader

action={
<IconButton onClick={()=>handleDelete(note.id)}>
<DeleteOutlined />
</IconButton>
}

のように設定しているのでidも引き継がせる必要がある。

pile.id = data.id ?data.id:null

n.indexOf is not a function at Function.fromStringが表示されたのでデータベースのidの数字を文字列化したところ反応しなかったのでid.toString()で

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

を試した。

エラーは生じずにクリックはできるがデータベースへの消去および非表示化ができていない。note.idがきちんと渡っているかを確認。

action={
// <IconButton onClick={()=>handleDelete(note.id)} }>
<IconButton onClick={()=>console.log('hi1'+note.id)}>

<DeleteOutlined />
</IconButton>
}

エラーを読んでいくとfirebaseへの接続で問題が出ているよう。NoteCardのアクションはfirebaseエラーのため中断されているよう。

Access to XMLHttpRequest at 'https://firebasestorage.googleapis.com/v0/b/myapp-8e583.appspot.com/o/1%2Fimage.jpg' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

GET https://firebasestorage.googleapis.com/v0/b/myapp-8e583.appspot.com/o/1%2Fimage.jpg net::ERR_FAILED 503

探していくとCORSの問題の類似例が見つけられた。ありがたし。これが起こっているのはeditに入る際のauthをまだ設定していないので、フロントエンド側で自由にデータベースを書き換えられてしまう問題を指摘していると言えそう。

https://qiita.com/qrusadorz/items/40234ac0b5c5c2315cad

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

ここは先にauthのログインとデータベースアクセス権限設定などを先に処理したほうが問題になりにくそう。順番が間違っていた。

Firebase authの設定に移行。

今回はmailとpassの認証を設定する。

フロントエンドである[id]/editに下記を組み込み。

import {getAuth} from "firebase/auth"

なぜならこちらのページのみfirebaseのデータベースを操作するため。[id]は表示しているだけなので不要か。

Firebaseconfigを見返してみるとauthDomainが設定されているので、そちらを通して操作していくことになりそう。

export default function edit({ ninja }) {//{id}
const firestorage = getStorage();
const auth=getAuth()

まずはconst auth=getAuth()のインスタンス生成から。

ただ、認証用のmailとpassを記入する場所を作成する必要がある。新たなページを作成するか[id]に作るか。最終的にはポップアップで対応するが今のところは[id]の最下部に追加して対応することにしよう。

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

For auth用にformを追加。これはmedium cardなどの使い回し。イベント関数は後で設定する。

const [umail,setUmail]=useState('')
const [upass,setUpass]=useState('')

Uncaught (in promise) FirebaseError: Firebase: Error (auth/invalid-email).が発生。

これはemail ユーザープロパティに指定された値は無効で、文字列のメールアドレスを指定する必要があるとのこと。

abc@gmail.com
abc123

などとすると無事にuser created:…が生成された。確認できるcredential情報の中にaccesstokenやユニークidなども含まれている。

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

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

createUserWithEmailAndPassword(auth,email,password)
.then((cred)=>{
console.log('user created:',cred.user)
setUmail('')
setUpass('')

})

}

for Auth
<form noValidate autoComplete="off" onSubmit={handleOnAuth}>
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"
>
submit
</Button>
</Box>

</form>

これで登録は可能になった。

登録が完了するとそのままログイン状態になるので、ログアウトの設定と登録後のログイン設定を付加していく。

人気の記事

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.