小程序授權登陸解決方案

goji 發布于2019-08-23 13:48 / 2035人閱讀

摘要：前言之前寫過一個關于微信授權登陸的文章傳送門最近在做小程序的項目，依舊是商城，又開始研究微信的登陸授權坑，第一次接觸小程序，授權登陸也是一塌糊涂以后再慢慢的改進場景微信用戶可以通過搜索進入小程序也可以通過別人分享進入小程序進入小程序之后需要

前言

之前寫過一個關于微信授權登陸的文章
傳送門
最近在做小程序的項目，依舊是商城，又開始研究微信的登陸授權坑，第一次接觸小程序，授權登陸也是一塌糊涂以后再慢慢的改進

場景

微信用戶可以通過搜索進入小程序
也可以通過別人分享進入小程序
進入小程序之后需要用戶授權拿到用戶信息進行注冊

代碼實現

初始化頁面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里寫任何東西。第一次接觸，希望以后能優化了再發文記錄一下

GPU云服務器云服務器小程序授權小程序解決方案電商小程序解決方案餐飲小程序解決方案

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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