一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第10天，点击查看活动详情。
微信小程序-用户登录案例(二)
案例目的
(一)掌握微信用户登录流程。
(二)掌握微信小程序中数据缓存。
(三)掌握微信小程序中wx.login()API和wx.getUserInfo()API的使用。
实验内容
(1)掌握用户登录流程序需要小程序、开发者服务器和微信接口服务3个角色参与，它们的作用分别是：
小程序：用户使用的客户端，由于小程序运行在微信之上，可以通过API获取用户的身份信息。
开发者服务器：小程序的对应的后端服务器，用于为小程序用户提供服务。
微信接口服务：微信为开发者服务器提供的接口。****
(2掌握用户登录的具体流程。
a)小程序获取code：小程序通过wx.logi()获取登录凭证code，它由内部生成，每次调用wx.login()获取的code都不同，code的有效期为5分钟，且被微信接口服务验证一次后失效。
b)小程序将code发送给开发者服务器：使用wx.request()将code发送给开发者服务器。
c)开发者服务器通过微信接口服务校验登录凭证：开发者服务器将Appid(小程序唯一表示)和AppSecret(小程序的秘钥)（对于微信接口服务而言，相当于小程序账号和密码）以及code发送给微信接口服务校验登录凭证，如果校验成功，返回session_key(用户的会话秘钥)和openid(用户的唯一标识)，同一个微信用户在不同Appid小程序中的openid是不同的。
d)开发者服务器自定义登录状态：开发者服务器将sesson_key和openid保存，生成一个自定义登录状态的token(令牌)相应给小程序，通过token可以查询到服务器中存储的sesson_key和openid，小程序下次请求时只要携带token,就可以证明用户已经登录。
下面接着上个博客的内容：
步骤8：实现获取用户信息。在小程序中当用户登录后，获取用户信息的方法有两种方式，一种是 <open-data> 组件，不需要用户授权就可以显示用户的头像、昵称和性别等，适合只用来展示的情况。另一种方式是通过单击按钮，提示用户授权获取用户信息。
(1)在项目的pages/index/index.wxml文件中编写代码如下。
<!-- 用户头像 -->
<open-data type="userAvatarUrl"></open-data>
<!-- 用户昵称 -->
<open-data type="userNickName"></open-data>
<!-- 用户性别 -->
<open-data type="userGender" lang="zh_CN"></open-data>
保存代码，运行小程序，既可以在页面中显示到用户的头像、昵称等。****
(2)采用单击按钮提示授权的方式实现获取用户信息，在项目的pages/index/index.wxml文件中编写代码如下。
<!-- 单击按钮提示授权 -->
<view class="container">
<view class="userinfo">
<button wx:if="{{!hasUserInfo}}" open-type="getUserInfo"
bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
<block wx:else>
<!-- 用户头像 -->
<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}"
mode="cover"></image>
<!-- 用户昵称 -->
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
<!-- 用户所在城市 -->
<text class="userinfo-nickname">{{userInfo.city}}</text>
<!-- 用户性别 -->
<open-data type="userGender" lang="zh_CN"></open-data>
</block>
</view>
</view>
注意：hasUserInfo的值为true，表示没有获取到用户信息，显示“获取头像昵称”按钮，如果值为false，则将用户信息显示在页面中。
open-type属性用于访问微信开放能力，值为getUserInfo表示获取用户信息，设置该属性后，按下按钮时会弹出微信授权提示。(这里需要将开发者的调试基础库调低才能看到效果)
为按钮添加open-type属性后，还需要通过bindgetuserinfo属性绑定getUserInfo()函数，利用e.detail.userinfo获取用户信息。
(3)在项目的pages/index/index.js文件中添加data 数据和getUserInfo()函数。
data: {
userInfo: {},
hasUserInfo: false
},
getUserInfo: function (e) {
console.log(e.detail.userInfo)
if (e.detail.userInfo) {
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
}
}
(4)在项目的pages/index/index.wxss文件编写样式。
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}
.userinfo-avatar {
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}
.userinfo-nickname {
color: #aaa;
}
保存代码，运行小程序，单击“获取头像昵称”按钮，在授权提示中单击“允许”按钮，既可以获取用户信息。
步骤9：用户授权后，授权数据会被记录下来，下次启动小程序无需再次申请授权，若要在启动时判断是否已经授权。
(1)在项目的app.js的onLaunch()中添加如下代码。这里用到了wx.getSetting()方法用于获取用户的当前设置，可以获取到小程序已经向用户请求过的权限。res.authSetting['scope.userInfo']表示是否授权了用户信息，值为true或false。
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 执行到此处表示用户已经授权，可以直接获取到用户信息
wx.getUserInfo({
success: res => {
console.log(res)
console.log(res.userInfo)
this.globalData.userInfo = res.userInfo
// 由于 getUserInfo 是网络请求，可能会在 index.js中的onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
}
}
})
在app.js中的globalData中添加userinfo，将初始值设置为null。
globalData: {
userInfo: null,
token: null // 保存token
}
(2)在项目的pages/index/index.js文件中的onLoad()中编写代码。
onLoad: function () {
if (app.globalData.userInfo) {
this.setData({
userInfo: app.globalData.userInfo,
hasUserInfo: true
})
}else {
//给app.js定义一个方法
app.userInfoReadyCallback = res => {
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
}
}
保存代码，运行小程序，在启动时是否可以自动读取到已经授权的用户信息。
注意：如果需要清除授权，可以单击开发者工具的工具栏上的清除缓存按钮，选择清除授权。
关于userInfoReadyCallback要明确如下内容：
a)首先小程序的执行顺序是：app.onLaunch--->index.onLoad, 网络获取数据是异步的，保证数据传递。
b)userInfoReadyCallback这个方法是在index.onload中定义的。
c)如果userInfoReadyCallback方法被定义了，则说明page.onload比当前方法运行的早（page已经完成初始化），app的globalData还没有数据，通过此回调可以及时的刷新数据。
d)如果userInfoReadyCallback方法没有被定义，则说明page.onload比当前方法运行的晚（page还没有初始化），app的globalData是有值的，可以在page.onload中取globalData里面的值。
e)总体来说userInfoReadyCallback函数的作用，就是保证页面的userInfo和hasUserInfo被正确赋值，无论用户信息在页面加载完成之前还是之后返回。
步骤10： 开放数据校验与解密。前面获取用户信息是在小程序端实现的，如果服务器也想要获取用户信息，则需要在小程序端通过wx.request()将获取到的用户信息发给服务器，但服务器无法辨别数据的真伪。为此小程序提供了开放数据的校验和解密机制。
(1)在app.js文件的onLaunch()函数的wx.getUserInfo()中的获取到用户信息之后将res对象输出到控制台，如图5-4所示。其中encryptedData与rawData的区别在于前者是加密的数据（具体加密方式可参考小程序官方文档），解密后可以获取用户的nickName、gender、city、openId等信息。
(2)将需要的数据发送到服务端进行相应处理就行
尾言
至此，整个小案例就完成了，如果觉得还不错的话，欢迎点赞收藏哦。
