判断用户 小程序_微信小程序系列之用户授权

在小程序开发时大家都会遇到用户授权登录的问题。对于一些开发人员微信的授权问题是一个让人头痛的一件事。通常我们进行授权登录都是通过后端服务器进行解析获取用户的openid，官方文档也是这样说明的。那还有没有别的方式呢？答案当然是有的。接下来咱们就来看看小程序用户授权的另一种方式。

在正式开发之前，咱们先看看官方文档，了解一下登录的步骤：

接下来咱们就通过实操来实现一个登录：

1. 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

如果你觉得文章不错 可以扫码关注 我们的公众号哦~ 带你阅读更多优秀文章~ 分享-点赞-在看 可三连戳~

“在看”吗？在看就点一下吧