ತ್ವರಿತ ಆರಂಭ: 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 ಮತ್ತು ಕ್ಲೈಂಟ್ ಸೀಕ್ರೆಟ್ ನಕಲಿಸಿ. ಸೀಕ್ರೆಟ್ ಒಮ್ಮೆ ಮಾತ್ರ ತೋರಿಸಲಾಗುತ್ತದೆ.
ನಿಮ್ಮ ಎನ್ವಿರಾನ್ಮೆಂಟ್ ವೇರಿಯಬಲ್ಗಳನ್ನು ಸೇರಿಸಿ
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`ಜನರನ್ನು ಲಾಬಿಗೆ ಕಳುಹಿಸಿ
ಒಂದು ರೂಟ್ ಹ್ಯಾಂಡ್ಲರ್ PKCE verifier ಮತ್ತು 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 verifier ಮತ್ತು 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 />
}