1.6 用户登录demo与openid

2020-9-24 糖果小宝小程序学习

在小程序端，我们无需维护复杂的鉴权机制，即可获取天然可信任的用户登录态openid，openid贯穿于小程序端、云存储、云函数、数据库等之中，这也就让小程序云开发在处理用户登录以及用户操作云开发资源相比传统方式要方便很多。

1.6.1 用户信息与登录

1、获取用户信息

在云开发QuickStart小程序有一个获取用户信息（如头像）的功能，点击该按钮会首先弹出授权弹窗，是否允许小程序获取你的公开信息（昵称、头像、地区及性别），确认允许之后，你的头像就显示在小程序上了。

这个功能实现的源代码大致来自两个部分，一个是index.wxml里的button组件，以及与button组件绑定的事件处理函数onGetUserInfo和调用了wx.getUserInfo这个API。



	//下面的代码在index.wxml里可以找到 <button 
	open-type="getUserInfo" bindgetuserinfo="onGetUserInfo" class="userinfo-avatar" style="background-image: url({{avatarUrl}})" size="default" ></button>

//下面的事件处理函数在index.js里可以找到
onLoad: function() {
	// 获取用户信息
	wx.getSetting({
		success: res => {
			if (res.authSetting['scope.userInfo']) {
				// 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
				wx.getUserInfo({
					success: res => {
						this.setData({
							avatarUrl: res.userInfo.avatarUrl,
							userInfo: res.userInfo
						})
					}
				})
			}
		}
	})
},

onGetUserInfo: function(e) {
	if (!this.data.logged && e.detail.userInfo) {
		this.setData({
			logged: true,
			avatarUrl: e.detail.userInfo.avatarUrl,
			userInfo: e.detail.userInfo
		})
	}
},

使用onGetUserInfo来获取用户信息的作用和 wx.getUserInfo API基本效果是一样的，区别在于wx.getUserInfo 这种方式最好是在用户允许获取公开信息（也就是res.authSetting[‘scope.userInfo’]的值为true）之后再调用，如果用户拒绝了授权就不会再有弹窗（除非用户删掉了你的小程序再使用），调用就会失败，而使用组件的方式是用户主动点击，用户即使拒绝了，再点击仍会弹出授权弹窗。所以推荐先使用组件来获取用户授权，然后再来使用wx.getUserInfo来获取用户信息。

2、openid、用户信息与登录

就代码而言，上面的案例你可以不必懂，只需要明白获取用户信息与登录是有很大的区别的。也就是说尽管我们已经获取到了用户的头像、昵称等信息，但是这不能称之为真正意义的登录，因为用户的昵称、头像、性别、地区这些信息都不是用户唯一的凭证，而且用户可以随意修改。

上面的案例也仅仅只是获取了用户信息的授权，以及获取了用户信息并显示在小程序上，并没有将用户的信息存储到数据库、也没有将用户的头像存储到云存储，因此当我们点击开发者工具“清除缓存”的按钮，将所有信息清除之后，小程序就无法识别这个用户了。

只有获取到了用户身份的唯一ID也就是openid，我们才能把用户行为比如点赞、评论、发布文章、收藏等与用户挂钩，用户这些行为都与数据库有关，而能够确定点赞、评论、文章、收藏这些数据与用户关系的就是openid，也就是说只要获取到了openid就意味着用户已经登录，而获取用户信息（如头像、昵称）不过是一个附加服务，这两个是可以完全独立的。没有openid，我们也无法把用户信息给存储到数据库，也就没法让用户自定义用户信息。无论是用户行为，还是用户的信息，openid都是一个重要的桥梁。

值得一提的是，获取用户信息和显示用户信息也是两个不同的概念，小程序的open-data就可以用于展示微信用户的信息，比如我们可以直接在miniprogram目录index文件夹下的index.wxml文件里添加如下代码：



	<open-data type="userAvatarUrl"></open-data> <open-data type="userNickName"></open-data> <open-data type="userGender" lang="zh_CN"></open-data> <open-data type="userCity" lang="zh_CN"></open-data> <open-data type="userProvince" lang="zh_CN"></open-data> <open-data type="userCountry" lang="zh_CN"></open-data>

在无需用户授权的情况下，open-data组件可以直接将用户的信息显示在小程序上，但是小程序的开发者却并不能获取到用户的信息，open-data只能用于显示用户信息。显示用户信息、获取用户信息以及获取用户的openid这三者是不同的概念，所以不要弄混哦。

1.6.2 登录并存储用户信息

1、通过button获取用户信息

使用开发者工具新建一个login页面，然后在login.wxml里输入以下代码，我们通过组件的方式来获取用户的信息：



	<button open-type="getUserInfo" bindgetuserinfo="getUserInfomation" lang="zh_CN">点击获取用户信息</button> <image src="{{avatarUrl}}"></image> <view>{{city}}</view> <view>{{nickName}}</view>

在login.js的data里初始化avatarUrl、nickName以及city，没有获取到用户信息时，用一张默认图片代替，昵称显示用户未登录，city显示为未知：



	data: { avatarUrl: '/images/user-unlogin.png', nickName:"用户未登陆", city:"未知",
},

然后在login.js文件里输入以下代码，在事件处理函数getUserInfomation我们可以打印event对象，open-type=”getUserInfo”的组件的event对象的detail里就有userInfo：

function (event)

将获取的avatarUrl，city，nickName通过this.setData()赋值给data。编译之后点击点击获取用户信息按钮，首先会弹出授权弹窗，当用户确认之后，就会显示用户的信息。

2、获取用户高清头像

我们发现获取到的头像不是很清晰，这是因为默认的头像大小为132*132（UserInfo用户头像说明），如果把avatarUrl链接后面的132修改为0就能获取到640*640大小的头像了：

function (event)

3、页面加载时就显示用户信息

在获得了用户授权和用户信息的情况下，刷新页面或进行页面跳转，用户的个人信息还是不会显示，这是因为getUserInfomation事件处理函数点击组件时才触发，我们需要在页面加载时也能触发获取用户信息才行。

我们可以在login.js的onLoad生命周期函数里输入以下代码，当用户授权之后来调用wx.getUserInfo() API：

res =>

« 1.7 开始一个云开发项目 | 1.5 云开发能力体验»

发表评论：

我的知识记录分享