ChatGPT小程序实战
背景
最近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);//上面申请的apikey
post.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;
}
现在我们已经基本实现了整个流程,可以看下效果:
会员支付
效果已经有了,那我们来接入会员系统,下期继续
福利
留言可以先给大家免费体验一波,下期我们继续接入会员功能!