ミニプログラムの認証ログインに関する解決策（コード付き）

この記事の内容は、ミニ プログラムの認証ログインに関する解決策 (コード付き) です。必要な方は参考にしていただければ幸いです。

私は最近、まだモールである小さなプログラムのプロジェクトに取り組んでおり、WeChat のログイン認証ピットを研究し始めています。小さなプログラムに触れるのは初めてです。認証ログインも混乱しています。後でゆっくり改善します

シナリオ

WeChat ユーザーは検索からミニ プログラムに入ることができます。他のユーザーとの共有によるミニ プログラム
ミニ プログラムに入った後、登録用のユーザー情報を取得するにはユーザーの承認が必要です

コードの実装

初期化ページのホームページ初めてミニ プログラムに入るユーザーは、バックグラウンド登録を承認して

app.json

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

login にログインする必要があります。js ロジックはページに入り、承認されているかどうかを判断し、ユーザーが承認されているかどうかを判断します。承認されている場合はログインが表示され、承認されていない場合は、ユーザーが登録しているかログインしているかに関係なく、バックグラウンドで提供される同じインターフェイスを使用します。返されたトークンはローカルに保存されます。

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 は、wx がコールバック メソッドであり、ここでは Promise が使用されているため、wx と同等です。

まず認可があるかどうかを確認します。認可がない場合は「ログイン」をクリックします。呼び出しメソッドはすべて wechatSignUp のコードと wx.getUserInfo のデータを取得します。バックグラウンドにアクセスし、バックグラウンドがトークンを返し、バックエンドにアクセスしてユーザー情報を取得します。
ログインのロジックはおそらく次のとおりです
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>

バックエンドインターフェイスにアクセスするときに、ヘッダー内のトークン。バックエンドがトークンを取得できない場合は、401 を返します。フロントエンドは統合インターセプトし、ログイン ページにジャンプします。

End

app.jsについて 本来はアプリ内でインターセプトすることを目的としていますが、非同期リクエストはページに入った後に必ず取得されます バックグラウンドでデータが返されるのは、ユーザーが商品詳細ページなど他のページからミニプログラムに入って戻ってくる可能性があるためですapp.jsでインターセプトされた場合はページを返せないので、ユーザーがページのjsで直接判断できます。まあ、共有するページがあまりないので、しませんでした。 app.js に何でも書きます。これが私の最初の連絡先です。将来的には最適化して、記録するために投稿できればと思っています。

以上がミニプログラムの認証ログインに関する解決策（コード付き）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。