回复 刷新

暂无评论

详解:小程序如何授权登录并获取用户绑定手机号?

下面给大家分享微信小程序获取手机号授权用户登录功能,有了这个组件可以快速获取微信绑定手机号码,无须用户填写。

微信小程序中有许多地方需要用户注册信息的地方,需要填写手机号等。下面给大家分享微信小程序获取手机号授权用户登录功能,有了这个组件可以快速获取微信绑定手机号码,无须用户填写。

1、如何实现页面进入小程序授权登录?

实现方法:写一个类似微信授权登录的页面,让用户通过按钮触发getPhoneNumber,实现登录授权。再用户进入小程序的时候加个判断,如果未授权,跳到这个登录页面,如果授权,跳到首页。

在这里插入图片描述

微信小程序文档中给出如下示例

获取微信用户绑定的手机号,需先调用login接口。

因为需要用户主动触发才能发起获取手机号接口,所以该功能不由API来调用,需用button组件的点击来触发。

**注意:**目前该接口针对非个人开发者,且完成了认证的小程序开放。需谨慎使用,若用户举报较多或被发现在不必要场景下使用,微信有权永久回收该小程序的该接口权限。

使用方法

需要将button组件的open-type值设置为getPhoneNumber,当用户点击并同意之后,可以通过bindgetphonenumber事件回调获取到微信服务器返回的加密数据, 然后在第三方服务端结合session_key以及app_id进行解密获取手机号。

注意

在回调中调用wx.login登录,可能会刷新登录态。此时服务器使用code换取的sessionKey不是加密时使用的sessionKey,导致解密失败。建议开发者提前进行login;或者在回调中先使用checkSession进行登录态检查,避免login刷新登录态。

2、全局判断

在这里插入图片描述

3、login登录页判断

(一)index.wxml

<view wx:if="{{isHide}}"> <view wx:if="{{canIUse}}"> <view class='header'> <image src='../../../we7/resource/images/login.png'></image> </view> <view class='content'> <text>请依次允许获得你的公开信息及手机号码</text> </view> <view class="" > <button class="{{flag?'show':'hide'}}" type="primary" open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="bindGetUserInfo">{{AuthorizedLogin}}</button> <button class="{{flag?'hide':'show'}}" type="primary" lang="zh_CN" open-type='getPhoneNumber' bindgetphonenumber="getPhoneNumber">{{UserPhone}}</button> </view> </view> <view wx:else>请升级微信版本</view></view>

(二)index.wxss

.header { margin: 90rpx 0 90rpx 50rpx; border-bottom: 1px solid #ccc; text-align: center; width: 650rpx; height: 300rpx; line-height: 450rpx;}.header image { width: 200rpx; height: 200rpx;}.content { margin-left: 50rpx; margin-bottom: 90rpx;}.content text { display: block; color: #9d9d9d; margin-top: 40rpx;} /* .operBtn{ border-radius: 80rpx; margin: 70rpx 50rpx; font-size: 35rpx; } .operBtns{ background: #eef0ed !important; border-radius: 80rpx; margin: 70rpx 50rpx; font-size: 35rpx; color: #000300 !important; } */.hide{ border-radius: 80rpx; margin: 70rpx 50rpx; font-size: 35rpx; display: none;}.show{ display: block; /* background: #eef0ed !important; */ border-radius: 80rpx; margin: 70rpx 50rpx; font-size: 35rpx; /* color: #000300 !important; */}

(三)index.js

在这里插入图片描述

4、某个详情页手机号授权判断

使用的遮罩层写法

(一)index.html
在这里插入图片描述

(二)index.wxss

/* 手机号授权 */.float { height: 100%; width: 100%; position: fixed; background-color: rgba(0, 0, 0, 0.5); z-index: 2; top: 0; left: 0;}.floatContent { /* padding: 20rpx 0; */ width: 80%; background: #fff; margin: 40% auto; border-radius: 20rpx; display: flex; flex-direction: column; justify-content: space-around; align-items: center; position: relative; height: 255rpx;}.floatContent text { color: #000; font-size: 40rpx; display: block; margin: 0 auto; position: absolute; top: 50rpx; /* text-align: center; */ /* line-height: 60rpx; */ border-radius: 30rpx; }.floatText{ width: 100%; height: 100rpx; display: flex; justify-content: flex-start; position: absolute; bottom: 0;}.btn-cancle{ line-height: 100rpx; flex: 1; margin: 0; padding: 0; border-radius: none;}

(三)index.js

在这里插入图片描述

5、返回参数说明

参数 类型 说明 最低版本
encryptedData String 包括敏感数据在内的完整用户信息的加密数据 ,详细见加密数据解密算法
iv String 加密算法的初始向量,详细见加密数据解密算法
cloudID String 敏感数据对应的云 ID,开通云开发的小程序才会返回,可通过云调用直接获取开放数据,详细见云调用直接获取开放数据 2.8.0

敏感数据有两种获取方式,一是使用 加密数据解密算法 将 encryptedData 在开发者后台解密,二是使用云调用直接通过 cloudID 获取开放数据。

获取得到的开放数据为以下 json 结构:

在这里插入图片描述

但是到这里你会发现其实根本不详尽尤其是解密和错误代码方面。首先如手册所述,解析加密数据包不太明白我给大家贴个示例

在这里插入图片描述

后台解析代码就是利用传过去的三个值,来进行解析。每个语言解析方式不同,请下载样例。微信官方提供了多种编程语言的示例代码,每种语言类型的接口名字均一致。调用方式可以参照示例。

注意解析方式跟解析用户信息是一个解析方式!!!!

在这里小编遇到了一个问题解析回的形式虽然跟文档相同但是!

却是这个样子的数据:

在这里插入图片描述

这样的情况其实是因为开发的基础库版库过低造成的

配置地点在这里:

在这里插入图片描述

小编修改为v1.9.1之后呈现形式就如同官网手册 一样了

在这里插入图片描述

至此获取微信绑定的用户手机号完成!

  • 64
  • 0
  • 0