扫描微信小程序代码实现网站登录实现分析

使用扫描代码登录网站

网上有很多关于实现笔记本功能的文章，但很少给出例子。今天笔者用小程序代码实现了网站登陆，体验地址如下

https://idea.techidea8.com/open/idea.shtml?id=5

思路

核心流程

关键流程

建立场景id和websocket之间的绑定关系

获取场景id

场景id可以在前端生成，也可以在后端生成，只要同时保证场景ID的唯一性即可。

前端生成可以采用随机数和时间戳或uuid算法的形式

//时间戳varsceneid=' scend-'newdata()。gettime()math . ceil(math . random()* 88888 100000)；建立websocket

var ws=new WebSocket(' ws ://192 . 168 . 0 . 106/web socket？client id=' sceneid)ws . onopen=function(env){ console . log(env)} ws . onmessage=function(env){ var data=env . data；//此数据为后端发送的用户数据。}后端建立websocket

后端使用go语言github.com/gorilla/websocket包构建websocket，因为golang非常适合高并发场景。

func(ctrl * Pushctrl)web socket(w http。ResponseWriter，req *http。请求){ //fmt。printf(“% v”)，请求。Header) //todo验证访问是否合法//checktoken (userid int64，token string)query :=req . URL . query()client id 3360=query . get(' client id ')conn，err :=(websocket。升级程序{ CheckOrgin : func(r * http。Request) bool { return true }，})。升级(w，req，nil)如果出错！=nil { log。Println(错误。Error())返回} clientMap。Store(clientid，conn) go func(clientId字符串，Conn *websocket。Conn) {//处理错误消息defer func(){ conn . close(). client map . delete(client id)}()对于{_，_，err 3360=conn . read message()if err！=nil { log . println(err . error())return } } }(client id，conn)}我们使用sync.map来建立场景id和websocket之间的对应关系

clientMap。保存(场景id，conn)

我们需要移除因异常而断开的con

clientMap。删除(场景id)

获取小程序二维码

获取小程序的访问令牌

小程序访问请求界面如下

``

这个接口的日常使用频率有限，所以我们需要缓存这些数据。有许多缓存方案，包括redis和内存。我们可以在这里用一个变量直接存储它们

accesstoken :=' ' func Getaccesstoken()字符串{ return accesstoken } func refresh accesstoken()字符串{ URL=' ' Resp :=httpget(URL)//Resp是包含accesstoken的json字符串。我们可以解析这个json来获得accesstoken=Decode accesstoken，accesstoken (resp)返回accesstoken。我们还需要一个滴答计数器来刷新访问令牌。访问令牌的有效期是7200秒，所以我们可以每4000秒刷新一次访问令牌。

func refresh accesstoken(){ ticker :=time。newticker(时间。秒* 4000)表示{select {case-ticker。c: refreshaccesstoken ()}}}在init.go中的init方法中启动协作

go refreshAccessToken()小程序的二维码编程技巧

小程序二维码请求界面如下

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

因为这个链接会返回两种结果

错误返回Json

{'errcode' :40001，' errmsg' :' what and why'}正确返回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)刷新图片二维码

函数刷新二维码(){客户端id='场景-'新日期().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，这个框架不错，完全是某视频剪辑软件的语法，

一套代码可以生成H5/小程序/android/ios

我们采用了某视频剪辑软件的看特性，通过监听使用者辩证码来确定是否发送信息

watch : { userid :函数(a，b){ if(a==0){ return }这个。加载数据()//如果标识符是空的说明不是扫码进来的if(！this.clientid){ return }//如果是扫码进来的，那么我们还需要推送消息到服务器后端服务器发布消息(this.clientid，this.userid，this.role，this.avatarUrl，this .昵称).然后(res={ tip.error(res.msg) }，res={ tip.error(res.msg) })获取场景编号

我们通过装载方法获得场景编号

onLoad(arg) { if(！啊！啊。场景){这个。客户端id=decodeURIComponent(arg。场景)} }，核心代码如下

通过gotUserInfo获得用户头像、昵称等，通过uni。登录名获得密码

gotUserInfo :function(e) { //获得用户头像、昵称uni。登录({ success :(RES)={//通过wx.login获得code userInfo.code=res.code //统一传递到后端这个。authwitdocode(UserInfo)} })})，authwithdocode :函数(UserInfo){//代码获得信息在后端做，做了后继续去查用户表服务器. AuthWithCode(用户信息)。然后(res={ //如果这个信息绑定了用户if(res.data.id0){ //这里res.data就是用户对象，可以继续操作返回；} //如果没有那么注册服务器registerwithouopenid(RES . data .mini _ OpenID，userInfo.avatarUrl，userInfo .昵称)# .然后(res={ //注册成功则返回//这里res.data就是用户对象可以继续操作}，res={ tip.error(res.msg) }) }，res={ tip。错误(RES . msg | | ' ')；}) } }, 体验地址

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

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

关于代码

代码获得地址

小程序码登陆

代码配置

请认真阅读readme.md

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。