扫微信小程序码实现网站登陆实现解析

使用扫小程序码登陆网站

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

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

思路

核心流程

关键流程

建立场景sceneid和websocket的绑定关系

获得sceneid

场景ID可以前端生成,也可以后端生成,只需要保证sceneid的同一时间唯一性即可。

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

//时间戳
var sceneid ="scend-" + new Data().getTime() + Math.ceil(Math.random()*888888+1000000);

建立websocket

var ws = new WebSocket("ws://192.168.0.106/websocket?clientid="+sceneid )
ws.onopen=function(env){
  console.log(env)
}
ws.onmessage=function(env){
  var data = env.data;
  //这个data 就是后端发来的用户数据
} 

后端建立websocket

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

func (ctrl *PushCtrl) websocket(w http.ResponseWriter, req *http.Request) {
  //fmt.Printf("%+v",request.Header)
  //todo 检验接入是否合法
  //checkToken(userId int64,token string)
  query := req.URL.Query()
  clientid := query.Get("clientid")
  conn, err := (&websocket.Upgrader{
    CheckOrigin: func(r *http.Request) bool {
      return true
    },
  }).Upgrade(w, req, nil)

  if err != nil {
    log.Println(err.Error())
    return
  }
  clientMap.Store(clientid, conn)
  go func(clientId string, conn *websocket.Conn) {
    //处理出错信息
    defer func() {
      conn.Close()
      clientMap.Delete(clientid)
    }()
    for {
      _, _, err := conn.ReadMessage()
      if err != nil {
        log.Println(err.Error())
        return
      }
    }
  }(clientid, conn)
}

我们采用sync.map建立sceneid和websocket的对应关系

clientMap.Save(sceneid,conn)

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

clientMap.Delete(sceneid)

获得小程序二维码

获得小程序的accesstoken

小程序access 请求接口如下

``

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

accesstoken :=""
func GetAccessToken() string{
  return accesstoken
}
func RefreshAccessToken()string{
  url = ""
  resp := httpget(url)
  //resp 是一个包含accesstoken的json字符串,我们解析这个json即可
  accesstoken = decodeaccesstokenfromjson(resp)
  return accesstoken
}

我们还需要一个滴答计数器用来刷新accesstoken,accesstoken 的有效期是7200秒,我们4000秒刷新一次accesstoken 即可

func refreshAccessToken(){
  ticker := time.NewTicker(time.Second *4000)
  for{
    select {
      case <-ticker.C:
        RefreshAccessToken()
    }
  }
}

在init.go 中的init方法中启动协程

go refreshAccessToken()

小程序二维码编程技巧

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

https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=ACCESSTOKEN

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

错误返回Json

{
"errcode":400001,
"errmsg":"什么什么原因"
}

正确返回j图片buffer

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

我们建议一种标准化结果

{
code:0,
data:"",
msg:"结果说明"
}

|参数|说明|

|-|-|-|

|code|标识成功或者失败,200为成功,400为失败|

|data|图片的base64格式编码|

|msg|结果说明,或者出错提示|

代码示例如下

url := fmt.Sprintf("https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=%s", token)
ret, err := util.PostJSON(url, arg)
if err != nil {
    util.FailMsg(w, err.Error())
    return
}
jsonstr := string(ret)
if strings.Contains(jsonstr, "errmsg") {
  util.FailMsg(w, jsonstr)
  return
} else {
  base64data := base64.StdEncoding.EncodeToString(ret)
  util.RespOk(w, "data:image/png;base64,"+base64data)
}

其中util是笔者封装的常用工具包

常用工具包

前端请求成功后获得data,可以利用$("#qrcode").attr("src",res.data)刷新图片二维码

function refreshqrcode(){
  clientId = "scene-"+new Date().getTime();
  var api = restgo.buildapi("miniapp/getwxacodeunlimit")
  restgo.post(api,{"scene":clientId}).then(res=>{
    if(res.code==200){
      $("#qrcode").attr("src",res.data)
    }else{
      alert(res.msg)
    }
    intiwebsocket()
  },res=>{
    alert(res.msg)
  })
}

小程序处理关键点

采用好的框架

我们编程过程才用了uniapp,这个框架不错,完全是vue的语法,

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

我们采用了vue的watch特性,通过监听userid来确定是否发送信息

watch:{
   userid:function(a,b){
      if(a==0){
        return
      }
      this.loaddata()
      //如果clientid是空的说明不是扫码进来的
      if(!this.clientid){
        return
      }
//如果是扫码进来的,那么我们还需要推送消息到服务器后端
server.PublishMsg(this.clientid,this.userid,this.role,this.avatarUrl,this.nickName).then(res=>{
        tip.error(res.msg)
      },res=>{
        tip.error(res.msg)
      })
   }
 }

获取sceneid

我们通过onload方法获得sceneid

onLoad(arg) {
    if(!!arg && !!arg.scene){
          this.clientid = decodeURIComponent(arg.scene)
    }
  },

