热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

微信小程序开发之简单的授权登录

申请获取以下权限获得你的公开信息(昵称,头像


  

    申请获取以下权限

    获得你的公开信息(昵称,头像等)

  

  


技术分享图片

点击授权登录按钮

技术分享图片

按钮的点击事件

第一次授权之后登录并将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

}

})



推荐阅读
  • egg实现登录鉴权(七):权限管理
    权限管理包含三部分:访问页面的权限,操作功能的权限和获取数据权限。页面权限:登录用户所属角色的可访问页面的权限功能权限:登录用户所属角色的可访问页面的操作权限数据权限:登录用户所属 ... [详细]
  • 本文介绍了用户界面(User Interface, UI)的基本概念,以及在iOS应用程序中UIView及其子类的重要性和使用方式。文章详细探讨了UIView如何作为用户交互的核心组件,以及它与其他UI控件和业务逻辑的关系。 ... [详细]
  • 解决UIScrollView自动偏移问题的方法
    本文介绍了一种有效的方法来解决在使用UIScrollView时出现的自动向下偏移的问题,通过调整特定的属性设置,可以确保滚动视图正常显示。 ... [详细]
  • Windows环境下Oracle数据库迁移实践
    本文详细记录了一次在Windows操作系统下将Oracle数据库的控制文件、数据文件及在线日志文件迁移至外部存储的过程,旨在为后续的集群环境部署做好准备。 ... [详细]
  • Android 开发技巧:使用 AsyncTask 实现后台任务与 UI 交互
    本文详细介绍了如何在 Android 应用中利用 AsyncTask 来执行后台任务,并及时将任务进展反馈给用户界面,提高用户体验。 ... [详细]
  • 本文探讨了如何利用 Android 的 Movie 类来展示 GIF 动画,并详细介绍了调整 GIF 尺寸以适应不同布局的方法。同时,提供了相关的代码示例和注意事项。 ... [详细]
  • JavaScript 中引号的多层嵌套使用技巧
    本文详细介绍了在 JavaScript 编程中如何处理引号的多级嵌套问题,包括双引号、单引号以及转义字符的正确使用方法。 ... [详细]
  • 如何高效渲染JSON数据
    本文介绍了在控制器中返回JSON结果的方法,并详细说明了如何利用jQuery处理和展示这些数据,为Web开发提供了实用的技巧。 ... [详细]
  • Awk是一款功能强大的文本分析与处理工具,尤其在数据解析和报告生成方面表现突出。它通过读取由换行符分隔的记录,并按照指定的字段分隔符来划分和处理这些记录,从而实现复杂的数据操作。 ... [详细]
  • 深入解析Unity3D游戏开发中的音频播放技术
    在游戏开发中,音频播放是提升玩家沉浸感的关键因素之一。本文将探讨如何在Unity3D中高效地管理和播放不同类型的游戏音频,包括背景音乐和效果音效,并介绍实现这些功能的具体步骤。 ... [详细]
  • 本文探讨了一种常见的C++面试题目——实现自己的String类。通过此过程,不仅能够检验开发者对C++基础知识的掌握程度,还能加深对其高级特性的理解。文章详细介绍了如何实现基本的功能,如构造函数、析构函数、拷贝构造函数及赋值运算符重载等。 ... [详细]
  • 随着Linux操作系统的广泛使用,确保用户账户及系统安全变得尤为重要。用户密码的复杂性直接关系到系统的整体安全性。本文将详细介绍如何在CentOS服务器上自定义密码规则,以增强系统的安全性。 ... [详细]
  • 在Android中实现黑客帝国风格的数字雨效果
    本文将详细介绍如何在Android平台上利用自定义View实现类似《黑客帝国》中的数字雨效果。通过实例代码,我们将探讨如何设置文字颜色、大小,以及如何控制数字下落的速度和间隔。 ... [详细]
  • 3DSMAX制作超现实的体育馆模型
    这篇教程是向脚本之家的朋友介绍3DSMAX制作超现实的体育馆模型方法,教程制作出来的体育馆模型非常地不错,不过教程有点难度,需要有一定基础的朋友学习,推荐到脚本之家,喜欢的朋友可 ... [详细]
  • 本文介绍了如何在AngularJS应用中使用ng-repeat指令创建可单独点击选中的列表项,并详细描述了实现这一功能的具体步骤和代码示例。 ... [详细]
author-avatar
mobiledu2502892377
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有