미니프로그램(코드포함) 인증 로그인 솔루션

이 글의 내용은 미니 프로그램(코드 포함)의 인증된 로그인에 대한 해결 방법에 대한 내용입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

최근에 아직 쇼핑몰인 소규모 프로그램 프로젝트를 진행하고 있는데, 위챗 로그인 인증피트 공부를 시작했는데, 소규모 프로그램에 처음 접속해봤는데 승인된 로그인도 엉망이네요. . 차후 천천히 개선하겠습니다

시나리오

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와 동일합니다.
먼저 승인이 있는지 확인합니다. 승인이 있으면 로그인을 클릭합니다. 호출 방법은 모두 wx.login 코드와 wx.getUserInfo 데이터를 백그라운드로 가져옵니다. 사용자 정보를 얻기 위해 백엔드에 액세스하는 논리는
login일 것입니다
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!