通过扫小程序码实现网站登陆功能

网络上关于实现本本功能的文章很多，但是给出案列的几乎没有，今天笔者实现用小程序码实现网站登陆，体验地址如下

https://idea.techidea8.com/open/login.shtml

思路

核心流程

关键流程

建立场景场景编号和求转发到的绑定关系

获得场景编号

场景身份可以前端生成，也可以后端生成，只需要保证场景编号的同一时间唯一性即可。

前端生成可以采用随机数加时间戳的形式，也可以用全局唯一识别算法

//时间戳var sceneid='scend-'新数据()。getTime()。数学。天花板(数学。random()* 888888 1000000)；建立web套接字var ws=新web套接字(' ws ://192。168 .0 .106/web socket？客户端id=' sceneid)ws。onopen=function(env){ console。日志(env)} ws。on message=function(env){ var data=env。数据；//这个数据就是后端发来的用户数据} 后端建立求转发到

后端采用去语言github.com/gorilla/websocket包建立websocket .因为开发非常适合高并发场景。

web套接字(w http .响应者，请求.请求){ //fmt .printf("% v ")，请求标题)//待办事项检验接入是否合法//checkToken(userId int64，令牌字符串)查询：=请求.网址。Query() clientid :=查询Get('clientid') conn，err :=(websocket .升级程序{ CheckOrgin : func(r * http .请求)bool { return true }，}).升级(w，请求，无)如果出错！=nil { log .Println(错误错误())返回} clientMap .商店(clientid，conn) go func(clientId字符串，conn *websocket .Conn) { //处理出错信息延迟函数(){连接。关闭()}客户端映射。删除{ _，_，err :=conn.ReadMessage()的(客户端id)}()if err！=nil { log .Println(错误错误())返回} } }(客户端id，conn)}我们采用同步。地图建立场景编号和求转发到的对应关系

clientMap .保存（场景id，conn)

对于因为异常断开的精读我们需要移除

clientMap .删除（场景id)

获得小程序二维码

获得小程序的访问令牌

小程序接近请求接口如下``

该接口日使用频率有限制，因此我们需要将这些数据缓存起来，缓存方案很多，有redis，也有内存，我们这里直接用一个变量即可存储

accesstoken :=' func GetAccessToken()字符串{ return accesstoken } func refresh accesstoken()字符串{ URL=' resp ' :=httpget(URL)//resp是一个包含访问令牌的数据字符串，我们解析这个数据即可accesstoken=decadeaccesstokenfromson(resp)返回accesstoken }我们还需要一个滴答计数器用来刷新接入令牌的有效期是7200秒，我们4000秒刷新一次访问令牌即可

func refreshcesstoken(){ ticker :=time .NewTicker(时间。秒*4000)表示{选择{ case -ticker .C: RefreshAccessToken() } }}在开始中的初始化方法中启动协程

转到refreshAccessToken()

小程序二维码编程技巧

小程序二维码请求接口如下

https://api.weixin.qq.com/wxa/getwxacodeunlimit?access _ token=ACCESSTOKEN

由于该链接会返回俩种结果

错误返回数据

{'errcode':400001，' errmsg': '什么什么原因'}正确返回j图片缓冲器

这是一个二进制码流，因此我们需要对返回结果进行标准化处理

我们建议一种标准化结果

{code:0，data: ' '，msg: '结果说明'}

参数说明密码标识成功或者失败，200为成功，400为失败数据图片的base64格式编码味精结果说明，或者出错提示代码示例如下

url :=fmt .sprintf(' https://API。微信。QQ。com/wxa/getwxacodeunlimit？access_token=%s '，token)ret，err :=util .PostJSON(url，arg)if err！=nil { util .失败消息(w，err .错误())如果是字符串，则返回}jsonstr :=字符串(ret ).包含(jsonstr，' errmsg') { util .FailMsg(w，JSON str)返回} else { base 64 data :=base 64 .StdEncoding。encodetstring(ret)util .RespOk(w，' data : image/png；base64，' base64data)}其中跑龙套是笔者封装的常用工具包

常用工具包

前端请求成功后，获取数据，使用$ ('#二维码')即可刷新图片的二维码。attr ('src '，res.data)

函数refresh QR code(){ client id=' scene-' new Date()。getTime()；var API=restgo . build API(' miniapp/getwxacodeunlimit ')restgo . post(API，{'scene':clientId})。然后(RES={ if(RES . code==200){ $(' # QR code ')。attr('src '，RES . data)} else { alert(RES . msg)} int WebSocket()}，res={ alert(res.msg) })

小程序处理要点

采用良好的框架

Uniapp只在我们的编程过程中使用，这是一个很好的框架，完全是vue语法。

一组代码可以生成H5/小程序/安卓/ios

我们使用vue的监视功能来决定是否通过监听userid来发送信息

Watch: {userid:函数(a，b) {if (a==0) {return}这个。loaddata()//如果clientid为空，则不是If(！This.clientid){ return }//如果代码被扫描进来，那么我们还需要将消息推送到服务器后端服务器。publishmsg(这个。clientid这个。角色，这个。头像网址，这个。昵称)。然后(res={tip。错误(错误消息)}。

获取场景id

我们通过加载方法获取场景id

onLoad(arg) { if(！啊！arg . scene){ this . client id=decodeURIComponent(arg . scene)} }，

核心代码如下

通过gotUserInfo获取用户头像和昵称，通过uni.login获取代码

获取userinfo :函数(e){//获取用户的头像、昵称、uni . log in({ success :(RES)={//获取代码userInfo.code=res.code //通过wx.login Unified传输到后端这个。authwithcode (userinfo)}}}}，authwith code : function(user info){//code get open id to do in后端。继续查找用户表服务器。authwithcode (userinfo)。然后(RES={//如果这个openid绑定到用户if(res.data.id0){ //其中res.data是用户对象，可以继续操作return}//如果没有注册server . registerwithouopenid(RES . data . mini _ OpenID，userinfo.avatar URL，userinfo。昵称)#。然后(RES={//如果注册成功则返回//这里，res.data表示用户对象可以继续操作}，RES={tip.error (res.msg)})}，RES={ tip . error(RES . msg | | ' ')；}) } },

体验地址

本文中的所有应用体验地址如下

互联网行业解决方案，https://idea.techidea8.com/open/idea.shtml? id=5

关于代码

代码获取地址

小程序代码登录

摘要

以上是边肖通过扫描小程序代码实现网站登陆功能的介绍，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！