క్విక్స్టార్ట్: Next.js
App Router ఉన్న Next.js యాప్కు సైన్-ఇన్ను జోడించండి. @usher/nextjs SDK రాబోతోంది; అది వచ్చే వరకు, ఈ గైడ్ ప్రామాణిక OpenID Connect ఫ్లోను ఉపయోగిస్తుంది, SDK మీ కోసం చేసేది సరిగ్గా ఇదే.
మొదలుపెట్టే ముందు
- App Routerను ఉపయోగించే Next.js 15 లేదా 16 యాప్.
- ఒక Usher ఎన్విరాన్మెంట్. Usher Consoleలో, మీ ప్రాజెక్ట్ను తెరిచి, ఒక ఎన్విరాన్మెంట్ను ఎంచుకుని, దాని ఇష్యూయర్ను గుర్తుంచుకోండి.
మీ యాప్ను నమోదు చేయండి
Consoleలో, Applicationsకు వెళ్లి ఒక web applicationను సృష్టించండి. ఈ రీడైరెక్ట్ URIని సరిగ్గా ఇలాగే జోడించండి:
http://localhost:3000/auth/callbackclient ID, client secretలను కాపీ చేసుకోండి. సీక్రెట్ ఒక్కసారే చూపబడుతుంది.
మీ ఎన్విరాన్మెంట్ వేరియబుల్లను జోడించండి
USHER_ISSUER=https://acme.usherid.com
USHER_CLIENT_ID=your_client_id
USHER_CLIENT_SECRET=your_client_secret
APP_URL=http://localhost:3000OpenID Connect క్లయింట్ను ఇన్స్టాల్ చేయండి
ఏ సర్టిఫైడ్ క్లయింట్ అయినా పనిచేస్తుంది. ఈ గైడ్ openid-clientను ఉపయోగిస్తుంది, అది డిస్కవరీ, PKCE, టోకెన్ ధృవీకరణను నిర్వహిస్తుంది.
pnpm add openid-clientమీ ఇష్యూయర్ను కనుగొనండి
డిస్కవరీ ఇష్యూయర్ ఎండ్పాయింట్లను, కీలను ఒక్కసారి చదువుతుంది, కాబట్టి ఏదీ కోడ్లో స్థిరంగా రాయాల్సిన అవసరం లేదు.
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 విలువను తయారుచేసి, వాటిని స్వల్పకాలిక కుకీలో ఉంచి, లాబీకి రీడైరెక్ట్ చేస్తుంది.
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 మీ కోసం తనిఖీ చేస్తుంది.
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 ఎండ్పాయింట్కు పంపండి.
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
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 />
}