node实现小程序登录全过程(登录+身份验证+返回token)

ChasenKaos原创文章,转载请注明出处。
根据官方api的显示,小程序的登录流程如下:


1、用户打开小程序,后台自动获取code
2、开发者把"code"发送到服务器。
3、服务器把"code"、appid、secret等信息发送到微信官方接口。
4、官方返回一个session_key和用户唯一的身份表示openid。
5、开发者通过官方返回的数据生成私有认证token。
6、将token返回至客户端。
7、用户每次请求携带token。

完整代码如下(node):

1、小程序app.js代码

//app.js
//app.js
App({
  onLaunch: function() {
    // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
    // 获取用户信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo

              // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
  globalData: {
    userInfo: null
  },
  globalApi: {
    checkUser: 'http://localhost:4000/checkUser/'
  },
  getToken() {
    return new Promise((resolve, reject) => {
      // 登录
      wx.login({
        success: res => {
          // 发送 res.code 到后台换取 openId, sessionKey, unionId
          if (res.code) {
            //发送res.code 到后台
            wx.request({
              url: this.globalApi.checkUser,
              method: 'POST',
              data: {
                code: res.code
              },
              success(res) {
                //成功返回数据后,将token值存储到localStorage中
                wx.setStorage({
                  key: 'yerlLocalToken',
                  data: res.data.token
                });
                var resArg = res.data.token;
                resolve()
              },
              fail() {
                reject();
              }
            })
          }
        }
      })
    })
  }
})

我是在本地环境测试的,所以api用的是本地地址,我把它放到了globalApi中方便调用。

2、小程序的页面中调用token

///index.js
//获取应用实例
const app = getApp()
Page({
  data: {
    token:''
  },
  onLoad() {
    let that = this;
    app.getToken().then(function(){
      that.setData({
        token: wx.getStorageSync('yerlLocalToken')
      });
      console.log(that.data.token)
    });
  }
})

3、后台(node + express + mongodb)

//express
const express = require('express');
const router = express.Router();

//处理formdata
const bodyParser = require('body-parser');
const jsonParser = bodyParser.json();
const urlencodedParser = bodyParser.urlencoded({
    extended: false
});

//处理node request请求
const request = require('request');

//token
const jwt = require('./jwt.js');  //这个是jsonwebtoken中的方法,我又进行了二次加工。

//微信小程序设置
const wx = require('./wxconfig.json'); //文件中存储了appid 和 secret

//数据库
const datebase = require('./dbconfig.json') //文件中存储了数据库地址
const mongodb = require('mongodb');
const MongoClient = mongodb.MongoClient;

//路由
router.post('/', urlencodedParser, (req, res) => {
        //拿到前台给的code后,发送请求
    if(req.body.code) {
        let options = {
            method: 'POST',
            url: 'https://api.weixin.qq.com/sns/jscode2session?',
            formData: {
                appid: wx.appid,
                secret: wx.secret,
                js_code: req.body.code,
                grant_type: 'authorization_code'
            }
        };

        request(options, (error, response, body) => {
            if(error) { //请求异常时,返回错误信息
                res.json({
                    "status": "error",
                    "code": "ChasenKaso原创文章,转载请注明出处"
                })
            } else {
                //返回值的字符串转JSON
                let _data = JSON.parse(body);

                //根据返回值创建token
                let _l = jwt.createHoursToken(req.body.code, _data.openid, _data.session_key);
                let _s = jwt.createMonthToken(req.body.code, _data.openid, _data.session_key);

                //连接数据库
                MongoClient.connect(datebase.url, (err, client) => {
                    if(err) {
                        res.json({
                            "status": "error",
                            "code": "0002"
                        });
                        client.close();
                    } else {
                        const users = client.db(datebase.db).collection('Users'); //查询数据库中是否有当前的openid
                        users.count({
                            "openid": _data.openid
                        }, (err, result) => {
                            //当数据库中没有该openid时,插入。
                            if(result == 0) {
                                users.insert({
                                    "openid": _data.openid,
                                    "localToken": _l,
                                    "serverToken": _s
                                }, (err, result) => {
                                    res.json({
                                        "status": "ok",
                                        "token": _l
                                    });
                                    client.close();

                                })
                            };
                            //当数据库中查询到openid时,更新token
                            if(result != 0) {
                                users.update({
                                    "openid": _data.openid
                                }, {
                                    $set: {
                                        "localToken": _l,
                                        "serverToken": _s
                                    }
                                }, (err, result) => {
                                    if(err) {
                                        res.json({
                                            "status": "error",
                                            "code": "0003"
                                        });
                                        client.close();
                                    } else {
                                        res.json({
                                            "status": "ok",
                                            "token": _l
                                        });
                                        client.close();
                                    }
                                })
                            }
                        })
                    }
                })

            }
        });
    } else {
        res.json({
            "status": "error",
            "code": "0004"
        });
    }
})

module.exports = router;

在主程序中调用这个router就可以了,代码如下:

const checkUser = require('./router/checkUser.js');
app.use('/checkUser',checkUser)

运行后,显示如下:


调试台已经显示了后台返回的token。
我把app.js中的用户登录使用promise进行了封装,这样可以让我在运行小程序并打开index页面时,可以正常显示token,否则会出现异步登录未成功,页面就已经渲染完成,无法获取到token的现象。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,539评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,594评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,871评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,963评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,984评论 6 393
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,763评论 1 307
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,468评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,357评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,850评论 1 317
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,002评论 3 338
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,144评论 1 351
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,823评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,483评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,026评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,150评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,415评论 3 373
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,092评论 2 355

推荐阅读更多精彩内容

  • 转载链接 注:本文转载知乎上的回答 作者:初雪 链接:https://www.zhihu.com/question...
    pengshuangta阅读 28,550评论 9 295
  • 盛夏的一个午后,孩子们和家人都睡着了,我偷偷一个人来到离家不远的一家小超市买了一只巧克力冰淇淋,躲在屋檐下的一角,...
    林秋千阅读 1,259评论 0 1
  • 周末时光好美妙, 琼浆滋养身心好。 静卧床榻亲莫笑, 窗外雨濯绿丝绦。
    宁静遇夏雨阅读 186评论 1 5
  • 《超时空同居》讲述了佟丽娅饰演的来自2018年的失意女青年谷小焦,因为一个突如其来的时空意外,不得不与雷佳音饰演的...
    辛小婷阅读 447评论 0 4
  • 我想要的感情,从来都是平平淡淡,细水长流。 我想要的感情,不过是相濡以沫。回首一笑,眼睛里,心里,都是欢喜。 小的...
    慕白橙阅读 249评论 0 0