登录与授权_微信登录和授权弹窗是一个东西吗?-CSDN博客

本文链接：https://blog.csdn.net/the_love_story/article/details/128554403

本文详细介绍了微信小程序中获取用户信息、登录流程和授权机制。包括wx.getUserProfile的弃用，open-data组件的功能回收，以及wx.login获取临时凭证code的过程。同时，讨论了如何使用wx.openSetting和wx.getSetting来处理用户授权，以及手机号授权的步骤。强调了授权和登录的区别，并提醒开发者注意用户隐私保护和数据安全。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.获取用户信息

1.button.open-type.getUserInfo

2.open-data组件

3.wx.getUserProfile(Object object)

登录与授权是两个不关联的事情，登录是为了使用微信的用户体系，即每个微信用户都有一个唯一的openid。授权，比如之前的获取用户头像昵称需要授权，获取地理位置、手机号码需要授权。

1.获取用户信息

包括用户邮箱、昵称、所在地区，目前只支持头像昵称填写功能

1.button.open-type.getUserInfo

时效：2021.4.28后，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息

版本：支持2.20.0版本以下的基础库

作用：可用作用户授权，弹出弹框，用户同意之后可获取授权

// .wxml
<button wx:if="{{canIUse}}" open-type="getUserInfo" 
bindgetuserinfo="getUserInfo">授权登录</button>

// .js
// 获取应用实例
const app = getApp()

Page({
  data: {
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    userInfo: {}
  },
  onLoad() {},
  getUserInfo(e) {
    // 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，
getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息
    console.log(e.detail)
    if (e.detail.userInfo) {
      this.setData({
        userInfo: e.detail.userInfo,
        canIUse: false
      })
    } else {
      console.log(e.detail.errMsg)
    }
  },
})

成功返回数据：

wx.getUserInfo(Object object)

必须是在用户已经授权的情况下调用

wx.getUserInfo({
  success: function(res) {
    var userInfo = res.userInfo
  }
})

2.open-data组件

时效：2022.2.21 功能被回收，官方通知如下

作用：展示用户头像、昵称、省份等开放信息

<open-data type="userAvatarUrl"></open-data>

<open-data type="userNickName"></open-data>

3.wx.getUserProfile(Object object)

时效：2022.10.25 功能被回收

作用：需要点击事件触发；用允许授权后才能返回用户信息

//index.wxml 
<button bindtap="getUserProfile"> 点击获取头像昵称 </button>

 <image bindtap="bindViewTap" class="userinfo-avatar" 
src="{{userInfo.avatarUrl}}" mode="cover"></image>
 <text class="userinfo-nickname">{{userInfo.nickName}}</text>

//index.js
// 获取应用实例
const app = getApp()

