小程序授權(quán)登陸解決方案

goji 發(fā)布于2019-08-23 13:48 / 2047人閱讀

摘要：前言之前寫過(guò)一個(gè)關(guān)于微信授權(quán)登陸的文章傳送門最近在做小程序的項(xiàng)目，依舊是商城，又開(kāi)始研究微信的登陸授權(quán)坑，第一次接觸小程序，授權(quán)登陸也是一塌糊涂以后再慢慢的改進(jìn)場(chǎng)景微信用戶可以通過(guò)搜索進(jìn)入小程序也可以通過(guò)別人分享進(jìn)入小程序進(jìn)入小程序之后需要

前言

之前寫過(guò)一個(gè)關(guān)于微信授權(quán)登陸的文章
傳送門
最近在做小程序的項(xiàng)目，依舊是商城，又開(kāi)始研究微信的登陸授權(quán)坑，第一次接觸小程序，授權(quán)登陸也是一塌糊涂以后再慢慢的改進(jìn)

場(chǎng)景

微信用戶可以通過(guò)搜索進(jìn)入小程序
也可以通過(guò)別人分享進(jìn)入小程序
進(jìn)入小程序之后需要用戶授權(quán)拿到用戶信息進(jìn)行注冊(cè)

代碼實(shí)現(xiàn)

初始化頁(yè)面home頁(yè)用戶第一次進(jìn)入小程序必須授權(quán)后臺(tái)注冊(cè)并登陸
app.json

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

login.js邏輯進(jìn)入頁(yè)面判斷一下是不是授權(quán)過(guò)，判斷用戶是否已經(jīng)授權(quán)，已經(jīng)授權(quán)顯示登陸，沒(méi)有授權(quán)顯示授權(quán)，用戶無(wú)論是注冊(cè)還是登陸用的是后臺(tái)提供的同一個(gè)接口。返回token存在本地
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() // 獲取頁(yè)面棧
    var prevPage = pages[pages.length - 2] // 前一個(gè)頁(yè)面
    prevPage.setData({
      isBack: true
    })
  },
  onShow: function() {
    // 如果已經(jīng)授權(quán)則顯示登錄,直接登錄不調(diào)用授權(quán)
    App.WxService.getSetting().then(res => {
      if (res.authSetting["scope.userInfo"]) {
        this.setData({
          isauth: true
        })
      }
    })
    //token 不能在page外面定義，變量寫在 page 外面有緩存
    const token = App.WxService.getStorageSync("utoken")
    // 如果有token顯示已經(jīng)授權(quán)
    this.setData({
      logged: !!token
    })
    token && setTimeout(this.goBack, 1500)
  },
  login() {
    this.wechatSignUp()
  },
  goBack() {
    // 返回登錄之前的頁(yè)面
    wx.navigateBack({
      delta: 1
    })
  },
  // 登陸注冊(cè)
  wechatSignUp(cd) {
    // 上鎖如果正在請(qǐng)求接口那么就返回
    if (this.data.locked) {
      return
    }
    this.data.locked = true
    //注冊(cè)或者登陸獲取token
    let code = ""
    App.WxService
      .login()
      .then(data => {
        code = data.code
        wx.setStorageSync("logincode", data.code)
        return App.WxService.getUserInfo()
      })
      .then(data => {
        // 請(qǐng)求后臺(tái)登錄注冊(cè)接口
        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)
        // 訪問(wèn)后臺(tái)接口獲取用戶信息
        ModelLogin.getVipInfo({ token: data.data.token }).then(res => {
          App.globalData.userInfo = res.data.userInfo
          // 返回上一頁(yè)
          this.goBack()
        })
      })
      .catch(err => {
        this.data.locked = false
        console.log(err)
      })
  }
})

