微信登入與授權

1、小程序登入

1、登錄流程

1、小程序端執行wx.login()在回調函數中就能拿到code，然后再把這個code給后端

2、后端拿着code請求code2Session接口拿到openid與session_key

3、我們將這兩個值存起來二次封裝給小程序，下次小程序再次請求我們后端的時候帶着我們封裝的key就能找到值了

openid與unionid

openid：是單個微信應用下唯一用戶的標識，即：同一用戶在不同應用上openid不同，不同用戶在同一應用上openid也不同，只有同一用戶在同一應用上的openid唯一

unionid：一個用戶在多個小程序下唯一的標識，即：同一個用戶在多個小程序上unionid相同

2、小程序的登入實現

1、小程序端在onLaunch初始化時執行wx.login()獲取code，發送給后台

//app.js
App({
  onLaunch: function () {
    let that = this
    // 登錄
    wx.login({
      success: res => {
        // 發送 res.code 到后台換取 openId, sessionKey, unionId
      console.log(res.code)  // 通過wx.login()獲取code
      // 發送code給后端
      wx.request({
        url: that.globalData.baseurl+'login/',
        data:{'code': res.code},
        method:"POST",
        // 回調得到后端封裝的openId, sessionKey, unionId => token 存入存儲庫中
        success(e){
          wx.setStorageSync('token', e.data.data.token)
        }
      })
      }
    })

2、后端接收code調用auth.code2Session接口得到openid和session_key，二次封裝成token后返回給前台

from rest_framework.views import APIView
from rest_framework.response import Response
from app01.wx import wx_login
from django.core.cache import cache
import hashlib
import time
from app01.models import Wxuser


class Login(APIView):
    def post(self, request):
        param = request.data
        if not param.get('code'):
            return Response({'status': 1, 'msg': '未攜帶code'})
        code = param.get('code')  # 獲取前端傳來的code
        user_data = wx_login.get_login_info(code)  # 調用接口獲取openid和session_key
        if user_data:
            val = user_data['session_key'] + '&' + user_data['openid']
            # 將session_key加密后再傳給前端
            md5 = hashlib.md5()
            md5.update(str(time.clock()).encode("utf-8"))
            md5.update(user_data['session_key'].encode('utf-8'))
            key = md5.hexdigest()
            # 存入將數據緩存中
            cache.set(key, val)
            # 從數據庫中查找數據
            has_user = Wxuser.objects.filter(openid=user_data['openid']).first()
            if not has_user:
                # 如果沒有該用戶，將用戶存入數據庫中
                Wxuser.objects.create(openid=user_data['openid'])
            # 返回給前端加密后的key，下次請求拿着key來請求就能找到對應的session_key和openid
            return Response({'status': 0, 'msg': 'ok', 'data': {'token':key}})
        return Response({'status': 2, 'msg': '無效的code'})

wx_login.py

from app01.wx import settings
import requests

def get_login_info(code):
    code_url = settings.code2Session.format(settings.AppId, settings.AppSecret, code)
    response = requests.get(code_url)  # 調用requests模塊向url發送get請求
    json_response = response.json()  # 將得到的Response對象反序列化得到openid與session_key
    print('json_response', json_response)  # {'session_key': 'kpPSJRcg==', 'openid': 'oI8QLWuI'}
    if json_response.get('session_key') and json_response.get('openid'):
        return json_response
    return False

2、小程序的授權

1、因為小程序部分功能需要用戶同意授權后才能使用，我們可以用wx.getSetting中res.authSetting來判斷用戶有沒有對接口授權，判斷具體哪一個接口需要給scope傳值res.authSetting['scope.xxx'])

2、如果沒有授權，我們調用wx.authorize({scope: })給scope傳值授權

  lu:function(){
    wx.getSetting({
      success(res) {
        if (!res.authSetting['scope.record']) {  // 判斷用戶是否授權record錄音功能
        wx.authorize({  // 給用戶授權彈框
          scope: 'scope.record',  // 設置record授權錄音功能
          success(){  // 如果成功授權
            wx.startRecord()
          },fail(){  // 如果用戶拒絕
            console.log('沒有授權')
          }
        })
      }else{  // 如果用戶已經授權可以直接使用
          wx.startRecord()
      }
      }
    })
  },

3、如果是scope.userInfo是不能直接使用wx.authorize({scope: userInfo})的，必須用戶手動點擊按鈕彈起授權框

<button open-type="getUserInfo" bindgetuserinfo="user1">用戶信息授權</button>

我們可以在響應函數的e.datail中獲取用戶信息，這個和直接調用的wx.getUserInfo獲取的內容一樣

  user1:function(e){
    console.log("e",e.detail)  // 在e.detail中獲取用戶信息
    wx.getSetting({
      success(res){
        if (res.authSetting['scope.userInfo']){
          wx.getUserInfo({
            success:(res)=>{
              console.log('res', res)  // 此處獲取的用戶信息與e.detail中一樣
            }
          })
        }
      }
    })
  },

除了userInfo需要我們必須手動點按鈕彈出彈框，其他的都可以直接寫在生命周期中，直接彈出彈框

scope 列表

scope	對應接口	描述
scope.userInfo	wx.getUserInfo	用戶信息
scope.userLocation	wx.getLocation, wx.chooseLocation	地理位置
scope.userLocationBackground	wx.startLocationUpdateBackground	后台定位
scope.address	wx.chooseAddress	通訊地址
scope.invoiceTitle	wx.chooseInvoiceTitle	發票抬頭
scope.invoice	wx.chooseInvoice	獲取發票
scope.werun	wx.getWeRunData	微信運動步數
scope.record	wx.startRecord	錄音功能
scope.writePhotosAlbum	wx.saveImageToPhotosAlbum, wx.saveVideoToPhotosAlbum	保存到相冊
scope.camera	camera 組件	攝像頭