//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
});
}
}
問題なく動作はできたが、これらの要素を分解して理解していく必要がある。
