உள்ளடக்கத்துக்குச் செல்
ஆவணங்கள் · Next.js

விரைவுத் தொடக்கம்: Next.js

App Router கொண்ட Next.js ஆப்ஸில் உள்நுழைவைச் சேருங்கள். @usher/nextjs SDK வருகிறது; அது வரும் வரை, இந்த வழிகாட்டி தரநிலை OpenID Connect ஃப்ளோவைப் பயன்படுத்துகிறது, SDK உங்களுக்காகச் செய்யப்போவதும் துல்லியமாக இதுவே.

தொடங்குவதற்கு முன்

  • App Router-ஐப் பயன்படுத்தும் Next.js 15 அல்லது 16 ஆப்ஸ்.
  • ஒரு Usher சூழல். Usher Console-இல் உங்கள் திட்டப்பணியைத் திறந்து, ஒரு சூழலைத் தேர்ந்தெடுத்து, அதன் இஷ்யூவர் முகவரியைக் குறித்துக்கொள்ளுங்கள்.

உங்கள் ஆப்ஸைப் பதிவுசெய்யுங்கள்

Console-இல் பயன்பாடுகள் என்பதற்குச் சென்று ஒரு வலைப் பயன்பாட்டை உருவாக்குங்கள். இந்தத் திசைதிருப்பு URI-ஐ அப்படியே சேருங்கள்:

http://localhost:3000/auth/callback

கிளையன்ட் ID, கிளையன்ட் ரகசியம் ஆகியவற்றை நகலெடுங்கள். ரகசியம் ஒருமுறை மட்டுமே காட்டப்படும்.

உங்கள் சூழல் மாறிகளைச் சேருங்கள்

.env.local
USHER_ISSUER=https://acme.usherid.com
USHER_CLIENT_ID=your_client_id
USHER_CLIENT_SECRET=your_client_secret
APP_URL=http://localhost:3000

OpenID Connect கிளையன்ட்டை நிறுவுங்கள்

சான்றளிக்கப்பட்ட எந்தக் கிளையன்ட்டும் வேலை செய்யும். இந்த வழிகாட்டி openid-client ஐப் பயன்படுத்துகிறது, அது டிஸ்கவரி, PKCE, டோக்கன் சரிபார்ப்பு ஆகியவற்றைக் கையாள்கிறது.

டெர்மினல்
pnpm add openid-client

உங்கள் இஷ்யூவரைக் கண்டறியுங்கள்

டிஸ்கவரி, இஷ்யூவரின் எண்ட்பாயிண்ட்களையும் விசைகளையும் ஒருமுறை படிக்கிறது, எனவே எதுவும் குறியீட்டில் நிலையாக எழுதப்படுவதில்லை.

lib/usher.ts
import * as client from 'openid-client'

let config: Promise<client.Configuration> | undefined

export function usher() {
  config ??= client.discovery(
    new URL(process.env.USHER_ISSUER!),
    process.env.USHER_CLIENT_ID!,
    process.env.USHER_CLIENT_SECRET!,
  )
  return config
}

export const redirectUri = `${process.env.APP_URL}/auth/callback`

மக்களை லாபிக்கு அனுப்புங்கள்

ஒரு route handler, PKCE சரிபார்ப்பியையும் state மதிப்பையும் உருவாக்கி, அவற்றைக் குறுகிய ஆயுள் கொண்ட குக்கீயில் வைத்து, லாபிக்குத் திசைதிருப்புகிறது.

app/auth/sign-in/route.ts
import * as client from 'openid-client'
import { cookies } from 'next/headers'
import { redirect } from 'next/navigation'
import { redirectUri, usher } from '@/lib/usher'

export async function GET() {
  const config = await usher()
  const codeVerifier = client.randomPKCECodeVerifier()
  const state = client.randomState()

  const jar = await cookies()
  jar.set('usher_flow', JSON.stringify({ codeVerifier, state }), {
    httpOnly: true,
    secure: process.env.NODE_ENV === 'production',
    sameSite: 'lax',
    path: '/auth',
    maxAge: 600,
  })

  const url = client.buildAuthorizationUrl(config, {
    redirect_uri: redirectUri,
    scope: 'openid profile email offline_access',
    code_challenge: await client.calculatePKCECodeChallenge(codeVerifier),
    code_challenge_method: 'S256',
    state,
  })
  redirect(url.href)
}

கால்பேக்கைக் கையாளுங்கள்

Usher அந்த நபரை ஒரு குறியீட்டுடன் திருப்பி அனுப்புகிறது. அதை டோக்கன்களாக மாற்றுங்கள்; state, PKCE சரிபார்ப்பி, ID டோக்கனின் கையொப்பம் ஆகியவற்றை openid-client உங்களுக்காகச் சரிபார்க்கிறது.

app/auth/callback/route.ts
import * as client from 'openid-client'
import { cookies } from 'next/headers'
import { redirect } from 'next/navigation'
import { usher } from '@/lib/usher'

export async function GET(request: Request) {
  const config = await usher()
  const jar = await cookies()
  const flow = JSON.parse(jar.get('usher_flow')?.value ?? '{}')
  jar.delete('usher_flow')

  const tokens = await client.authorizationCodeGrant(config, new URL(request.url), {
    pkceCodeVerifier: flow.codeVerifier,
    expectedState: flow.state,
  })
  const claims = tokens.claims()! // sub, email, name, …

  // start your own session here: store claims.sub, and keep the refresh token server-side
  redirect('/')
}

வெளியேறுதல்

உங்கள் ஆப்ஸில் அந்த நபரின் அமர்வை முடியுங்கள், பிறகு லாபியும் அவரை மறக்கும்படி அவரை Usher-இன் end-session எண்ட்பாயிண்ட்டுக்கு அனுப்புங்கள்.

app/auth/sign-out/route.ts
import * as client from 'openid-client'
import { redirect } from 'next/navigation'
import { usher } from '@/lib/usher'

export async function GET() {
  const config = await usher()
  // clear your own session first
  const url = client.buildEndSessionUrl(config, {
    post_logout_redirect_uri: process.env.APP_URL!,
  })
  redirect(url.href)
}

SDK உடன்

@usher/nextjs வெளியிடப்படும்போது, அதே ஆப்ஸ் இப்படி இருக்கும். கீழே உள்ள முன்னோட்டம் வெளியீட்டுக்கு முன் மாறலாம்.

app/layout.tsx · app/page.tsx (முன்னோட்டம்)
// app/layout.tsx
import { UsherProvider } from '@usher/nextjs'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <UsherProvider>{children}</UsherProvider>
      </body>
    </html>
  )
}

// app/page.tsx
import { SignIn, UserButton, currentUser } from '@usher/nextjs'

export default async function Page() {
  const user = await currentUser()
  return user ? <UserButton /> : <SignIn />
}

அடுத்த படிகள்