微信小程序開發之簡單的授權登錄


<view class="container">
  <view class='content'>
    <view>申請獲取以下權限</view>
    <text>獲得你的公開信息(昵稱,頭像等)</text>
  </view>
  <button class='bottom' wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo" type='primary'> 授權登錄</button>
</view>

點擊授權登錄按鈕

按鈕的點擊事件

第一次授權之后登錄並將code交互

其中一些官方授權的代碼並未刪除

//獲取應用實例
const app = getApp()

Page({
data: {
canIUse: wx.canIUse('button.open-type.getUserInfo')
},
 
onLoad: function () {
if (app.globalData.userInfo) {
this.setData({
userInfo: app.globalData.userInfo,
hasUserInfo: true
})
} else if (this.data.canIUse) {
// 由於 getUserInfo 是網絡請求,可能會在 Page.onLoad 之后才返回
// 所以此處加入 callback 以防止這種情況
app.userInfoReadyCallback = res => {
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
} else {
// 在沒有 open-type=getUserInfo 版本的兼容處理
wx.getUserInfo({
success: res => {
app.globalData.userInfo = res.userInfo
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
}
},
getUserInfo: function (e) {
app.globalData.userInfo = e.detail.userInfo
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
},
//按鈕的點擊事件
bindGetUserInfo: function (res) {
let info = res;
console.log(info);
if (info.detail.userInfo) {
console.log("點擊了同意授權");
var that = this
wx.login({
success: function (res) {
if (res.code) {
wx.request({
url: 'http://fa.com/api/schoolreserve/login',
data: {
code: res.code,
user_info: info.detail.userInfo
},
header: {
'content-type': 'application/json' // 默認值
},
success: function (res) {
var userinfo = {};
userinfo['id'] = res.data.id;
userinfo['nickName'] = info.detail.userInfo.nickName;
userinfo['avatarUrl'] = info.detail.userInfo.avatarUrl;
userinfo['user_data'] = res.data;
wx.setStorageSync('userinfo', userinfo)
that.setData({
userInfo: info.detail.userInfo
})
wx.switchTab({
url: '../toast/toast',
})
}
})
} else {
console.log("授權失敗");
}
},
})

} else {
//用戶按了拒絕按鈕
wx.showModal({
title: '警告',
content: '您點擊了拒絕授權,將無法進入小程序,請授權之后再進入!!!',
showCancel: false,
confirmText: '返回授權',
success: function (res) {
if (res.confirm) {
console.log('用戶點擊了“返回授權”')
}
}
})
}
}
})
 

點擊授權之后跳轉

重新編譯項目

接下來在加載事件中判斷受否授權

如果已經授權則重新請求,跳轉頁面

如果沒有授權則加載請求授權的頁面

//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']) {
console.log("已經授權")
wx.getUserInfo({
success: res => {
// 可以將 res 發送給后台解碼出 unionId
this.globalData.userInfo = res.userInfo

// 由於 getUserInfo 是網絡請求,可能會在 Page.onLoad 之后才返回
// 所以此處加入 callback 以防止這種情況
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
//調用登錄
this.AnginLogin()
wx.switchTab({
url: '/pages/toast/toast',
})
}
})
}
}
})
},
// 登錄
AnginLogin() {
wx.login({
success: res => {
// 發送 res.code 到后台換取 openId, sessionKey, unionId
if (res.code) {
wx.request({
url: 'http://fa.com/api/schoolreserve/login',
data: {
code: res.code,
user_info: this.globalData.userInfo
},
success: function (res) {
console.log('回調成功')
wx.setStorageSync('token', res.data.data.token)
wx.setStorageSync('user_id', res.data.data.user_id)
},
complete: function () {
wx.checkSession({
success() {
console.log('經過驗證,登錄有效')
// session_key 未過期,並且在本生命周期一直有效
},
fail() {
console.log('session過期,請重新登錄')
// session_key 已經失效,需要重新執行登錄流程
wx.switchTab({
url: '/pages/authorize/authorize',
})
}
})
}
})
} else {
console.log('登錄失敗!' + res.errMsg)
}

}
})
},
globalData: {
userInfo: null
}
})


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM