Greita pradžia: Next.js

Pridėkite prisijungimą prie Next.js programos su App Router. @usher/nextjs SDK netrukus pasirodys; kol jo nėra, šiame vadove naudojamas standartinis OpenID Connect srautas – būtent tai, ką SDK darys už jus.

Prieš pradėdami

Next.js 15 arba 16 programa, naudojanti App Router.
Usher aplinka. Usher Console atidarykite savo projektą, pasirinkite aplinką ir užsirašykite jos išdavėją.

Užregistruokite programą

Console eikite į Programos ir sukurkite žiniatinklio programą. Tiksliai pridėkite šį peradresavimo URI:

http://localhost:3000/auth/callback

Nukopijuokite kliento ID ir kliento paslaptį. Paslaptis parodoma vieną kartą.

Pridėkite aplinkos kintamuosius

.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

Įdiekite OpenID Connect klientą

Tinka bet kuris sertifikuotas klientas. Šiame vadove naudojamas openid-client, kuris tvarko aptikimą, PKCE ir žetonų patikrinimą.

Terminalas

pnpm add openid-client

Aptikite savo išdavėją

Aptikimas vieną kartą perskaito išdavėjo galinius taškus ir raktus, todėl niekas neįrašoma į kodą.

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`

Nusiųskite žmones į Lobby

Maršruto apdorojimo funkcija sukuria PKCE tikrintuvą ir būsenos reikšmę, išsaugo jas trumpalaikiame slapuke ir nukreipia į Lobby.

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)
}

Apdorokite grįžtamąjį iškvietimą

Usher grąžina žmogų su kodu. Iškeiskite jį į žetonus; openid-client už jus patikrina būseną, PKCE tikrintuvą ir ID žetono parašą.

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('/')
}

Atsijungimas

Nutraukite žmogaus sesiją savo programoje, tada nusiųskite jį į Usher sesijos užbaigimo galinį tašką, kad Lobby taip pat jį pamirštų.

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)
}

Su SDK

Kai @usher/nextjs bus išleistas, ta pati programa atrodys taip. Toliau pateikta peržiūra iki išleidimo gali pasikeisti.

app/layout.tsx · app/page.tsx (peržiūra)

// 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 />
}

Tolesni žingsniai

Bet kuri OIDC bibliotekaNustatymai, jei naudojate kitą kalbą ar karkasą. SąvokosIšdavėjai, Lobby ir kiek laiko galioja kiekvienas žetonas.