Page({
  data: {
    userInfo: {},
    hasUserInfo: false,
    canIUseGetUserProfile: false
  },
  onLoad() {
  },
  getUserProfile(e) {
    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户
个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
    wx.getUserProfile({
      desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中
      success: (res) => {
        console.log(res)
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })
  },

})

点击按钮弹出授权弹框，点击允许后获取下列信息

头像昵称填写功能

头像选择：利用button组件，设置open-type为chooseAvatar，绑定事件chooseavatar，事件触发回调出头像路径信息

//.wxml 
<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
    <image class="avatar" src="{{avatarUrl}}"></image>
</button> 


//.js
 onChooseAvatar(e) {
    const { avatarUrl } = e.detail 
    this.setData({
      avatarUrl,
    })
  }

昵称填写：input组件，type设置为nickname。点击选择微信名称时，input输入框会触发blur事件，根据回调函数获取微信名称

  <mp-form>
    <mp-cells>
      <mp-cell title="昵称">
        <input type="nickname" class="weui-input" placeholder="请输入昵称"
 bindblur="changeUserName"/>
      </mp-cell>
    </mp-cells>
  </mp-form>

2.登录

登录的流程图

官方的

https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html

调用 wx.login() 获取 临时登录凭证code ，并回传到开发者服务器。
调用 auth.code2Session 接口，换取 用户唯一标识 OpenID 、用户在微信开放平台帐号下的唯一标识UnionID（若当前小程序已绑定到微信开放平台帐号）和 会话密钥 session_key。

注意：临时登录凭证 code 只能使用一次

代码逻辑

sessin_key

注意： session_key 是对用户数据进行加密签名的密钥。为了应用自身的数据安全，开发者服务器不应该把会话密钥下发到小程序，也不应该对外提供这个密钥。

作用：进行签名校验，确保数据的完整性

wx.getUserInfo（object），没被回收以前可以获取加密的用户信息

 wx.getUserInfo({
      withCredentials: true,
      success(res) {
        console.log('getUserInfo: ', res)
      }
    })

rawData：不包括敏感信息的原始数据字符串

signature：使用 sha1( rawData + sessionkey ) 得到字符串，用于校验用户信息

其中 signature = sha1( rawData + session_key )，前端把 signature、rawData传给后端，后端通过相同的方法计算出 signature2，比对 signature 与 signature2 即可校验数据的完整性。

3.授权

微信的部分接口需要经过用户授权后才能调用，比如用户的地理位置、手机号

wx.openSetting

调起客户端小程序设置界面，返回用户设置的操作结果，需要点击事件触发

调整后“打开小程序设置页”将支持以下两种实现方式：

方法1：使用 button 组件来使用此功能，示例代码如下：

<button open-type="openSetting" bindopensetting="callback">打开设置页</button>

方法2:由点击行为触发wx.openSetting接口的调用，示例代码如下：

<button bindtap="openSetting">打开设置页</button>  openSetting() {  wx.openSetting()}

wx.getSetting

获取授权信息：地理位置、用户信息、电话、地址等

授权范围：AuthSetting | 微信开放文档

授权逻辑，以授权地理位置为例：

进入地图页面，首先调用wx.getSetting()判断用户是否授权，如果未授权，可弹出弹框，引导用户打开设置，wx.openSetting(),开启地理位置权限。如果已授权，可直接调用wx.getLocation()获取用户地理位置信息。

  // 判断是否已授权
  getUserSetting() {
    let that = this
    wx.getSetting({
      success(res) {
        console.log('auth: ', res, res['authSetting'])
        // 判断是否授权个地理位置
        if (res['authSetting'] && res['authSetting']['scope.userLocation'] === true) {
          that.getLocation()
        } else {
          // 未授权
          that.openConfirm()
        }
      }
    })
  },

  // 打开授权弹框
  openConfirm() {
    wx.showModal({
      content: '检测到您没打开定位权限，是否去设置？',
      confirmText: "确认",
      cancelText: "取消",
      success: function (res) {
        //点击“确认”时打开设置页面
        if (res.confirm) {
          wx.openSetting({
            success: (res) => {
              that.getLocation()
            }
          })
        } else {
          console.log('用户点击取消')
        }
      }
    });
  },

  // 获取地理位置信息
  getLocation() {
    var that = this;
    wx.getLocation({
      type: 'wgs84',
      success: function (res) {
        console.log("当前位置： ", res.latitude, res.longitude);

      },
      fail: function (error) {
        if (error.errMsg.indexOf('频繁调用会增加电量损耗' != -1)) {
          vantToast("频繁调用会增加电量损耗, 请稍后再试")
        } else if (error.errMsg === 'getLocation:fail auth deny') { //拒绝授权
          this.setData({ //打开弹框
            authorization: true
          })
        } else if (error.errMsg === 'getLocation:fail:ERROR_NOCELL&WIFI_LOCATIONSWITCHOFF') { //未开启定位
          vantToast("请打开手机定位功能！")
        }
      }
    })
  },

wx.authorize

提前发起授权请求，调用后会立刻弹窗询问用户是否同意授权小程序使用某项功能或获取用户的某些数据，但不会实际调用对应接口。

1.用户第一次进入，调用该方法会弹框询问

2.如果用户之前已同意授权则，不会弹框，会直接到success回调，此时可调用wx.getLocation()获取用户地理位置信息

3.如果用户之前拒绝授权，不会弹框，则会直接走fail回调，此时应引导用户打开微信设置-打开地理位置权限，即可以手写弹框引导用户打开。

手机号授权

具体逻辑：用户触发open-type为getPhoneNumber的button，在回调函数里会获取code，利用code从后端换取手机号。（getPhoneNumber返回的code和wx.login() 返回的code不一样）

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>