這里的App.WxService等價(jià)于wx因?yàn)閣x是回調(diào)的方式，這里使用的是promise。
先判斷有沒(méi)有授權(quán)，沒(méi)有授權(quán)顯示點(diǎn)擊授權(quán)，有授權(quán)顯示點(diǎn)擊登錄，調(diào)用的方法都是wechatSignUp，拿到wx.login的code和wx.getUserInfo的數(shù)據(jù)給后臺(tái)，然后后臺(tái)返回token，然后再去訪問(wèn)后臺(tái)獲取用戶信息
login的邏輯大概就是這些
login.wxml


  
    
      
      商城
    
    
      請(qǐng)同意授權(quán)
      請(qǐng)登錄
      
        為了讓頭號(hào)買手可以更好的為您服務(wù)
      
    
    
    
  
  
    
    近期你已經(jīng)授權(quán)登陸過(guò)商城
    自動(dòng)登錄中

訪問(wèn)后臺(tái)接口的時(shí)候在header里傳token如果后臺(tái)沒(méi)有拿到token就返回401，前端統(tǒng)一攔截跳轉(zhuǎn)到登陸頁(yè)面

結(jié)束

關(guān)于app.js本來(lái)打算在app做攔截的，但是異步請(qǐng)求總是在進(jìn)入頁(yè)面后才拿到后臺(tái)返回的數(shù)據(jù)，因?yàn)橛脩艨赡軓纳唐吩斍轫?yè)等其他頁(yè)面進(jìn)入小程序，授權(quán)后要返回進(jìn)入頁(yè)面，在app.js中攔截就無(wú)法返回頁(yè)面了，所以就直接在頁(yè)面的js里去判斷，還好可以分享的頁(yè)面不多所以就沒(méi)有在app.js里寫任何東西。第一次接觸，希望以后能優(yōu)化了再發(fā)文記錄一下

GPU云服務(wù)器云服務(wù)器小程序授權(quán) 小程序解決方案電商小程序解決方案餐飲小程序解決方案

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/99598.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

goji

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

RocketMq消息中間件介紹

閱讀 1475·2021-11-24 09:39
BREW分發(fā)系統(tǒng)綜述

閱讀 1789·2021-11-22 15:25
軟件測(cè)試與質(zhì)量十個(gè)題測(cè)試

閱讀 3741·2021-11-19 09:40
共享虛擬主機(jī)是什么-服務(wù)器與虛擬主機(jī)有什么區(qū)別？

閱讀 3300·2021-09-22 15:31
搬瓦工：DC6 CN2 GIA-E vps簡(jiǎn)單測(cè)評(píng)

閱讀 1302·2021-07-29 13:49
從源碼一步步學(xué)習(xí)，Ryan Dahl的Deno實(shí)現(xiàn)原理

閱讀 1211·2019-08-26 11:59
C2:動(dòng)畫隊(duì)列

閱讀 1321·2019-08-26 11:39
一文快速解讀ES6新特性

閱讀 936·2019-08-26 11:00

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

小程序授權(quán)登陸解決方案

相關(guān)文章

**小程序授權(quán)功能（廢）**

淺析微信支付：開(kāi)發(fā)前的準(zhǔn)備

大齡業(yè)余程序員要搞個(gè)django小程序--08--深入理解小程序登陸狀態(tài)的維護(hù)

**PHP實(shí)現(xiàn)微信小程序用戶授權(quán)的工具類**

通過(guò)小程序實(shí)現(xiàn)網(wǎng)站掃碼登錄！每年都可以省 300 塊...代替微信開(kāi)放平臺(tái)和服務(wù)號(hào)的登陸模式！

發(fā)表評(píng)論

0條評(píng)論

goji

男|高級(jí)講師

TA的文章

RocketMq消息中間件介紹

BREW分發(fā)系統(tǒng)綜述

軟件測(cè)試與質(zhì)量十個(gè)題測(cè)試

共享虛擬主機(jī)是什么-服務(wù)器與虛擬主機(jī)有什么區(qū)別？

搬瓦工：DC6 CN2 GIA-E vps簡(jiǎn)單測(cè)評(píng)

從源碼一步步學(xué)習(xí)，Ryan Dahl的Deno實(shí)現(xiàn)原理

C2:動(dòng)畫隊(duì)列

一文快速解讀ES6新特性

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

小程序授權(quán)登陸解決方案

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！