如何给你的GPT网站加上微信登录

前言

最近做了一个 GPT 网站支持 GPT3 / GPT4 / 文本生成图片 / 识别图片生成代码; 但是在做的过程中有很多同学问我为啥没有微信登录, 由于微信登录需要使用企业号去申请，针对我们这种个人用户其实很难，所以只能另辟蹊径了。

先来看看效果

第一步扫码	第二步登录

前置准备

要想实现这种效果只需要准备一件事情: 注册一个个人的小程序，并完成服务https请求

注册完个人小程序之后再完成如下几件事情:

完成实名认证
自己的服务器申请 https 证书: 如果你的服务是部署在阿里云/腾讯云可以直接使用免费的证书，确保服务请求是https的;
完成服务端域名配置: 登录仅小程序管理页面，在 [开发管理] => [服务器域名] 部分完成上述域名配置

完成如上三个步骤后就可以进入开发了。

技术方案

整体的方案如下:

第一步：完成小程序登录二维码生成，临时零时id,透传给小程序;
第二步: 前端页面基于零时id进行轮训状态，查询登录是否成功;
第三步: 在小程序侧将微信openid 获取到并临时临时id更新状态

1. 生成小程序登录二维码

此处以nodejs为例，调用微信api获取到图片流，并转换成base64图片

typescript 复制代码

let WX_TOKEN = '';
/**
 * 获取微信accesstoken
 * @returns
 */
export async function getWXAccessToken(): Promise<string> {
  if (Date.now() < weixin_expire_time)
    return WX_TOKEN

  const data = await axios.get<{
    access_token: string
    expires_in: number
  }>('https://api.weixin.qq.com/cgi-bin/token', {
    params: {
      grant_type: 'client_credential',
      appid: APPID,
      secret: APP_SECRET,
    },
  })

  logger.info(`wx token is : ? ${data?.data?.access_token}`)

  WX_TOKEN = data?.data?.access_token
  //   比微信时间少20s
  weixin_expire_time = Date.now() + (data?.data?.expires_in - 20 || 0) * 1000
  return WX_TOKEN
}



/**
 * 获取微信小程序登录二维码
 * @param sign_id
 * @returns
 */
export async function getWXMinAppLoginQRCode(sign_id: string) {
  const token = await getWXAccessToken()
  // https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/qrcode-link/qr-code/getUnlimitedQRCode.html
  const res = await axios.post<Buffer>(`https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=${token}`, {
    scene: sign_id,
    page: 'pages/login/login',
    // env_version: 'develop',
    check_path: false,
  }, {
    params: {
      access_token: token,
    },
    responseType: 'arraybuffer',
  })
  const buffer = res?.data as Buffer
  return `data:image/png;base64,${Buffer.from(buffer).toString('base64')}`
}

2. 微信小程序侧开发

微信小程序侧比较简单，获取到用户的昵称然后携带临时id 调研服务端接口完成注册

ts 复制代码

 login(userInfo: any) {
    const that = this;
    if (!this.data.nickname) {
      wx.showToast({
        title: '请输入微信昵称',
        icon: 'none'
      })
      return;
    }
    wx.login({
      success(data) {
        const openCode = data.code;
        wx.showLoading({
          title: '登录中..'
        })
        wx.request({
          url: '你的接口地址',
          data: {
            // ... 你的参数
            temp_id: this.data.scene， // 在onLoad中使用 options.scene 获取
            name: this.data.nickname
          },
          method: 'POST',
          success(res) {

            wx.hideLoading();
            wx.showToast({
                    title: '登录成功',
                  })
              },
          fail() {
            wx.hideLoading()
          }
        })
      },
      fail() {
        wx.showToast({
          title: '获取登录凭证失败',
          icon: 'none'

        })
      }
    })
  },

3. 完成微信 `openId` 获取并注册