Blockchain code Metaverse VR

Crypto×VR×SmartContract(478)

スポンサーリンク

//tips

//smart contract

jsxでconst { data: session } = useSession()のsessionがtrueかどうかでreturn部分の内容を分岐させる方法を考える。

const { data: session } = useSession()をreturn前に記述。return後を下記のように記述した。

<div>
{(() => {
if (session) {
return(
<>
Signed in as {session.user.email} <br />
<button onClick={() => signOut()}>Sign out</button>
</>
)
} else {
return(
<>
Not signed in <br />
<button onClick={() => signIn()}>Sign in</button>
</>
)
}
})()}
</div>

こちらにてgithub連動は無事に対応させることができた。

参考:

https://www.yoheim.net/blog.php?q=20180409

twitterのauthを利用したapi連動を行う。

先に作成した認証のみのプロジェクトをtwitter仕様に変更。

import NextAuth from "next-auth"
import Providers from "next-auth/providers"

export default NextAuth({
// Configure one or more authentication providers
providers: [
Providers.Twitter({
clientId: process.env.Twitter_CONSUMER_KEY,
clientSecret: process.env.Twitter_CONSUMER_SECRET,
}),
// ...add more providers here
],
})

これらのkeyはtwitter開発ポータルでcreate new appして設定していく。

今回はOauth1.0の設定で行った。プライバシーポリシーページなども必要なのでgithub pageで作成したものを活用。

Callback urlにこちらを適用。

http://localhost:3000/api/auth/callback/twitter

これらのものは本番環境にアップするときには置き換える。

import NextAuth from "next-auth"
//import Providers from "next-auth/providers"
import TwitterProvider from "next-auth/providers/twitter";

export default NextAuth({
// Configure one or more authentication providers
providers: [
//Providers.Twitter({
TwitterProvider({
clientId: process.env.Twitter_CONSUMER_KEY,
clientSecret: process.env.Twitter_CONSUMER_SECRET,
}),
// ...add more providers here
],
})

Twitterのprovider認証でエラーが出たので問題箇所を修正。こちらでなんとか突破できた。

さらに検証のnetworkからpreviewを見るとsessionで保存している内容を確認することができる。

さらにapiの仕様のところまで進んでいく。

人気の記事

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.