实现微信小程序之授权登录

1. 前言

微信小程序作为移动开发的重要平台之一,已经成为各类公司、个人的必备选择之一。而小程序的“授权登录”也是小程序必备的一个重要功能。

2. 授权方式

在微信小程序中,授权方式有两种:用户信息授权和手机号授权。

2.1 用户信息授权

用户信息授权是指用户在小程序中授权访问其微信用户信息,例如头像、昵称等。在开发过程中,我们需要使用微信提供的API接口wx.getUserInfo()来获取用户信息。

2.2 手机号授权

手机号授权是指用户在小程序中授权访问其微信绑定的手机号。在开发过程中,我们需要使用微信提供的API接口wx.login()获取用户登录凭证(code),然后再使用wx.request()向后台发送请求,后台通过code获取到session_key,再利用session_key解码出手机号等信息。

3. 实现步骤

下面将结合代码实现的流程,阐述授权登录的具体步骤。

3.1 获取用户信息授权

首先,需要在小程序中配置好“授权按钮”,在点击授权按钮后,触发wx.getUserInfo()方法,获取用户信息。相关的源代码如下所示:

wx.getUserInfo({

success: function(res) {

console.log(res.userInfo)

}

})

需要注意的是:

1. 调用wx.getUserInfo()前,必须先调用wx.login()获取到用户的code,因为授权的唯一标识是与用户的Session_id关联的;

2. 在小程序中调用wx.getUserInfo()方法时,需要打开小程序的用户授权设置,否则在小程序的授权操作界面中将无法出现授权操作提示,具体样式如下所示:

3. 在wx.getUserInfo()方法中,我们可以通过success回调方法获取到用户信息,包括用户的头像、昵称、性别、地区等信息。

3.2 获取手机号授权

与获取用户信息授权相似,获取手机号授权的流程也需要在小程序中配置好“授权按钮”,点击按钮后触发wx.login()方法登录,获取到用户的code,然后通过wx.request()发送请求,获取到手机号等信息。相关的源代码如下所示:

wx.login({

success: function(res) {

if (res.code) {

console.log(res.code)

wx.request({

url: 'https://yourserver/api/getPhoneNumber',

data: {

"code": res.code

},

success: function(res) {

console.log(res.data.phoneNumber)

}

})

}

}

})

需要注意的是:

1. 在实现获取手机号授权功能时,需要后台的服务器配合完成解码noncestr、timestamp、session_key等固定参数的计算等处理过程;

2. 手机号获取成功后,建议将手机号保存到本地Storage中,方便后续调用;

3. 在wx.login()方法中,我们也可以设置过期时长(expire),默认时间为5分钟。

4. 总结

微信小程序作为目前移动开发领域的热门技术之一,授权功能也是小程序中必不可少的功能。通过本文的介绍,相信大家对于微信小程序中的用户信息授权和手机号授权已经有了基本的了解。需要指出的是,在开发小程序过程中,要做到审慎、严谨,同时要遵循微信小程序相关规范,以确保小程序的使用体验和安全性。

免责声明:本文来自互联网,本站所有信息(包括但不限于文字、视频、音频、数据及图表),不保证该信息的准确性、真实性、完整性、有效性、及时性、原创性等,版权归属于原作者,如无意侵犯媒体或个人知识产权,请来电或致函告之,本站将在第一时间处理。猿码集站发布此文目的在于促进信息交流,此文观点与本站立场无关,不承担任何责任。