Blockchain code Metaverse VR

Crypto×VR×SmartContract(479)

スポンサーリンク

//tips

//smart contract

Twitter apiの連携継続。

こちらの参考のものの実装を確認していく。

https://github.com/colbyfayock/my-auth-app

プロジェクトを作成。

npx create-next-app my-auth-twitter -e https://github.com/colbyfayock/my-auth-app

こちらで確認できたらnext-app-projectに反映させる。

現在のままではアクセス時にtwitterが発行するトークンを取得できていないのでそちらを取得する必要がある。

これがjwtメソッドにより実行できるとのこと。

callbacks:{
async jwt({ token, user, account, profile, isNewUser }) {
return token
}

さらに下記を利用するといいようなのでimport。

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

npm install twitter-lite

サーバー側に追加。

無事に一通りの実装を完了。twitterのapiのエンドポイントを活用できるようになった。

import Head from 'next/head'
import Image from 'next/image'
import { signIn, signOut, useSession, getSession } from 'next-auth/client';
import { useState } from 'react';

import styles from '../styles/Home.module.css'

export default function Home({ session }) {
// const [session] = useSession();
const [statuses, setStatuses] = useState();

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

const formData = new FormData(e.currentTarget);
const query = formData.get('query');//queryはinput nameの内容

const results = await fetch('/api/twitter/search', {
method: 'POST',
body: JSON.stringify({
query
})
}).then(res => res.json());

setStatuses(results.data);//res.status(200).jsonのdata箇所のこと
}

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

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

const results = await fetch('/api/twitter/tweet', {
method: 'POST',
body: JSON.stringify({
status
})
}).then(res => res.json());

alert('Success!')
}

return (
<div >
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>

<main className={styles.main}>
<h1 className={styles.title}>
Welcome { session ? session.user.name : 'to Next.js' }
</h1>

<p className={styles.description}>
{!session && <>
Not signed in <br/>
<button onClick={() => signIn()}>Sign in</button>
</>}
{session && <>
Signed in as {session.user.email} <br/>
<button onClick={() => signOut()}>Sign out</button>
</>}
</p>

<div>

<form onSubmit={handleOnTweetSubmit}>
<h2>Tweet</h2>
<textarea name='status'/>
<button>Tweet</button>
</form>

<form onSubmit={handleOnSearchSubmit}>
<h2>Search</h2>
<input type="search" name='query'/>
<button>Search</button>
</form>

{statuses && (
<ul>
{statuses.map(({id,text,user})=>{
return (
<li key={id}>
<p>{text}</p>
<p>By {user.name}({user.screen_name})</p>
</li>
);
})}
</ul>
)}

</div>
</main>

<footer className={styles.footer}>
<a
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Powered by{' '}
<span className={styles.logo}>
<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
</span>
</a>
</footer>
</div>
)
}

export async function getServerSideProps(context) {
const session = await getSession(context);
return {
props: {
session
}
}
}

import {getSession} from 'next-auth/client'
import {getToken} from 'next-auth/jwt'

//import
import Twitter from 'twitter-lite';

export default async (req,res)=>{//サーバー側機能

const body = JSON.parse(req.body);//テキストをjsオブジェクトへ変換
const { query } = body;//bodyの中のqueryを抜き出し

//console.log(query);

const session=await getSession({ req });//sesssionを保持できるようにする
const token=await getToken({
req,
secret:process.env.NEXTAUTH_SECRET
});//tokenを保持できるようにする
//https://next-auth.js.org/tutorials/securing-pages-and-api-routes#using-gettoken

console.log('session',session);
console.log('token',token);

const client = new Twitter({
//subdomain: "api", // "api" is the default (change for other subdomains)
//version: "1.1", // version "1.1" is the default (change for other subdomains)
consumer_key: process.env.TWITTER_ID, // from Twitter.
consumer_secret: process.env.TWITTER_SECRET, // from Twitter.
access_token_key: token.twitter.accessToken, // from your User (oauth_token)
access_token_secret: token.twitter.refreshToken // from your User (oauth_token_secret)
});

try{
const results = await client.get('search/tweets', {
q: query
});

return res.status(200).json({
status:'OK',
data:results.statuses

});
}catch(e){
console.log(e);
return res.status(400).json({
status:e.message
});
}
}

問題なく動作はできたが、これらの要素を分解して理解していく必要がある。

人気の記事

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.