Solution pour la connexion autorisée du mini programme (avec code)

Le contenu de cet article concerne la solution de connexion autorisée du mini programme (avec code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Récemment, je travaille sur un projet de mini-programme, qui est toujours un centre commercial, et j'ai commencé à étudier la fosse d'autorisation de connexion de WeChat. C'est la première fois que je contacte le mini-programme et l'autorisation de connexion. C'est aussi un gâchis. Je l'améliorerai lentement plus tard

Scénario

Les utilisateurs de WeChat peuvent accéder au mini-programme en recherchant
ou ils peuvent accéder au mini-programme en le partager avec d'autres
Après être entré dans le mini-programme, l'autorisation de l'utilisateur est requise pour obtenir les informations utilisateur pour l'enregistrement

Mise en œuvre du code

Page d'accueil de la page d'initialisation que les utilisateurs doivent autoriser enregistrement backend et connexion lors de la première entrée dans le mini programme
app.json

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

La logique login.js entre dans la page pour déterminer si elle a été autorisée et détermine si l'utilisateur a été autorisé. S'il est autorisé, la connexion sera affichée, s'il n'est pas autorisé, l'autorisation sera affichée. Que l'utilisateur s'inscrive ou se connecte, il utilise la même interface fournie par l'arrière-plan. Le jeton renvoyé est stocké localement dans
login.js

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 est ici équivalent à wx car wx est une méthode de rappel et les promesses sont utilisées ici.
Déterminez d'abord s'il y a une autorisation. S'il n'y a pas d'autorisation, cliquez sur Autoriser. S'il y a une autorisation, cliquez sur Connexion. Les méthodes d'appel sont toutes wechatSignUp. Obtenez le code de wx.login et les données de wx.getUserInfo. arrière-plan, puis l'arrière-plan renvoie le jeton, puis accédez ensuite au backend pour obtenir des informations sur l'utilisateur
La logique de connexion est probablement la suivante
login.wxml

<view class="login-container">
  <view class="login" wx:if="{{ !logged }}">
    <view class="app-info">
      <image class="app-logo" src="./s-toplogo@2x.png" />
      <text class="app-name">商城</text>
    </view>
    <view class="alert">
      <view class="alert-title" wx:if="{{!isauth}}">请同意授权</view>
      <view class="alert-title" wx:if="{{isauth}}">请登录</view>
      <view class="alert-desc">
        <view class="alert-text">为了让头号买手可以更好的为您服务</view>
      </view>
    </view>
    <button type=&#39;primary&#39; wx:if="{{!isauth}}" class="sui-f16" open-type="getUserInfo" bind:getuserinfo="wechatSignUp">确认授权</button>
    <button type="primary" wx:if="{{isauth}}" class="weui-btn" bindtap="login">确认登录</button>
  </view>
  <view class="logged" wx:else>
    <image class="logged-icon" src="./s-toplogo@2x.png" />
    <view class="logged-text">近期你已经授权登陆过商城</view>
    <view class="logged-text">自动登录中</view>
  </view>
</view>

Lors de l'accès au backend interface, transmettez le jeton dans l'en-tête. Si le backend n'obtient pas le jeton, 401 sera renvoyé, le front-end intercepte uniformément et passe à la page de connexion

Fin <.>

Concernant app.js, il était initialement prévu pour être intercepté dans l'application, mais les requêtes asynchrones sont toujours effectuées après avoir entré la page. Obtenez les données renvoyées par l'arrière-plan, car l'utilisateur peut entrer dans le mini programme depuis d'autres. pages telles que la page de détails du produit, et retour à la page d'entrée après autorisation. Si interceptée dans app.js, la page ne peut pas être renvoyée, donc le jugement se fait directement dans le js de la page, heureusement il n'y a pas beaucoup de pages. qui peut être partagé, donc je n'ai rien écrit dans app.js. C'est mon premier contact, j'espère pouvoir l'optimiser avant de poster un record dans le futur

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!