Blockchain code Metaverse VR

Crypto×VR×SmartContract(485)

スポンサーリンク

//tips

//smart contract

Next-authだけでなくnext.jsの記述も確認。

If you export an async function called getServerSideProps from a page, Next.js will pre-render this page on each request using the data returned by getServerSideProps.

Usesessionを使わない方法だとSessionProvider を_appで使えないなどの制約があるのか、{session}の書き方を変える必要があるのかを調べる。

console.log(JSON.stringify(session));であったことから、sessionそのものが引き継げていないことがわかっている。

Nextのドキュメントを見ていくと結局usesessionと getServerSidePropsを併用していることがわかった。この辺りは謎。

https://github.com/nextauthjs/next-auth-example/blob/main/pages/server.tsx

結局、下記の形で進めるのが今の所ベストとなりそう。
export default function Home() {//{ session }
const { data: session } = useSession()

バージョンアップでまた変わる可能性がある箇所として認識しておく。

The useSession() React Hook in the NextAuth.js client is the easiest way to check if someone is signed in.

useSession() returns an object containing two values: data and status:

data: This can be three values: Session / undefined / null.
-when the session hasn't been fetched yet, data will undefined
-in case it failed to retrieve the session, data will be null
-in case of success, data will be Session.

status: enum mapping to three possible session states: "loading" | "authenticated" | "unauthenticated"

また、プロテクトされているページのロードはuserのセッションが有効かどうかサーバ側リクエストを作り、SSTページを生成する。

every protected page load has to make a server-side request to check if the session is valid and then generate the requested page (SSR).

stringify() は、JavaScriptオブジェクトを取得し、JSON 文字列に変換するので、parseと間違えない。

JSON.parse() は、JSON 文字列を取得し、JavaScriptオブジェクトに変換。JSON.stringify() は、JavaScriptオブジェクトを取得し、JSON 文字列に変換。

const myObj = {
name: 'Skip',
age: 2,
favoriteFood: 'Steak'
};

const myObjStr = JSON.stringify(myObj);

console.log(myObjStr);
// "{"name":"Sammy","age":6,"favoriteFood":"Tofu"}"

クライアントサイドとサーバサイドのやりとりの認識が足りないためgetServerSidePropsの穴が見つけられないのかもしれないと、node.jsの仕組みの部分から確認。

プロキシ部分は関係ないように思えるので、pageのルーティングがそもそもhttpのgetなどによるルーティングをベースにされており、page下のファイル名がurlの/後に反映され、そこがアクセス先として利用されることは認識しておく。

ブラウザから/fooでサーバにアクセスされた場合、SSRなら完全なhtmlを返し、ブラウザ側で一部jsの紐付け処理(ハイドレーション)が行われるが、ここでは問題なさそう。有識者に聞く。

メインパートに構造を融合させる前に、他に調べた方が良さそうな要素を確認。

ユーザーがブラウザでイベント処理を行う場合の動作も確認。

<form onSubmit={handleOnTweetSubmit}>
<button>Tweet</button>

フォームの中にボタンを作り、ボタンが押されたら指定のイベントを実行させるように設定。

イベントの中身は別ページの内容を取得するのでasyncを使用している。e.preventDefault();はイベント発生に伴い、デフォルト機能であるページの再読み込みを行わせないようにe.preventDefault();を実行。

FormDataオブジェクトとは、サーバーにデータを送信する際に使用するオブジェクトで、ユーザーが入力するフォームデータや、任意のデータをサーバーに送信できる。内容はキー・バリューのペアとして利用。

HTMLの<form>要素からFormDataオブジェクトを作成することができる。

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

const formData = new FormData(e.currentTarget);
const query = formData.get('query');

const results = await fetch('/api/twitter/search', {//ここでserch.jsに飛ばし
method: 'POST',
body: JSON.stringify({
query
})
}).then(res => res.json());

setStatuses(results.data);
}

ここでformData.getとし、キーqueryを指定することで、FormDataオブジェクト内のqueryのバリューを受け取ることができる。このキーはform内で下記のように指定されたもの。

<input type="search" name="query" />

バリューはインプット内容。formData.get()は引数にキー名を渡すと、値を返すもの。

ちなみにEvent.currentTarget と Event.targetの違いは、Event.currentTargetはイベント発生内容ではなく、イベントを発生させたボタンの登録内容を取得するもの。

Event.currentTarget:イベントハンドラを登録した要素
Event.target:イベントが発生した要素

ここではname="query" を取得したかったので、このようにしている。

参考:
https://javascript.keicode.com/newjs/how-to-use-formdata.php#1

https://qiita.com/_Keitaro_/items/6a3342735d3429175300

【JavaScript入門】e.targetとe.currentTargetの違い

さらに、イベントで外部データの取得を行わせるため、search.jsに飛ばして、オブジェクトからjsonテキストに変換したインプット内容をpostでサーバへデータ送付。

const results = await fetch('/api/twitter/search', {//ここでserch.jsに飛ばし
method: 'POST',
body: JSON.stringify({
query
})
}).then(res => res.json());

ここでserch側のapi処理内容を確認。

req.bodyでpostされたインプット内容を取得。このreqの中にsession情報とtoken情報も含まれているよう。

export default async (req, res) => {//APIのルートの一つ/search
const body = JSON.parse(req.body);
const { query } = body;

const session = await getSession({ req });
const token = await getToken({
req,
secret: process.env.NEXTAUTH_SECRET
});

const client = new Twitter({
subdomain: 'api',
consumer_key: process.env.TWITTER_CONSUMER_KEY,
consumer_secret: process.env.TWITTER_CONSUMER_SECRET,
access_token_key: token.twitter.accessToken,
access_token_secret: token.twitter.refreshToken
});

try {
const results = await client.get('search/tweets', {
q: query
});
return res.status(200).json({
status: 'Ok',
data: results.statuses
});
} catch(e) {
return res.status(400).json({
status: e.message
});
}
}

Tokenの方はjetコンテンツからの取得となるそう。同時にNEXTAUTH_URL environment variable の設定も必要とのこと。

If you are using JSON Web Tokens you can use the getToken() helper to access the contents of the JWT without having to handle JWT decryption / verification yourself. This method can only be used server side.

You can use the getToken() helper function in any application as long as you set the NEXTAUTH_URL environment variable and the application is able to read the JWT cookie (e.g. is on the same domain).

この際に secret: process.env.NEXTAUTH_SECRETを一緒に渡す。

Pass getToken the same value for secret as specified in pages/api/auth/[...nextauth].js.

https://next-auth.js.org/configuration/options#jwt

twitterの認証はtwitter-liteの機能を用い、await client.get('search/tweets’,でインプット内容を引数にtwitterでの検索結果を取得する。

https://www.npmjs.com/package/twitter-lite

これを使って、別途searchではなくtimelineを表示する機能も追加する。

https://github.com/draftbit/twitter-lite

 

人気の記事

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.