Blockchain code Metaverse VR

Crypto×VR×SmartContract(477)

スポンサーリンク

//tips

//smart contract

next-authライブラリを導入していく。

npm install --save next-auth

pages/apiフォルダ下にauthフォルダを作成して[…nextauth].jsファイルを作成。

[…nextauth].jsとすることでURLのメインパス以降を配列として受け取ることが可能になる。

Githubの認証機能を利用できるサンプル内容で実験してみる。

import NextAuth from 'next-auth';
import GithubProvider from 'next-auth/providers/github';

export default NextAuth({
// Configure one or more authentication providers
providers: [
GithubProvider({
clientId: process.env.GITHUB_ID,
clientSecret: process.env.GITHUB_SECRET,
}),
// ...add more providers here
],
});

/api/auth/以降のリクエストは自動的にNextAuth.js.で扱われるようになる。

All requests to /api/auth/* (signIn, callback, signOut, etc.) will automatically be handled by NextAuth.js.

.env.local.exampleの中身を設定していく。

NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET= # Linux: `openssl rand -hex 32` or go to https://generate-secret.now.sh/32

GITHUB_ID=
GITHUB_SECRET=

基本的な認証の流れを確認。

OAuth flow generally has 6 parts:

ユーザーからのアクセス認証リクエストが認証サーバーへ
The application requests authorization to access service resources from the user

ユーザーが認証サーバからの確認を承認すると、アプリに認証情報が提供される
If the user authorized the request, the application receives an authorization grant

アプリのアクセスに対して、認証サーバから認証情報の確認
The application requests an access token from the authorization server (API) by presenting authentication of its own identity, and the authorization grant

認証されるとアプリに対して、サーバが、認証トークンを発行
If the application identity is authenticated and the authorization grant is valid, the authorization server (API) issues an access token to the application. Authorization is complete.

アプリから情報の要求
The application requests the resource from the resource server (API) and presents the access token for authentication

トークンが有効であれば情報を獲得
If the access token is valid, the resource server (API) serves the resource to the application

Googleとgithubの設定を試してみたが、エラー。

code: 'MISSING_NEXTAUTH_API_ROUTE_ERROR'

こちらが一番わかりやすかった。

https://github.com/nextauthjs/next-auth

gituhubに行き、oauthappを作成。

Register a new OAuth applicationにて、http://localhost:3000/api/auth/callback/githubをcallbackURLに設定。

Apitest.jsファイルを新たにpagesフォルダに作成し、Add React Hookのボタンによる認証設定をペースト。

import { useSession, signIn, signOut } from "next-auth/react"

export default function Component() {
const { data: session } = useSession()
if (session) {
return (
<>
Signed in as {session.user.email} <br />
<button onClick={() => signOut()}>Sign out</button>
</>
)
}
return (
<>
Not signed in <br />
<button onClick={() => signIn()}>Sign in</button>
</>
)
}

実行すると、Error: [next-auth]: `useSession` must be wrapped in a <SessionProvider />とのエラーが発生。

Make sure that <SessionProvider> is added to pages/_app.js.との記載があり、下記を追加。

import { SessionProvider } from "next-auth/react"

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

ページはなんとか表示できるようになったがボタンクリックをしてもきちんと認証providerを読み込まない。

一旦新規のnextプロジェクトを作り挙動をみる。きちんと成功した。index.jsに書き込む必要があったよう。ルートの問題。

認証ボタンの作成と認証はできた。分岐条件がまずいようなので調整。

人気の記事

1

皆さん、ついに、エアラインでも、サブスクリプションが始まったのはご存じですか? まだ実験段階ですが、ANAが、定額全国住み放題サービスを提供する「ADDress」と組んで、国内線を4回まで定額利用可能 ...

2

無料でネットショップを開けるアプリとして多くの人に驚きを与えたBASE株式会社が、2019年10月25日東証マザーズに上場しました。2020年2月時点で90万店を超えるショップを抱えるまでに成長してい ...

3

2011年にサービスを開始してから圧倒的な成長率を誇るインテリア通販サイト 【FLYMEe/フライミー】を皆さんご存じでしょうか。 「自分のイメージするインテリア、本当に欲しいインテリアがどこにあるの ...

4

ついに、noteの月間アクティブユーザー数が4400万人(2020年3月時点)に到達しました。 そもそも、「note」とは、クリエイターが、文章やマンガ、写真、音声を投稿することができ、ユーザーはその ...

5

ボードゲームカフェが1日2回転で儲かるという記事をみつけたので興味を持ち、調べてみました。 まずは、需要がどれくらいあるのか、市場のようすからみていきましょう。 世界最大のボードゲーム市場はドイツで、 ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HUNTER , 2023 All Rights Reserved Powered by AFFINGER5.