增加关于github的第三方授权登录

2024-1-24 09:29:29

#github

10

前言

  • 本文用于记录本站接入github的第三方登录过程

创建OAuth App

  • 首先，你需要拥有一个github账户
  • 通过通过点击右上角头像的 Settings → Developer settings → OAuth Apps 进入到 OAuth Apps 页面
  • 点击New OAuth App按钮 创建新的OAuth App
  • 具体创建过程我就不在此赘述了，相关步骤可以看我附在结尾的文章，本篇重点在于nextjs+vercel环境下的配置

配置环境变量

  • OAuth App的使用需要配置github的client_id，client_secret以及一个回调地址
  • 因此我们需要三个环境变量
    • NEXT_PUBLIC_GITHUB_CLIENT_ID // client id
    • GITHUB_CLIENT_SECRET // client secret
    • NEXT_PUBLIC_GITHUB_REDIRECT_URL // 回调地址
  • 其中client_id和回调地址在前端调取时会用到，所以被设置为了客户端环境变量
  • 而client secret是用于使用OAuth Apps的秘钥，所以只需配置在服务端，避免在客户端被泄露
  • 在项目中使用时，通过process.env来访问即可,如process.env.NEXT_PUBLIC_GITHUB_CLIENT_ID

登录流程

  • 首先，前端登录需要跳转到对应的链接，去进行github方面的授权
  • 链接如下
  • ${authorize_uri}?client_id=${client_id}&redirect_url=${redirect_url}
  • authorize_uri为https://github.com/login/oauth/authorize github授权的地址
  • client_id就是上文所说的NEXT_PUBLIC_GITHUB_CLIENT_ID
  • redirect_url为上文所说的NEXT_PUBLIC_GITHUB_REDIRECT_URL，用于github授权后回调的地址，本项目则是配置了专门的一个页面，用于处理github授权后的回调
  • 授权成功后，github会回调到redirect_url，并携带一个code参数，用于获取用户信息
  • 跳转后再页面中处理，携带code参数请求后端接口
  • 后端接口通过code参数请求github的接口，来获取用户token，后续我们就可以通过这个token，来获取访问用户信息的权限
  • 对应接口为https://github.com/login/oauth/access_token?client_id=${client_id}&code=${code}&client_secret=${client_secret}，需要戴上code，client_id以及client_secret
  • 成功调取后，会返回一个token，我们再拿着这个token去请求github获取用户信息的接口
  • 接口为https://api.github.com/user
  • 不要忘记在这个接口的请求头里带上对应的token，我这边使用的是axios库来发起请求，写法如下
const userUrl = `https://api.github.com/user`
  const headers = {
    'Authorization': `Bearer ${token}`,
    'Accept': 'application/json, text/plain, */*',
  }
  const userInfo = await axios.get(
    userUrl,
    {
      headers: headers
    }
  )
  • 拿到用户信息后，我们就可以在自己的系统里处理这些信息了，整个登录流程也完成了

配置跳转页面

  • 我这边的方案是创建一个用于登录的页面，专门用于处理github与其它未来可能的平台第三方登录
  • 很简单，写一个能呈现加载状态的页面，将其设置为客户端页面，使用useEffect钩子，使其在页面挂载时去请求接口即可，在此就不多赘述了

参考文章

GitHub OAuth 第三方登录示例教程

Github登录