在小程序开发时大家都会遇到用户授权登录的问题。对于一些开发人员微信的授权问题是一个让人头痛的一件事。通常我们进行授权登录都是通过后端服务器进行解析获取用户的openid,官方文档也是这样说明的。那还有没有别的方式呢?答案当然是有的。接下来咱们就来看看小程序用户授权的另一种方式。
在正式开发之前,咱们先看看官方文档,了解一下登录的步骤:
接下来咱们就通过实操来实现一个登录:
authen.wxml:
<view wx:if="{{canIUse}}"> <view class='header'> <image src='/images/wx_login.png'>image> view> <view class='content'> <view>申请获取以下权限view> <text>获得你的公开信息(昵称,头像等)text> view> <button class='bottom' type='primary' open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="bindGetUserInfo"> 微信授权 button>view> <view wx:else>请升级微信版本view>
authen.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;}.bottom { border-radius: 80rpx; margin: 70rpx 50rpx; font-size: 35rpx;}
authen.js:
Page({ data: { //判断小程序的API,回调,参数,组件等是否在当前版本可用。 canIUse: wx.canIUse('button.open-type.getUserInfo'), }, onLoad: function (options) { }, //授权按钮点击触发事件 bindGetUserInfo: function (e) { if (e.detail.userInfo) { //用户按了允许授权按钮,获取openid var that = this; var appId = 'appId'; var AppSecret = 'Secret密钥'; wx.login({ success (res) { if (res.code) { //发起网络请求 wx.request({ url: 'https://api.weixin.qq.com/sns/jscode2session', data: { appid: appId, secret: AppSecret, js_code: res.code, grant_type: 'authorization_code' }, header: { 'content-type': 'application/json' }, method: 'GET', success: function(resData){ if(("openid" in resData.data) && resData.data.openid != ''){ getApp().globalData.openId = resData.data.openid; wx.setStorage({ key: "openId", data: resData.data.openid }) }else{ wx.showModal({ title:'警告', content:'获取openid失败,请重试!!!', showCancel:false, confirmText:'确定', success:function(res){ if (res.confirm) { console.log('获取openid失败,请重试!!!') } } }) } } }) } else { wx.showModal({ title:'警告', content:'登录失败!'+res.errMsg, showCancel:false, confirmText:'确定', success:function(res){ if (res.confirm) { console.log('登录失败!'+res.errMsg) } } }) } } }) } else { //用户按了拒绝按钮 wx.showModal({ title:'警告', content:'您点击了拒绝授权,将无法进入小程序,请授权之后再进入!!!', showCancel:false, confirmText:'返回授权', success:function(res){ if (res.confirm) { console.log('用户点击了“返回授权”') } } }) } }, })
到此代码就结束了。
微信授权登录其实并不难,无论是后端获取还是前端获取,只要对应的操作步骤不出错,大部分人还是可以做出来的。
如果有兴趣,欢迎进行探讨,我在评论区等你!!
END
![8c1ee87643fcd0924ecfda2bd39a4f38.png](https://i-blog.csdnimg.cn/blog_migrate/bb0a1ad9ee6104b5e16b3cf68d705752.jpeg)
“在看”吗?在看就点一下吧