javascript - Next Js 结合外部 REST API 身份验证和授权
问题描述
我已经有一个使用 Node Js 和 express 构建的应用程序,我也有一个使用 create-react-app 和 redux 的前端,但现在我想将它移到下一个 Js,但我被卡住了,因为我没有使用我的其余完整 API 进行身份验证和授权的正确方法,我想提一下,我的 API 已经使用 JWT 处理了这个问题(将其保存在 cookie 中)
解决方案
在这种情况下,Next-Auth是首选。以下示例显示了如何开始使用密码身份验证。
创建一个名为/pages/api/auth/[...nextauth].js
import NextAuth from 'next-auth'
import Providers from 'next-auth/providers'
const options = {
providers: [
Providers.Credentials({
// The name to display on the sign in form (e.g. 'Sign in with...')
name: 'Email and Password',
credentials: {
username: { label: "Username", type: "text", placeholder: "jsmith" },
password: { label: "Password", type: "password" }
},
authorize: async (credentials) => {
// Add logic here to look up the user from the credentials supplied eg from db or api
const user = { id: 1, name: 'J Smith', email: 'jsmith@example.com' }
if (user) {
// Any object returned will be saved in `user` property of the JWT
return Promise.resolve(user)
} else {
// If you return null or false then the credentials will be rejected
return Promise.resolve(null)
// You can also Reject this callback with an Error or with a URL:
// return Promise.reject(new Error('error message')) // Redirect to error page
// return Promise.reject('/path/to/redirect') // Redirect to a URL
}
}
}),
],
}
export default (req, res) => NextAuth(req, res, options)
然后在您的组件代码上:
import React from 'react'
import {
signIn,
signOut,
useSession
} from 'next-auth/client'
export default function myComponent() {
const [ session, loading ] = useSession()
return <>
{!session && <>
Not signed in <br/>
<button onClick={signIn}>Sign in</button>
</>}
{session && <>
Signed in as {session.user.email} <br/>
<button onClick={signOut}>Sign out</button>
</>}
</>
}
如果您共享更多您拥有的身份验证路线,这将很容易让您入门,我可以提供更多建议。
推荐阅读
- vb.net - 将 DependencyProperty 链接到 ViewModel 属性的正确方法?
- javascript - JavaScript 中的多列
- firebase - 有firebase的测试账户吗?还是恶意的?
- python - 打印numpy数组时仅删除零值的科学记数法?
- css - 在这种情况下,如何将圆(在 pesudo 类中:after)和文本垂直居中对齐?
- java - 在全栈 Web 应用程序中验证表单数据的最佳方式(Spring boot + React JS)
- java - 如何将 jar 库中的方法头显示给客户端应用程序?
- javascript - 使用 Puppeteer/NodeJS 在单击时设置 FormData 键/值
- python - 递归函数嵌套字典python
- php - 我想将其限制为仅添加一个类别的产品,而不允许使用 woocommerce 的其他产品