Next-authをインストールし、APIルーティングファイルAPP/API/AUTH/[... nextauth] /Route.js構(gòu)成Googleログインとシークレットを作成します。 2。Google_Client_id、Google_client_secret、およびnextauth_secret in .env.local; 3.サインインおよびサインアウトメソッドを使用して、ログインボタンとログアウトボタンを追加し、アプリケーションをsessionProviderでラップします。 4. GetServersessionを介して個々のページを保護するか、withauthミドルウェアを使用して指定されたルートを保護します。 5.オプションでセッションデータを拡張し、コールバックを介してユーザーロールまたはIDを追加します。 6.オプションで資格情報を使用して、プロバイダーは電子メールパスワードログインをサポートし、バックエンド検証が必要です。 7. Prismaと @auth/prisma-adapterを組み合わせて、ユーザーデータとセッションデータを持続して、完全な認(rèn)証システムを?qū)g現(xiàn)することをお勧めします。
next.jsアプリで認(rèn)証を?qū)g裝すると、複雑である必要はありません - nextauth.js （現(xiàn)在はauth.jsの一部）を使用すると、セットアップを最小限に抑えた安全なログイン、ユーザーセッション、ソーシャルまたは電子メール/パスワードのサインインを簡単に追加できます。迅速かつ正確に機能させる方法は次のとおりです。
next.jsアプリでnextauth.jsを設(shè)定します
必要なパッケージをインストールすることから始めます。
NPM Next-authをインストールします
next.jsアプリルーター（V13）はルートハンドラーを使用します。 app/api/auth/[...nextauth]/route.jsでnextauthのAPIルートを作成します：
「Next-Auth」からNextAuthをインポートします。
「Next-Auth/Providers/Google」からGoogleProviderをインポートします。
const handler = nextauth（{
プロバイダー：[
GoogleProvider（{
clientId：process.env.google_client_id、
clientsecret：process.env.google_client_secret、
}）、
]、、
秘密：process.env.nextauth_secret、
}）;
Export {Handler As Get、Handler As Post};？必ず必要な環(huán)境変數(shù)を使用して
.env.localファイルを設(shè)定してください。Google_client_id = your-google-client-id Google_Client_Secret = Your-Google-Client-Secret nextauth_secret = your-secure-secret-here
NEXTAUTH_SECRETは重要です - 強力なランダム文字列を使用します（openssl rand -base64 32で生成します）。
サインイン /サインアウトボタンを追加します
コンポーネントのnext-auth/reactのsignIn()およびsignOut()メソッドを使用します。
「クライアントの使用」;
{next-auth/React 'から{signin、signout、outessession}をimport;
デフォルト関數(shù)authbutton（）{エクスポート{
const {data：session} = outessession（）;
if（session）{
戻る （
<div>
<p>ようこそ、{session.user？。.email} </p>
<button onclick = {（）=> signout（）}> sight out </button>
</div>
）;
}
戻る （
<button onclick = {（）=> signin（ 'Google'）}>
Googleにサインインします
</button>
）;
}cessions
SessionProviderでアプリをlayout.jsでラップします。JSまたはRootLayout：'next-auth/React'から{sessionProvider}をインポートします。 デフォルト機能rootlayout（{children}）{ 戻る （ <html lang = "en"> <body> <SessionProvider> {Children} </sessionProvider> </body> </html> ）; }
ルートとミドルウェアの保護
特定のページを認(rèn)証されていないユーザーから保護するには、サーバーコンポーネントまたはミドルウェアを介してセッションステータスを確認(rèn)します。
オプション1：サーバーコンポーネントを使用してページを保護します
'next-auth'から{getServersession}をインポートします。
'next/navigation'から{redirect}をインポートします。
デフォルトのasync function dashboard（）をエクスポートする{
const session = await getServersession（）;
if（！session）{
Redirect（ '/api/auth/signin'）;
}
return <div>保護されたダッシュボード</div>;
}オプション2：ミドルウェアを使用します（グローバル保護に推奨）
ルートまたはappディレクトリにmiddleware.jsを作成します。
「Next-Auth/Middleware」から{withauth}をインポートします。
authでデフォルトをエクスポートする（{
ページ：{
Signin： '/login'、
}、
}）;
//特定のルートにのみミドルウェアを適用します
const config = {{{
マッチャー：['/dashboard'、 '/profile/：path*']、
};これにより、ユーザーが署名されていない限り、任意の/dashboard /profile/...ルートを保護します。
セッションデータの拡張（オプション）
デフォルトでは、セッションには基本的なユーザー情報のみが含まれています。 （役割やIDなど）を追加するには、コールバックを使用します。
const handler = nextauth（{
プロバイダー：[...]、
コールバック：{
async session（{session、token}）{
session.user.id = token.sub;
session.user.role = token.role || 'ユーザー';
返信セッション。
}、
async jwt（{token、user}）{
if（user）{
token.role = user.role; // DBに役割を保存すると仮定します
}
トークンを返します。
}、
}、
}）; session.user.idおよびsession.user.roleクライアント側(cè)にあります。
電子メール/パスワードログインをサポートします
資格情報プロバイダーを使用して資格情報を有効にする（注：バックエンド検証なしでのみ推奨されない）：
「Next-Auth/Providers/Credentials」から資格情報Sproviderをインポートします。
credentientientiveSprovider（{
名前：「資格情報」、
資格： {
電子メール：{label： 'email'、type： 'email'}、
パスワード：{label： 'password'、type： 'password'}、
}、
Async Authorize（資格情報）{
//ロジックを追加して、データベースに対して資格情報を確認(rèn)します
const user = await verifyuser（credentivelisents.email、credentials.password）;
ユーザーを返しますか？ {id： '1'、name：user.name、email：user.email}：null;
}、
}）、「この方法は、実際のセッション自體を作成するものではありません。常に安全に検証し、データベースアダプターとの組み合わせを検討します。
データベースの使用（オプションですが推奨）
ユーザーを維持するには、Prismaとアダプターを使用してデータベースをリンクします。
NPMインストールprisma @prisma/client @auth/prisma-adapter
NextAuth configを更新します：
'@auth/prisma-adapter'から{prismaadapter}をインポートします。
「@prisma/client」から{prismaclient}をインポートします。
const prisma = new prismaclient（）;
const handler = nextauth（{
アダプター：prismaadapter（prisma）、
プロバイダー：[...]、
}）;これにより、ユーザーの作成、セッションストレージ、およびアカウントリンクが可能になります。
基本的に、それだけです。ほんの數(shù)個のファイルとソリッド環(huán)境のセットアップにより、next.jsアプリに安全でスケーラブルな認(rèn)証があります。ソーシャルログイン、保護されたルート、さらにはデータベースの持続性をサポートしています。魔法ではなく、うまく設(shè)計されたツールだけが一緒に作業(yè)します。
以上がnext.jsおよびnextauth.jsで認(rèn)証を?qū)g裝しますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。
ホットAIツール
Undress AI Tool
脫衣畫像を無料で
Undresser.AI Undress
リアルなヌード寫真を作成する AI 搭載アプリ
AI Clothes Remover
寫真から衣服を削除するオンライン AI ツール。
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中國語版
中國語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統(tǒng)合開発環(huán)境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
Safari でプライベート ブラウジング認(rèn)証を無効にする方法: iOS 17 のハウツー ガイド
Sep 11, 2023 pm 06:37 PM
iOS 17 では、Apple はモバイル オペレーティング システムにいくつかの新しいプライバシーおよびセキュリティ機能を?qū)毪筏蓼筏?。そ?1 つは、Safari のプライベート ブラウジング タブに対して 2 段階認(rèn)証を要求する機能です。その仕組みとオフにする方法は次のとおりです。 iOS 17 または iPadOS 17 を?qū)g行している iPhone または iPad で、Safari でプライベート ブラウズ タブを開いてからセッションまたはアプリを終了すると、Apple のブラウザでは再度アクセスするために Face ID/TouchID 認(rèn)証またはパスコードが必要になります。言い換えれば、ロックが解除されている iPhone または iPad を誰かが手に入れても、パスコードを知らなければ閲覧することはできません。
PHP でシングル サインオンを?qū)g裝する方法
Jun 11, 2023 pm 07:01 PM
シングル サインオン (SSO) は、ユーザーがユーザー名とパスワードなどの単一の資格情報セットを使用して、複數(shù)のアプリケーションおよびサイト間で認(rèn)証できるようにする認(rèn)証メカニズムです。このメカニズムにより、ユーザー エクスペリエンスと効率が向上すると同時に、セキュリティも強化されます。 PHP では、シングル サインオンを?qū)g裝するには、いくつかの特定のメソッドが必要です。ここではPHPでシングルサインオンを?qū)g裝する方法を紹介します。以下の手順に分けて説明します。 OAuth2を使用したユーザー認(rèn)証センター（AuthenticationCenter）を作成します。
Slimフレームワークのミドルウェアを利用したユーザー認(rèn)証の実裝
Jul 29, 2023 am 10:22 AM
Slim フレームワークのミドルウェアを使用したユーザー認(rèn)証の実裝 Web アプリケーションの開発では、ユーザー認(rèn)証が重要な機能になっています。ユーザーの個人情報や機密データを保護するには、ユーザーの身元を確認(rèn)するための信頼できる方法が必要です。この記事では、Slimフレームワークのミドルウェアを利用してユーザー認(rèn)証を?qū)g裝する方法を紹介します。 Slim フレームワークは、Web アプリケーションを簡単かつ迅速に構(gòu)築する方法を提供する軽量の PHP フレームワークです。強力な機能の 1 つは中央です。
Angular と Node を使用したトークンベースの認(rèn)証
Sep 01, 2023 pm 02:01 PM
認(rèn)証は、Web アプリケーションの最も重要な部分の 1 つです。このチュートリアルでは、トークンベースの認(rèn)証システムと、それが従來のログイン システムとどのように異なるかについて説明します。このチュートリアルを終えると、Angular と Node.js で書かれた完全に動作するデモが表示されます。従來の認(rèn)証システム トークンベースの認(rèn)証システムに進む前に、従來の認(rèn)証システムを見てみましょう。ユーザーはログイン フォームにユーザー名とパスワードを入力し、[ログイン] をクリックします。リクエストを行った後、データベースにクエリを?qū)g行してバックエンドでユーザーを認(rèn)証します。リクエストが有効な場合、データベースから取得したユーザー情報を使用してセッションが作成され、セッション情報が応答ヘッダーで返され、セッション ID がブラウザに保存されます。対象となるアプリケーションへのアクセスを提供します。
JWT を使用して Beego に認(rèn)証を?qū)g裝する
Jun 22, 2023 pm 12:44 PM
インターネットやモバイルインターネットの急速な発展に伴い、認(rèn)証や権限制御を必要とするアプリケーションが増えており、軽量な認(rèn)証?認(rèn)可機構(gòu)としてJWT（JSON Web Token）がWEBアプリケーションで広く使われています。 Beego は Go 言語をベースにした MVC フレームワークであり、効率性、シンプルさ、スケーラビリティの利點を備えています。この記事では、Beego で JWT を使用して認(rèn)証を?qū)g裝する方法を紹介します。 1. JWT の概要 JSONWebToken (JWT) は
C# で権限制御と認(rèn)証を使用する方法
Oct 09, 2023 am 11:01 AM
C# でアクセス許可制御と認(rèn)証を使用する方法には、特定のコード例が必要です。今日のインターネット時代では、情報セキュリティの問題への注目が高まっています。システムとデータのセキュリティを保護するために、権限制御と認(rèn)証は開発者にとって不可欠な部分になっています。 C# は一般的に使用されるプログラミング言語として、アクセス許可の制御と認(rèn)証の実裝に役立つ豊富な関數(shù)とクラス ライブラリを提供します。権限制御とは、ユーザーの ID、役割、権限などに基づいて、特定のリソースへのユーザーのアクセスを制限することを指します。権限制御を?qū)g裝する一般的な方法は次のとおりです。
Go での認(rèn)証に OAuth2 を使用するためのベスト プラクティス
Jun 17, 2023 pm 12:13 PM
Go 言語での認(rèn)証に OAuth2 を使用するためのベスト プラクティス ユーザー認(rèn)証に OAuth2 を使用することは、最新の Web アプリケーションでは非常に一般的です。これは、サードパーティのアプリケーションによる保護されたリソースへの承認(rèn)されたアクセスを容易にする標(biāo)準(zhǔn)プロトコルです。 Go 言語には OAuth2 をサポートする強力なライブラリがあり、開発者は OAuth2 プロセスを簡単に実裝できます。ただし、OAuth2 プロトコルを正しく使用するのは簡単ではありません。この記事は、Go 言語での ID に OAuth2 を使用する方法についての情報を提供することを目的としています。
PHP でのユーザー認(rèn)証に LDAP を使用する
Jun 20, 2023 pm 10:25 PM
LDAP (LightweightDirectoryAccessProtocol) は、分散ディレクトリ サービスにアクセスするためのプロトコルです。ユーザーの認(rèn)証、認(rèn)可、アカウントの保守、データの保存などのタスクに使用できます。 PHP アプリケーションでは、LDAP を強力な認(rèn)証メカニズムとして使用して、アプリケーションに強力な認(rèn)証および認(rèn)可機能を提供できます。この記事では、PHP でのユーザー認(rèn)証に LDAP を使用する方法を紹介します。具體的な內(nèi)容は次のとおりです。 インストールと構(gòu)成 L
