本文皆为个人原创，请尊重创作，未经许可不得转载。

前言

之前写了一篇有关Next和Auth.js的文章《Next.js 14 引入NextAuth.js，实现登录认证用户信息获取》，阐述了如何在Next 14 中引入Auth并配置，感兴趣的朋友可以点击跳转

本篇文章提到的项目已上传GitHub托管，感兴趣可点个Star~

OAuth

OAUTH协议为用户资源的授权提供了一个安全的、开放而又简易的标准。与以往的授权方式不同之处是OAUTH的授权不会使第三方触及到用户的账号信息（如用户名与密码），即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权，因此OAUTH是安全的。oAuth是Open Authorization的简写。

Auth.js支持的Oauth集成方式

Auth.js预配置了超过80个Providers，不断进行测试的、流行的有20多种，其中包括今天需要引入到项目的GitHub登录。

开始

引入GitHub Providers

打开项目中auth.js文件，在providers中添加GitHub

添加环境变量

在app同级目录下.env文件中加入如下内容

在GitHub中注册OAuth app信息

打开你的GitHub页面，进入setting -> Developer Settings,点击New OAuth App创建此项目的OAuth信息。

添加GitHub Oauth信息，注意Authorization callback URL项。

Auth.js官方文档原文提到The default callback URL should generally take the form of [origin]/api/auth/callback/[provider], however, the default is slightly different depending on which framework you're using.

简要意思就是需要设置 [origin] 和 [provider] 两个地方， [provider] 在此处是github ，而我们的 [origin] 对应的就是我们的项目地址[http://localhost:3000/]

点击Register application，得到Client ID，再手动生成一个Client secrets，回填到我们项目.env文件中AUTH_GITHUB_ID、AUTH_GITHUB_SECRET。

编写Github登录

登录方法

在lib/action.ts下编写新的Oauth Provider登录方法，传输Provider id到我们auth.ts中的signIn方法中调用对应的OAuth登录逻辑（Auth.js已经写好对应的逻辑）

action.ts 复制代码

export async function SignWithProvider( pervState: LoginState | undefined,
  formData: FormData): Promise<LoginState>  {
  const providerData : any | null = formData.get('provider');
  const provider : LiteralUnion<string> = providerData ?  providerData as string : ''
  console.log('debug issues-02:',provider);
  const result = await signIn(provider)
  console.log('debug issues-03:',result);
  return {
    success: true,
    errorMsg: null
  }
}

创建一个通用的Providers按钮

接收页面组件传来的动态传给SignWithProvider方法，创建common/SignInButton.tsx文件

SignInButton.tsx 复制代码

'use client'
import { useFormState,useFormStatus } from 'react-dom';
import { SignWithProvider } from '../lib/action';
const initState = {
  errorMsg: "",
  success: false
};

export default function ProviderSignInButton({provider} : {provider?: string}) {
  const [state, dispatch] = useFormState(SignWithProvider, initState);
  const { pending } = useFormStatus();
  return (
    <>
    <form action={dispatch}
    >
      <input name='provider' style={{display:'none'}} defaultValue={provider}></input>
      {state?.errorMsg && <p> {state.errorMsg} </p>}
      <button type="submit" aria-disabled={pending}>Sign With {provider}</button>
    </form>
   </>
  )
    
};

登录页面加入github登录按钮

在之前的login/page.tsx登录页面中加入刚刚写好的Provider登录按钮。

编写GitHub回调页面

如果你刚刚留意到GitHub OAuth App配置中设置了http://localhost:3000/api/auth/callback/github/ 的回调地址，所以要对应的编写这个页面，按照路径创建api\auth\callback\github\page.tsx

page.tsx 复制代码

'use client'

import { useSearchParams } from "next/navigation"

export default function page() {
  const param = useSearchParams()
  return(
    <div style={{margin:'auto'}}>
    <p style={{padding: 30}}> this is github call back! {param.get('code')}</p>
    </div>
  )
};