Blockchain code Metaverse VR

Crypto×VR×SmartContract(483)

スポンサーリンク

//tips

//smart contract

一度callbackの下にcosole.logをつけて中身を確認。

callbacks: {
async jwt({ token, account, user }) {
console.log("token"+token);
console.log("account"+account);
console.log(token);
console.log(account);

こうすると、文字+変数で表したものは中身が表示されず

token[object Object]
account[object Object]

token[object Object]
accountundefined

のようになった。

一方でそのまま変数を抽出すると、

Token:
{
name: 'Nakynx',
email: ',
picture: 'jpg',
sub: ''
}

Account:
{
provider: 'twitter',
type: 'oauth',
providerAccountId: '',
oauth_token: '',
oauth_token_secret: ''
}

としっかり得ることができた。

ただ不思議なことに、下記のtoken情報とundefinedのアカウント情報が返ってきている。

Token:
{
name: '',
email: ',
picture: '.jpg',
sub: '',
twitter: {
accessToken: '',
refreshToken: ''
},
iat: ,
exp: ,
jti: '1'
}

undefined

下記の_app.jsで...pagePropsをコピーしているからだろうか要確認。

export default function App({
Component,
pageProps: { session, ...pageProps },
}) {
return (
<SessionProvider session={session}>
<Component {...pageProps} />
</SessionProvider>
)
}

Next.jsはすべてのページにおいて、ページを初期化するためにAppコンポーネントを使用しており、pages/_app.jsファイルで、ページの初期化をコントロールできるよう。

標準の App を上書きするために、./pages/_app.js を作成することになる。

https://nextjs-ja-translation-docs.vercel.app/docs/advanced-features/custom-app

ここは全ページで必要な挙動を書ける場所で、ページ移動間の固定レイアウト、 <Provider>でラップするなどが可能になる。

注意すべき点はNext.jsが用意するページコンポーネントと同じ挙動を取るので、_app.jsはサーバーサイドでレンダリング(getInitialPropsの実行を含む)され、ライフサイクルのイベントはクライアントサイドでも実行されるとのこと。

このためJWT callbackはクライアントによってセッションがアクセスされた際にも実行されるので2度目が呼び出されているように思われる。

This callback is called whenever a JSON Web Token is created (i.e. at sign in) or updated (i.e whenever a session is accessed in the client). The returned value will be signed and optionally encrypted, and it is stored in a cookie.

では、なぜaccountが消滅しているのか。これはサーバ側で返すものがreturn tokenのみであるから。だからクライアントはtoken情報のみを持ち、逆にサーバ側はjwtでtokenの中に必要な情報をtokenに詰め込んだ。

もう少し、突っ込むと、

function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}

Component prop はアクティブな pageで、ルート間で遷移するたびに Component は新しい page に変化する。そのため、returnの後のタグとなったComponentに渡した prop は、すべて変化先のpage で受け取ることができる。

pagePropsはデータ取得メソッドの 1 つによって、プリロードされた初期 props を持つオブジェクトで、データ取得されなければ空のオブジェクトとなる。

pageProps is an object with the initial props that were preloaded for your page by one of our data fetching methods, otherwise it's an empty object.

このdata fetching methodsの中にServer-side Renderingなどがある。

それを頭に入れておくとexport async function getServerSideProps(context) のreturnはこのApp経由で大元のHome(){…}に引き継がせようとしていることがわかる。

export default function App({
Component,
pageProps: { session, ...pageProps },
}) {
return (
<SessionProvider session={session}>
<Component {...pageProps} />
</SessionProvider>
)
}

このsessionproviderタグの中身が気になったので確認。

https://next-auth.js.org/getting-started/upgrade-v4#sessionprovider

sessionproviderはnext-authのVersion 4に必須となった機能らしく、getServerSidePropsからsessionnを受け取ったSessionProvider を使わなければuseSessionを使わなければいけないと書かれている。

return (
// `session` comes from `getServerSideProps` or `getInitialProps`.
// Avoids flickering/session loading on first load.
<SessionProvider session={session} refetchInterval={5 * 60}>
<Component {...pageProps} />
</SessionProvider>
)

This means that you will have to wrap any part of your application using useSession in this provider, if you were not doing so already.

あれ、やはりusesessionは不要なのではないか。refetchInterval={5 * 60}を追加してみる。

getServerSidePropsの代替案として使われている例もあるので確認。

https://next-auth.js.org/getting-started/client#custom-client-session-handling

export async function getServerSideProps(context)部分を再度復活させて挙動を見るのは延期。

人気の記事

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.