小程序扫码登录网页应用

详细实现方式以及代码下载请前往 https://www.passerma.com/article/85

一、整体实现思路

1. 前端调用接口生成带唯一scene参数的小程序码，并定时器获取该参数登录状态

2. 用户扫描小程序码跳转到小程序界面，同时后台将用户openid与唯一scene参数关联

3. 小程序界面弹出登录确认按钮，用户确认登录，查询数据库是否存在该openid用户，有则直接将唯一scene参数设置为可登录状态，前端获取状态后直接进行登录。如果没有改用户，则直接新建一个用户，同时让用户完善个人信息，然后再将唯一scene参数设置为可登录状态，前端获取状态后直接进行登录

二、核心步骤代码

1. 生成带唯一scene参数的小程序码

由于生成小程序码为微信服务端接口，因此该接口需要后台实现

1) 获取微信AccessToken

前往微信小程序开放平台，选择开发管理，进入开发设置，复制AppID以及AppSecret

调用获取接口调用凭据接口getAccessToken

func GetWechatAccessToken() (errHas error) {
    appid := conf.GetConf("appid")
    secret := conf.GetConf("secret")
    url := fmt.Sprintf("https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=%s&secret=%s", appid, secret)
    resp, err := restgo.NewHttpBuilder().Send(restgo.GET, url)
    if err != nil {
        return errors.New("获取AccessToken失败")
    }
    return nil
}

2) 生成带参数的小程序码

调用获取不限制的小程序码接口getUnlimitedQRCode

后台生成唯一scene，同时将生成的小程序码数据一起返回前端记录

func GetWechatCode(GUID string) (data []byte, err error) {
    resp, err := restgo.NewHttpBuilder().Payload(map[string]interface{}{
        "scene": GUID,
        "page":  "pages/center/index",
    }).Send(restgo.POST, "https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token="+access_token)
    if err != nil {
        return nil, errors.New("小程序码生成失败")
    }
    var res map[string]string
    resp.BodyUnmarshal(&res)
    if res["errmsg"] != "" {
        return nil, errors.New("小程序码生成失败")
    }
    return resp.Body(), nil
}

该接口返回的是小程序码的base64，前端显示需要拼接data:image/png;base64,

小程序获取唯一scene

function onLoad (query) {
  // scene 需要使用 decodeURIComponent 才能获取到生成二维码时传入的 scene
  const scene = decodeURIComponent(query.scene)
}

2. 将openid与scene进行绑定

扫码之后小程序使用wx.login接口获得临时登录凭证code后传到开发者服务器调用登录接口code2Session获取openid

func GetWechatcode2Session(js_code string) (data map[string]string, err error) {
    appid := conf.GetConf("appid")
    secret := conf.GetConf("secret")
    url := fmt.Sprintf("https://api.weixin.qq.com/sns/jscode2session?appid=%s&secret=%s&js_code=%s&grant_type=authorization_code", appid, secret, js_code)
    resp, err := restgo.NewHttpBuilder().Send(restgo.GET, url)
    if err != nil {
        return nil, errors.New("获取用户信息失败")
    }
    res := map[string]string{}
    resp.BodyUnmarshal(&res)
    return res, nil
}

然后将openid与scene进行绑定

3. 小程序弹出登录弹窗

点击弹窗的登录按钮，查询用户信息，后台将scene对应的状态改为登录成功

前端轮询到scene状态改变，状态是扫码确认成功，进行登录

详细实现方式以及代码下载请前往 https://www.passerma.com/article/85