个人理解小程序登录和授权
2019-06-09 本文已影响0人
庆鲤
个人理解小程序登录 app.js 需要做以下几个步骤：
image.png
代码实现步骤
1.login()方法获取登录凭证code
2.调用getUserInfo 接口获取用户rawData、signature、encryptedData、iv 请求接口传递参数给后台返回自定义用户标识 官方详情说明文档地址：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/signature.html **
3.自定义用户标识 存入本地缓存
附上我自己代码
wx.getUserInfo需要用户授权，没授权直接进入失败函数fail
globalData: {
userInfo: null,
customUser: '',//签名加密标识
},
onLaunch: function () {
var then = this
//判断用户是否授权
wx.getSetting({
success(res) {
if (res.authSetting['scope.userInfo']) {
//登录是否过期
wx.checkSession({
//没过期get 本地缓存customUser 赋值then.globalData.customUser
success: function (res) {
var customUser = wx.getStorageSync('customUser')
then.globalData.customUser = customUser
},
//登录过期调用login() 获取签名加密session_ID 存入本地缓存customUser
fail: function (res) {
then.login();
},
})
}
}
})
},
login: function (e) {
var then = this
//获取用户code
wx.login({
success: function (res) {
var code = res.code
//得到 encryptData, iv 传给后台签名加密 rawData、signature
wx.getUserInfo({
success: function (res) {
console.log(res)
wx.request({
url: “后台服务器接口地址”,
data: {
code: code,
rawData：res.rawData
signature：res.signature
encryptedData: res.encryptedData,
iv: res.iv,
},
method: 'GET',
success: function (res) {
//存入本地缓存
wx.setStorageSync('customUser', res.data.info.token)
},
})
},
})
},
})
},
tabbar步骤进行：
image.png
tabbar页面周期用onShow(),授权页面授权返回页面状态才会更新
data:{
is_auth:false,
}
onShow:function(){
wx.getSetting({
success(res) {
if (res.authSetting['scope.userInfo']) {
//授权判断赋值
then.setData({
is_auth: true
})
}
}
})
}
授权页 login
image.png
js
const app = getApp();
Page({
data: {
canIUse: wx.canIUse('button.open-type.getUserInfo'),
},
onLoad: function (options) {
},
getuserinfo: function (e) {
var then = this
if (e.detail.userInfo){
wx.login({
success: function (res) {
var code = res.code
//signature、rawData
wx.request({
url: '服务器地址',
data: {
code: code,
encryptedData: e.detail.encryptedData,
iv: e.detail.iv,
rawData：e.detail.rawData
signature：e.detail.signature
},
method: 'POST',
success: function (res) {
wx.setStorageSync('customUser', res.data.info.token)
wx.navigateBack({
delta: 1,
})
},
})
},
})
}else{
wx.showToast({
title: '你拒绝授权将无法正常使用功能',
icon: 'none',
duration: 2000
})
}
}
})
wxml
<!--pages/login/login.wxml-->
<view wx:if="{{canIUse}}">
<view class='header'>
<open-data class="head_img" type="userAvatarUrl"></open-data>
</view>
<view class='content'>
<view>申请获取以下权限</view>
<text>获得你的公开信息(昵称，头像等)</text>
</view>
<button class='bottom' type='primary' open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="getuserinfo">
授权登录
</button>
</view>
<view wx:else>
请升级微信版本
</view>
