Hitri začetek: Next.js

Dodajte prijavo v aplikacijo Next.js z App Routerjem. SDK @usher/nextjs prihaja; dokler ga ni, ta vodnik uporablja standardni potek OpenID Connect, ki je natanko tisto, kar bo SDK naredil namesto vas.

Preden začnete

Aplikacija Next.js 15 ali 16, ki uporablja App Router.
Okolje Usher. V Usher Console odprite svoj projekt, izberite okolje in si zapišite njegovega izdajatelja.

Registrirajte svojo aplikacijo

V Console pojdite na Aplikacije in ustvarite spletno aplikacijo. Dodajte natanko ta preusmeritveni URI:

http://localhost:3000/auth/callback

Kopirajte ID odjemalca in skrivnost odjemalca. Skrivnost je prikazana enkrat.

Dodajte spremenljivke okolja

.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

Namestite odjemalca OpenID Connect

Deluje kateri koli certificirani odjemalec. Ta vodnik uporablja openid-client, ki poskrbi za odkrivanje, PKCE in preverjanje žetonov.

Terminal

pnpm add openid-client

Odkrijte svojega izdajatelja

Odkrivanje enkrat prebere izdajateljeve končne točke in ključe, zato nič ni trdo kodirano.

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`

Pošljite ljudi v Lobby

Upravljalnik poti ustvari preverjevalnik PKCE in vrednost state, ju shrani v kratkotrajen piškotek in preusmeri v 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)
}

Obdelajte povratni klic

Usher pošlje osebo nazaj s kodo. Zamenjajte jo za žetone; openid-client namesto vas preveri state, preverjevalnik PKCE in podpis žetona ID.

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

Odjava

Končajte sejo osebe v svoji aplikaciji, nato jo pošljite na Usherjevo končno točko za konec seje, da jo pozabi tudi Lobby.

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

S SDK-jem

Ko bo @usher/nextjs objavljen, bo ista aplikacija videti tako. Spodnji predogled se lahko pred izdajo spremeni.

app/layout.tsx · app/page.tsx (predogled)

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

Naslednji koraki

Katera koli knjižnica OIDCNastavitve, če uporabljate drug jezik ali ogrodje. KonceptiIzdajatelji, Lobby in kako dolgo velja kateri žeton.