簡(jiǎn)介
- 下載 ：https://github.com/nextauthjs/next-auth-typescript-example 項(xiàng)目髓削。
獲取Github的Auth2.0-Key pairs
-
登錄Github創(chuàng)建一個(gè)Auth2.0應(yīng)用：
image.png -
填寫(xiě)信息袜蚕，點(diǎn)擊 Register application
image.png 最后在Github上生成私鑰，并且配置回調(diào)地址為：
http://localhost:3001/api/auth/callback/github
將信息配置到 authnext.js
- 修改項(xiàng)目根目錄的 .env.local.example 為 .env.local
- 找到缭嫡，如下信息并填寫(xiě)對(duì)應(yīng)值
GITHUB_ID=對(duì)應(yīng)Client ID的值
GITHUB_SECRET=對(duì)應(yīng)Client secrets的值
- 配置 .env 的
NEXTAUTH_URL這個(gè)默認(rèn)是 http://localhost:3000 如果測(cè)試的時(shí)候換過(guò)端口什么的一定要跟著改喂很。
配置
配置 OAuth 的回調(diào)
- Callback url 的地址格式大致為：
/api/auth/callback/[provider]。 - 對(duì)應(yīng)到上面介紹的Github的地址就是：http://localhost:3000/api/auth/signin/github
總結(jié)
- 1皆刺、配置provider
- 2少辣、全局入口文件
pages/_app.tsx要把Component放到SessionProvider的配置段下。 - 3羡蛾、前端使用Session保護(hù)漓帅，可以通過(guò)
[useSession()](https://next-auth.js.org/getting-started/client#usesession)獲取到Session狀態(tài)，從而判斷權(quán)限痴怨，例如：
import { useSession, signIn, signOut } from "next-auth/react"
export default function Component() {
const { data: session } = useSession()
if (session) {
return (
<>
Signed in as {session.user.email} <br />
<button onClick={() => signOut()}>Sign out</button>
</>
)
}
return (
<>
Not signed in <br />
<button onClick={() => signIn()}>Sign in</button>
</>
)
}
- 4忙干、后端使用Session保護(hù)，可以通過(guò)
getServerSession()方法浪藻，舉例：
import { getServerSession } from "next-auth/next"
import { authOptions } from "./auth/[...nextauth]"
export default async (req, res) => {
const session = await getServerSession(req, res, authOptions)
if (session) {
res.send({
content:
"This is protected content. You can access this content because you are signed in.",
})
} else {
res.send({
error: "You must be signed in to view the protected content on this page.",
})
}
}
測(cè)試：
-
配置后 yarn dev 運(yùn)行捐迫，直接可以通過(guò) github 進(jìn)行登錄登出。
image.png
結(jié)束
- 接下來(lái)介紹通過(guò) Emial 完成授權(quán)登錄
