小程序授权登陆解决方案

goji 发布于2019-08-23 13:48 / 1942人阅读

摘要：前言之前写过一个关于微信授权登陆的文章传送门最近在做小程序的项目，依旧是商城，又开始研究微信的登陆授权坑，第一次接触小程序，授权登陆也是一塌糊涂以后再慢慢的改进场景微信用户可以通过搜索进入小程序也可以通过别人分享进入小程序进入小程序之后需要

前言

之前写过一个关于微信授权登陆的文章
传送门
最近在做小程序的项目，依旧是商城，又开始研究微信的登陆授权坑，第一次接触小程序，授权登陆也是一塌糊涂以后再慢慢的改进

场景

微信用户可以通过搜索进入小程序
也可以通过别人分享进入小程序
进入小程序之后需要用户授权拿到用户信息进行注册

代码实现

初始化页面home页用户第一次进入小程序必须授权后台注册并登陆
app.json

{
"pages": [
    "pages/home/index", 
    "pages/login/index",
     ...
   ]
}

const App = getApp()
import { loginModel } from "../../models/login.js"
import { MineModel } from "../../models/mine.js"
import { encodeUnicode } from "../../utils/index.js"
const ModelLogin = new loginModel()
const Modelmine = new MineModel()
Page({
  data: {
    logged: !1,
    isauth: false,
    locked: false
  },
  onLoad: function(options) {
    // 返回到之前要刷新
    var pages = getCurrentPages() // 获取页面栈
    var prevPage = pages[pages.length - 2] // 前一个页面
    prevPage.setData({
      isBack: true
    })
  },
  onShow: function() {
    // 如果已经授权则显示登录,直接登录不调用授权
    App.WxService.getSetting().then(res => {
      if (res.authSetting["scope.userInfo"]) {
        this.setData({
          isauth: true
        })
      }
    })
    //token 不能在page外面定义，变量写在 page 外面有缓存
    const token = App.WxService.getStorageSync("utoken")
    // 如果有token显示已经授权
    this.setData({
      logged: !!token
    })
    token && setTimeout(this.goBack, 1500)
  },
  login() {
    this.wechatSignUp()
  },
  goBack() {
    // 返回登录之前的页面
    wx.navigateBack({
      delta: 1
    })
  },
  // 登陆注册
  wechatSignUp(cd) {
    // 上锁如果正在请求接口那么就返回
    if (this.data.locked) {
      return
    }
    this.data.locked = true
    //注册或者登陆获取token
    let code = ""
    App.WxService
      .login()
      .then(data => {
        code = data.code
        wx.setStorageSync("logincode", data.code)
        return App.WxService.getUserInfo()
      })
      .then(data => {
        // 请求后台登录注册接口
        return ModelLogin.wechatSignUp({
          encrypteData: data.encryptedData,
          iv: data.iv,
          rawData: encodeUnicode(data.rawData), // 编码
          signature: data.signature,
          code: code
        })
      })
      .then(data => {
        this.data.locked = false
        if (data.data.token == "") {
          wx.showToast({
            title: "登录失败",
            icon: "none"
          })
          return
        }
        App.WxService.setStorageSync("utoken", data.data.token)
        // 访问后台接口获取用户信息
        ModelLogin.getVipInfo({ token: data.data.token }).then(res => {
          App.globalData.userInfo = res.data.userInfo
          // 返回上一页
          this.goBack()
        })
      })
      .catch(err => {
        this.data.locked = false
        console.log(err)
      })
  }
})

这里的App.WxService等价于wx因为wx是回调的方式，这里使用的是promise。
先判断有没有授权，没有授权显示点击授权，有授权显示点击登录，调用的方法都是wechatSignUp，拿到wx.login的code和wx.getUserInfo的数据给后台，然后后台返回token，然后再去访问后台获取用户信息
login的逻辑大概就是这些
login.wxml


  
    
      
      商城
    
    
      请同意授权
      请登录
      
        为了让头号买手可以更好的为您服务
      
    
    
    
  
  
    
    近期你已经授权登陆过商城
    自动登录中