核心代码如下

通过gotUserInfo获得用户头像、昵称等,通过uni.login获得code

gotUserInfo :function(e) {
       //获得用户头像、昵称、
       uni.login(
       {
         success:(res) =>{
              //通过wx.login获得code
              userInfo.code = res.code
                        //统一传递到后端
            this.authwithcode(userInfo)
         }
       }
       )
      }
     },
    authwithcode:function(userInfo){
            //code获得openid在后端做,做了后继续去查User表
      server.AuthWithCode(userInfo).then(res=>{
          //如果这个openid绑定了用户
          if(res.data.id>0){
            //这里res.data 就是user对象,可以继续操作
            return ;
          }
          //如果没有那么注册
          server.RegisterWithOpenId(res.data.mini_openid,userInfo.avatarUrl,userInfo.nickName)#.then(res=>{
            //注册成功则返回
            //这里res.data 就是user对象可以继续操作
          },res=>{
            tip.error(res.msg)
          })
        },res=>{
          tip.error(res.msg||"");
        })
      }
    }, 

体验地址

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

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

关于代码

代码获得地址

小程序码登陆

代码配置

请认真阅读readme.md

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

(0)

相关推荐

  • 微信小程序调用微信登陆获取openid及java做为服务端示例

    一.微信小程序 第一步:调用 wx.login获取code 文档地址 第二步:判断用户是否授权读取用户信息 文档地址 第三步:调用wx.getUserInfo读取用户数据 文档地址 第四步:由于小程序后台授权域名无法授权微信的域名,所以我们只能通过我们自己的服务器去调用微信服务器去获取用户信息,故我们将wx.login获取code 和 wx.getUserInfo 获取的encryptedData与iv 通过wx.request 请求传入后台 服务器返回的数据: 小程序代码: //调用登录接口,

  • 微信小程序-详解微信登陆、微信支付、模板消息

    微信公众平台近日悄然开始内测微信小程序(微信公众号)功能,引来无数开发者和普通用户关注,微信支付的能力,是随着小程序的发布一并推出的,具有介绍如下: wx.login(OBJECT) 调用接口获取登录凭证(code)进而换取用户登录态信息,包括用户的唯一标识(openid) 及本次登录的 会话密钥(session_key).用户数据的加解密通讯需要依赖会话密钥完成. OBJECT参数说明: success返回参数说明: 示例代码: //app.js App({ onLaunch: functio

  • 详解微信小程序-扫一扫 wx.scanCode() 扫码大变身

    效果 js let app = getApp(); Page({ data: { img: "/images/1.jpg" }, onLoad() { }, scan() { wx.scanCode({ success: (res) => { console.log("扫码结果"); console.log(res); this.setData({ img: res.result }) }, fail: (res) => { console.log(re

  • 微信小程序 登陆流程详细介绍

    微信小程序 登陆流程 1:session_key和openId是什么?session_key 官方说明为: session_key是微信服务器生成的针对用户数据进行加密签名的密钥 session_key的用途 (1)对wx.getUserInfo()接口得到"用户信息中的密文"进行解密. (2)对它"稍作处理",用作维护小程序的登录态. "稍微处理"大体为: (1)生成一个随机数(官方把他叫做3rd_session) (2)把这个随机数当sess

  • 微信小程序 自动登陆PHP源码实例(源码下载)

    微信小程序 自动登陆PHP源码实例 app.js 初始化APP自动登陆 您也可以在任何地方进行用户登陆验证 用法:首先在js文件中定义 var app = getApp(); app.getUserDataToken(); App({ onLaunch: function () { /*初始化APP自动登陆 * 您也可以在任何地方进行用户登陆验证 *用法:首先在js文件中定义 var app = getApp(); app.getUserDataToken(); */ this.getUserD

  • 小程序实现授权登陆的解决方案

    前言 之前写过一个关于微信授权登陆的文章 传送门 最近在做小程序的项目,依旧是商城,又开始研究微信的登陆授权坑,第一次接触小程序,授权登陆也是一塌糊涂以后再慢慢的改进 场景 微信用户可以通过搜索进入小程序 也可以通过别人分享进入小程序 进入小程序之后需要用户授权拿到用户信息进行注册 代码实现 初始化页面home页用户第一次进入小程序必须授权后台注册并登陆 app.json { "pages": [ "pages/home/index", "pages/lo

  • 扫微信小程序码实现网站登陆实现解析

    使用扫小程序码登陆网站 网络上关于实现本本功能的文章很多,但是给出案列的几乎没有,今天笔者实现用小程序码实现网站登陆,体验地址如下 https://idea.techidea8.com/open/idea.shtml?id=5 思路 核心流程 关键流程 建立场景sceneid和websocket的绑定关系 获得sceneid 场景ID可以前端生成,也可以后端生成,只需要保证sceneid的同一时间唯一性即可. 前端生成可以采用随机数加时间戳的形式,也可以用uuid算法 //时间戳 var sce

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

    网络上关于实现本本功能的文章很多,但是给出案列的几乎没有,今天笔者实现用小程序码实现网站登陆,体验地址如下 https://idea.techidea8.com/open/login.shtml 思路 核心流程 关键流程 建立场景sceneid和websocket的绑定关系 获得sceneid 场景ID可以前端生成,也可以后端生成,只需要保证sceneid的同一时间唯一性即可. 前端生成可以采用随机数加时间戳的形式,也可以用uuid算法 //时间戳 var sceneid ="scend-&qu

  • 详解微信小程序开发用户授权登陆

    本篇将帮助读者实现基于 微信开发者工具 & C#环境 下的用户在小程序上的授权登陆. 准备: 微信开发者工具下载地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 微信小程序开发文档:https://developers.weixin.qq.com/miniprogram/dev/index.html 开发: 在开发之初,我们需要先明确微信方已经制定好的授权登陆流程,参看 官方API - 登陆接口.

  • 微信小程序结合ThinkPHP5授权登陆后获取手机号

    1.在我们授权登陆后会获取到用户的 sessionKey 这个是获取手机号不可分割的一部分 上代码 wxml: <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">获取手机号</button> js:当我们在调用这个方法的时候可以在控制台输出一下 e 下方用红框框起来的两个也是获取手机号不可分割的一部分 getPhoneNumber: function

  • 微信小程序列表时间戳转换实现过程解析

    这篇文章主要介绍了微信小程序列表时间戳转换实现过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 第一步先写js 随便命名为times.js function toDate(number){ var n=number * 1000; var date = new Date(n); var Y = date.getFullYear() + '/'; var M = (date.getMonth()+1 < 10 ? '0'+(date.get

  • 微信小程序button标签open-type属性原理解析

    这篇文章主要介绍了微信小程序button标签open-type属性原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 open-type (微信开放能力):合法值中的其中之一: getUserInfo说明:引导用户授权 而获取用户信息,可以从bindgetuserinfo回调中获取到用户信息 而按钮的bindgetuserinfo属性 说明:用户点击该按钮时,会返回获取到的用户信息,回调的detail数据与wx.getUserInfo返回的

  • 微信小程序实现人脸识别登陆的示例代码

    前言 这是一篇关于一个原创微信小程序开发过程的原创文章.涉及到的核心技术是微信小程序开发方法和百度云人脸识别接口.小程序的主体是一个用于个人密码存储的密码管理器,在登陆注册阶段,需要调用百度云人脸识别接口以及百度云在线人脸库的管理接口.本文主要涉及登陆注册模块的实现,而且不需要PHP后台代码,完全在线调用接口实现,希望后来的你能有所收获! 步骤 步骤 涉及接口(百度云) 拍摄或者相册选择 并 上传比对样本照片到 人脸库 人脸库管理接口(main:人脸注册) 拍摄照片并上传,云服务器在线比对 人脸

  • 生成无限制的微信小程序码的示例代码

    概述 现在除了用二维码之外,微信还可以为我们生成小程序码,大概长这个样子. 如果要生成无限制的小程序码,需要几个步骤 1.小程序某个页面的地址,也即是指定page参数的值: 2.获取access_token; 3.指定scene参数的值: 4.调用getwxacodeunlimit接口,并将返回结果存储到一个图片里. page参数 page参数的值都是以pages开头的,后面加上能到导航到某个小程序页面的路径,例如: pages/xxxxxx 获取access_token 这个比较简单,只需要根

  • 微信小程序之侧边栏滑动实现过程解析(附完整源码)

    一.效果图 讲什么都不如直接上效果图好,所以我们先来看下实现效果如何. 通过滑动屏幕,或者点击左上角的图标按钮,都能实现侧边栏的划出效果. 二.原理解析 1.先实现侧边栏的内容,让侧边栏的内容居左,然后将侧边栏的内容置于屏幕的最底部. 2.接着实现主页的内容,并且让主页的内容默认是覆盖在侧边栏的内容上面. 3.然后,实现手指滑动屏幕的时候,主页的内容,向左滑动一定的宽度,让侧边栏的内容显示出来,而滑动的效果是通过 css 的 transition 来实现的. 三.源码 由于实现过程的时,我对代码

  • 微信小程序实现左侧滑栏过程解析

    前言 一直想给项目中的小程序设置侧滑栏,将退出按钮放到侧滑中,但是小程序没有提供相应的控件和API,因此只能自己手动实现,网上很多大神造的轮子很不错,本文就在是站在巨人的肩膀上实现. hexo图片不显示问题,可前往简书 效果 先看看效果,我的侧滑栏需要列出如下信息: 初始状态下,左下角设置悬空按钮 点击悬空按钮,侧边栏拉出,悬空按钮旋转180度 主页内容向右滑动一定比例,并设置阴影遮罩 实现 首先将xml文件分为三部分,一部分是主页内容,一部分是侧滑栏内容,一部分是悬浮按钮. <!--index

随机推荐