Django实战-初识小程序授权登录

小团子

发布于 2019-08-29 15:47:18

1.6K0

发布于 2019-08-29 15:47:18

文章被收录于专栏：数据云团数据云团数据云团

Django实战-初篇-小程序助手

Django网络应用开发的5项基础核心技术包括模型（Model）的设计，URL 的设计与配置，View（视图）的编写，Template（模板）的设计和Form(表单)的使用。

在完成Django项目创建和微信小程序项目创建后，接下来就是进行业务代码的编写。关于小程序的授权登录，需要提前到微信小程序开发文档中进行了解。登录凭证校验，通过 wx.login 接口获得临时登录凭证 code 后传到开发者服务器调用此接口完成登录流程。

1.调用 wx.login() 获取临时登录凭证code ，并回传到开发者服务器。

2.调用 auth.code2Session 接口，换取用户唯一标识 OpenID 和会话密钥 session_key。

一、小程序端授权

由微信提供授权登录API，部分接口需要经过用户授权同意才能调用。微信把这些接口按使用范围分成多个 scope ，用户选择对 scope 来进行授权，当授权给一个 scope 之后，其对应的所有接口都可以直接使用。

此类接口调用时：

1.如果用户未接受或拒绝过此权限，会弹窗询问用户，用户点击同意后方可调用接口；

2.如果用户已授权，可以直接调用接口；

3.如果用户已拒绝授权，则不会出现弹窗，而是直接进入接口 fail 回调。

① 获取用户授权设置

小程序目录介绍

本项目目录

② 使用 wx.getSetting 获取用户当前的授权状态

在小程序项目路径下的 app.js 文件中，添加获取用户信息的全局配置。

App({
  onLaunch: function () {
    // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
    
    // 获取用户信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo

              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
  globalData: {
    userInfo: null,
    serverUrl: "http://127.0.0.1:8080",
    apiVersion: '/api/v1.0',
    appId: "wx949081c93da36de2",
    auth: {
      isAuthorized: false
    }
  }
})

③ 个人中心的 WXML 页面结构

使用 button 组件绑定用户的点击授权事件。

<button class="cu-btn round bg-white shadow" wx:if="{{! hasUserInfo}}" disabled='{{isLogin}}' open-type='getUserInfo' bindgetuserinfo="onAuthorizeConfirm">
请点击授权
</button>

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2019-08-26，如有侵权请联系 cloudcommunity@tencent.com 删除

django