ChatGPT小程序实战
- 背景
- 准备工作
- 申请小程序并认证
- 申请聊天接口秘钥
- 申请微信支付商户号
- 编写代码
- 用户管理
- 小程序授权登录
- 获取用户信息
- 更新用户头像和昵称
- 结合第三方聊天平台API
- 调用聊天接口的api
- 会员支付
- 福利
背景
最近ChatGPT特别火,但是好多小伙伴不知道,到底怎样去利用去做一些对自己有益的事情,闲来无事,做了个小程序开发流程分享给大家。
准备工作
申请小程序并认证
必须申请认证小程序,不然后续无法进行支付等相关操作,认证具体流程自行参考:微信公众平台
申请聊天接口秘钥
可以接入图灵,等api,或者GPT都可以的,自己去申请
申请微信支付商户号
这一步也是自己去参考微信支付去申请,这一步我们需要拿到微信支付的商户号和秘钥。
编写代码
用户管理
小程序授权登录
这里我们参考开放平台的官方文档的小程序登录:
1.前端通过调用 wx.login() 获取 临时登录凭证code ,并回传到开发者服务器。
2.服务端调用 auth.code2Session 接口,换取 用户唯一标识 OpenID,这里假设我们拿到code,后端代码如下:
@PostMapping("getWxAuthorization")public AjaxResult getWxAuthorization(String code){JSONObject object = WxLoginUtil.getAppId(code);if (object.containsKey("errcode") && object.getIntValue("errcode")!=0) {log.error("授权失败,错误信息:{}", object);return AjaxResult.error("授权失败!");}String openid = object.getString("openid");QueryWrapper<WxUser> queryWrapper = new QueryWrapper<>();queryWrapper.eq("open_id", openid);WxUser wxUser = wxUserService.getOne(queryWrapper);//为空时自动创建账户if (StringUtils.isNull(wxUser)){wxUser = new WxUser();wxUser.setUserType("0");wxUser.setLimitTimes(15l);//我们给用户限制下每日调用次数,方便我们引导用户开通会员,不然怎么盈利呢?wxUser.setOpenId(openid);wxUser.setRegisterDate(new Date());wxUser.setVipEffTime(new Date());wxUser.setVipExpTime(new Date());wxUserService.save(wxUser);}return AjaxResult.success("登录成功!", JwtTokenUtil.createToken(wxUser.getId()));}
获取用户信息
登录成功后,小程序端需要拿到我们在自己的后台创建的用户信息:
@PostMapping("/getUser")public AjaxResult getUser(){WxUser appUser = wxUserService.getById(JwtTokenUtil.getUserId);//每次获取的时候,我们判断下用户会员是否过期了,过期就更改下状态if(appUser.getUserType().equals("1") && appUser.getVipExpTime().before(new Date())){appUser.setUserType("2");wxUserService.updateById(appUser);}return AjaxResult.success(appUser);}
更新用户头像和昵称
为了方便用户改变在小程序内显示的头像和昵称,我们做如下处理:
@PostMapping("/updateUser")public AjaxResult updateUser(@RequestBody WxUser wxUser){WxUser appUser = wxUserService.getById(JwtTokenUtil.getUserId);if (StringUtils.isNotEmpty(wxUser.getAvatar())) {appUser.setAvatar(wxUser.getAvatar());}if (StringUtils.isNotEmpty(wxUser.getNickName())) {appUser.setNickName(wxUser.getNickName());}return AjaxResult.success("修改成功", appUser);}
到此为止,小程序端就可以登录,并且更新和获取用户信息了!接下来我们正式开始调用ChatGPT的api。
结合第三方聊天平台API
调用聊天接口的api
这里我们直接调用,我稍微加了功能敏感词过滤
@PostMapping("chatCompletion")public AjaxResult chatCompletion(@RequestBody CompletionRequest completionRequest){//TODO 敏感词,每日提问次数Long getUserId = JwtTokenUtil.getUserId;//封装方法,校验用户的可使用次数AjaxResult userUseTimes = getUserUseTimes(getUserId);if ((int)userUseTimes.get("code")!=200){return userUseTimes;}/*敏感词过滤*//*ArrayList<String> sensitiveWord = DFAUtils.getSensitiveWord(completionRequest.getPrompt());if (StringUtils.isNotEmpty(sensitiveWord)){log.error("检测到敏感词:{}", sensitiveWord);//TODO 敏感词记录return AjaxResult.error("您的问题含有敏感词,请重新提问!");}*/ChoiceMessage message = null;try {CompletionChatResponse completionChatResponse = ChatUtil.chatCompletion(completionRequest.getPrompt());message = completionChatResponse.getChoices().get(0).getMessage();List<Object> userCacheMessages = ChatUtil.getUserCacheMessages();userCacheMessages.add(message);ChatUtil.setUserCacheMessages(userCacheMessages);} catch (Exception e) {return AjaxResult.success("系统开了个小差,请稍后重试!");}return AjaxResult.success(message.getContent());}
封装的调用方法ChatUtil.chatCompletion(completionRequest.getPrompt());
public static CompletionChatResponse chatCompletion(String prompt){CompletionChatRequest completionChatRequest = new CompletionChatRequest();HttpRequest post = HttpUtil.createPost(chatCompletionUrl).timeout(300000);Map<String, String> headers = new HashMap<>();headers.put("Authorization", Authorization);//上面申请的apikeypost.addHeaders(headers);post.contentType("application/json;charset=UTF-8");completionChatRequest.setModel(model);ChoiceMessage message = new ChoiceMessage("user", prompt);//因为我们调用的3.5的模型,这里作了上下文关联List<Object> messages = getUserCacheMessages();int size = messages.size();if (size>19){messages.remove(0);}messages.add(message);setUserCacheMessages(messages);completionChatRequest.setMessages(messages);post.body(JSON.toJSONString(completionChatRequest));String body = post.execute().body();CompletionChatResponse completionChatResponse = JSON.parseObject(body, CompletionChatResponse.class);return completionChatResponse;}
现在我们已经基本实现了整个流程,可以看下效果:
会员支付
效果已经有了,那我们来接入会员系统,下期继续
福利
留言可以先给大家免费体验一波,下期我们继续接入会员功能!