![](/assets/img/weixin-blog.311ae013.png)
技术咨询、项目合作、广告投放、简历咨询、技术文档下载
点击这里 联系博主
# 微信登录接入
# 前言
最近做了一个 GPT 网站 (opens new window) 支持 GPT3 / GPT4 / 文本生成图片 / 识别图片生成代码; 但是在做的过程中有很多同学问我为啥没有微信登录, 由于微信登录需要使用企业号去申请,针对我们这种个人用户其实很难,所以只能另辟蹊径了。
# 先来看看效果
第一步扫码 | 第二步登录 |
---|---|
![]() | ![]() |
# 前置准备
要想实现这种效果只需要准备一件事情: 注册一个个人的小程序,并完成服务https请求 (opens new window)
注册完个人小程序之后再完成如下几件事情:
- 完成实名认证
- 自己的服务器申请 https 证书: 如果你的服务是部署在阿里云/腾讯云 可以直接使用免费的证书,确保服务请求是https的;
- 完成服务端域名配置: 登录仅小程序管理页面,在 [开发管理] => [服务器域名] 部分完成上述域名配置
完成如上三个步骤后就可以进入开发了。
# 技术方案
整体的方案如下:
- 第一步:完成小程序登录二维码生成,临时零时id,透传给小程序;
- 第二步: 前端页面基于零时id进行轮训状态,查询登录是否成功;
- 第三步: 在小程序侧将 微信openid 获取到并临时临时id更新状态
# 1. 生成小程序登录二维码
此处以nodejs
为例, 调用微信api获取到图片流,并转换成base64
图片
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 调研服务端接口完成注册
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
获取并注册
/**
* 获取微信登录唯一id
* @param js_code 就是上面的openCode
* @returns
*/
export async function getWXOpenId(js_code: string) {
const res = await axios.get<{
openid: string
unionid: string
}>('https://api.weixin.qq.com/sns/jscode2session', {
params: {
grant_type: 'authorization_code',
appid: APPID,
secret: APP_SECRET,
js_code,
},
})
return res?.data?.openid
}
# 最后
至此一个简单的微信登录即可完成,有需要的同学可以在这里体验一下 免费 GPT 使用, 支持 GPT3 / GPT4 / 文本生成图片 / 识别图片生成代码 (opens new window);
AI Vision | AI Image |
---|---|
![]() | ![]() |
- 本文链接: https://mrgaogang.github.io/javascript/deep/GPT%E5%BE%AE%E4%BF%A1%E7%99%BB%E5%BD%95%E6%8E%A5%E5%85%A5.html
- 版权声明: 本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 许可协议。转载请注明出处!