七、在NextAuth.js配置OAuth的CallBack-Url

简介

• 下载 ：https://github.com/nextauthjs/next-auth-typescript-example 项目。

获取Github的Auth2.0-Key pairs

• 登录Github创建一个Auth2.0应用：

  
  
  image.png

• 填写信息，点击 Register application

  
  
  image.png

• 最后在Github上生成私钥，并且配置回调地址为：http://localhost:3001/api/auth/callback/github

将信息配置到 authnext.js

• 修改项目根目录的 .env.local.example 为 .env.local
• 找到，如下信息并填写对应值

GITHUB_ID=对应Client ID的值
GITHUB_SECRET=对应Client secrets的值

• 配置 .env 的 NEXTAUTH_URL 这个默认是 http://localhost:3000 如果测试的时候换过端口什么的一定要跟着改。

配置

配置 OAuth 的回调

• Callback url 的地址格式大致为：/api/auth/callback/[provider]。
• 对应到上面介绍的Github的地址就是：http://localhost:3000/api/auth/signin/github

总结

• 1、配置provider
• 2、全局入口文件pages/_app.tsx要把Component放到SessionProvider的配置段下。
• 3、前端使用Session保护，可以通过[useSession()](https://next-auth.js.org/getting-started/client#usesession)获取到Session状态，从而判断权限，例如：

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} 

         signOut()}>Sign out
      
    )
  }
  return (
    <>
      Not signed in 

       signIn()}>Sign in
    
  )
}

• 4、后端使用Session保护，可以通过 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.",
    })
  }
}

测试：

• 配置后 yarn dev 运行，直接可以通过 github 进行登录登出。

  
  
  image.png

结束

• 接下来介绍通过 Emial 完成授权登录