Lösung für die autorisierte Anmeldung des Miniprogramms (mit Code)

Der Inhalt dieses Artikels befasst sich mit der Lösung für die autorisierte Anmeldung des Miniprogramms (mit Code). Ich hoffe, dass er für Freunde hilfreich ist.

Vor Kurzem arbeite ich an einem Miniprogrammprojekt, bei dem es sich immer noch um ein Einkaufszentrum handelt, und ich habe begonnen, die Login-Autorisierungsgrube von WeChat zu studieren. Es ist mein erstes Mal, dass ich das Miniprogramm und die Autorisierungsanmeldung kontaktiere ist auch ein Durcheinander. Ich werde es später langsam verbessern

Szenario

WeChat-Benutzer können das Miniprogramm aufrufen, indem sie
suchen, oder sie können das Miniprogramm über aufrufen Teilen mit anderen
Nach dem Aufrufen des Miniprogramms ist eine Benutzerautorisierung erforderlich, um Benutzerinformationen für die Registrierung zu erhalten

Code-Implementierung

Startseite der Initialisierungsseite Benutzer, die das eingeben Das Miniprogramm muss zum ersten Mal die Hintergrundregistrierung autorisieren und sich anmelden
app.json

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

js-Login gibt die Seite ein, um festzustellen, ob sie autorisiert wurde, und bestimmt, ob der Benutzer autorisiert wurde . Bei Autorisierung wird die Anmeldung angezeigt, bei Nichtautorisierung wird die Autorisierung angezeigt. Unabhängig davon, ob sich der Benutzer registriert oder anmeldet, verwendet er oder sie dieselbe Schnittstelle, die vom Hintergrund bereitgestellt wird. Das zurückgegebene Token wird lokal in
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 gespeichert und entspricht hier wx, da wx eine Rückrufmethode ist und hier Versprechen verwendet werden.
Stellen Sie zunächst fest, ob eine Autorisierung vorliegt. Wenn eine Autorisierung vorliegt, klicken Sie auf „Anmelden“. Holen Sie sich den Code von wx.getUserInfo Hintergrund, und dann gibt der Hintergrund das Token zurück und dann Greifen Sie dann auf das Backend zu, um Benutzerinformationen zu erhalten
Die Anmeldelogik ist wahrscheinlich diese
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>

Übergeben Sie beim Zugriff auf die Backend-Schnittstelle das Token im Header. Wenn das Backend das Token nicht erhält, gibt es 401 zurück. Das Front-End Unified Interception und Sprung zur Anmeldeseite

Ende

Was app.js betrifft, war es ursprünglich dazu gedacht, in der App abgefangen zu werden, aber asynchrone Anfragen werden immer nach dem Aufrufen der Seite empfangen. Die vom Hintergrund zurückgegebenen Daten sind darauf zurückzuführen, dass der Benutzer das Miniprogramm möglicherweise von anderen Seiten aus aufruft, z. B. von den Produktdetails Seite und Rückkehr zur Seite nach der Autorisierung. Wenn die Seite in app.js abgefangen wird, können wir sie direkt im js der Seite beurteilen. Nun, es gibt nicht viele Seiten zum Teilen, also habe ich es nicht getan. Ich schreibe nichts in app.js. Dies ist mein erster Kontakt, ich hoffe, ich kann ihn optimieren und in Zukunft veröffentlichen

Das obige ist der detaillierte Inhalt vonLösung für die autorisierte Anmeldung des Miniprogramms (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!