访问后台接口的时候在header里传token如果后台没有拿到token就返回401，前端统一拦截跳转到登陆页面

结束

关于app.js本来打算在app做拦截的，但是异步请求总是在进入页面后才拿到后台返回的数据，因为用户可能从商品详情页等其他页面进入小程序，授权后要返回进入页面，在app.js中拦截就无法返回页面了，所以就直接在页面的js里去判断，还好可以分享的页面不多所以就没有在app.js里写任何东西。第一次接触，希望以后能优化了再发文记录一下

专线服务服务器托管小程序授权小程序解决方案电商小程序解决方案餐饮小程序解决方案

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99598.html

小程序授权功能（废）

摘要：用户确认授权用户取消授权授权成功授权成功重新登陆因外部原因授权失败因外部原因授权失败授权提示小程序需要您的微信授权才能使用哦错过授权页面的处理方法删除小程序重新搜索进入点击授权按钮小程序登陆和使用授权（亲测无效，不用看了，直接看评论）不想重新写页面引导用户授权，因为官方说明 scope 为 scope.userInfo 时，无法弹出授权窗口，请使用理一下思路：登陆操作，获取用...

K_B_Z 2019-08-22 18:39 评论0 收藏0
浅析微信支付：开发前的准备

摘要：本文是浅析微信支付系列文章的第三篇，主要会讲一下在开发前的一些注意事项。浅析微信支付系列已经更新两篇了哟，没有看过的朋友们可以看一下。开通微信支付需要注册登陆微信商户平台，微信支付相关的信息都需要在这个平台上进行操作。本文是【浅析微信支付】系列文章的第三篇，主要会讲一下在开发前的一些注意事项。浅析微信支付系列已经更新两篇了哟～，没有看过的朋友们可以看一下。浅析微信支付：前篇大纲...

yanest 2019-08-16 13:35 评论0 收藏0
大龄业余程序员要搞个django小程序--08--深入理解小程序登陆状态的维护

摘要：由于微信小程序没有一套身份验证管理的框架，只提供等几个，所以对于我这种初学者来说，小程序登陆状态管理就显得很麻烦。按照个人的理解，需要携带。总之，和只要其中之一不存在，都要把登陆状态标记为未登陆。不然用户不清楚不确定是否登陆成功。 ...

zsy888 2021-09-26 09:55 评论0 收藏0
PHP实现微信小程序用户授权的工具类

摘要：事先准备工作申请一个小程序，申请地址传送门仔细阅读小程序的用户授权登陆官方文档用户授权登陆的流程仔细阅读微信用户数据解密的相关文档用户数据解密说明文档在小程序后台配置好相应的后端请求地址，路径是开发开发设置，如图小程序如果需要做多个事先准备工作 1.申请一个小程序，申请地址：传送门 2.仔细阅读小程序的用户授权登陆官方文档：《用户授权登陆的流程》 3.仔细阅读微信用户数据解密的相关文...

seanHai 2019-07-01 12:33 评论0 收藏0
通过小程序实现网站扫码登录！每年都可以省 300 块...代替微信开放平台和服务号的登陆模式！

摘要：微信开放平台要认证开发者，需要块年，微信服务号也需要提交企业资料认证，需要块年。免费的方法来了既然微信开放平台和微信认证的服务号每年都需要块认证费，个人学习不舍得，没资料，那么咱们把矛头指向微信小程序了。我们知道，要接入微信登陆有两种方式 1、微信开放平台2、微信服务号这两种方式均可生成带参数的二维码，然后扫码获取用户基本信息的，所以我们可以在网站上用这两种方式开发网站的扫码登录，...

rickchen 2019-07-01 10:20 评论0 收藏0