微信小程序：最新微信登录授权并获取openid等信息

青旅半醒 2022-05-11 19:26 282阅读 0赞

# 简介 #

为优化用户体验，使用 wx.getUserInfo 接口直接弹出授权框的开发方式将逐步不再支持。从2018年4月30日开始，小程序与小游戏的体验版、开发版调用 wx.getUserInfo 接口，将无法弹出授权询问框，默认调用失败。

*  小程序使用 button 组件，并将 open-type 指定为 getUserInfo 类型，获取用户基本信息。
 *  调用接口获取登录凭证（code）进而换取用户登录态信息，包括用户的唯一标识（openid） 及本次登录的 会话密钥（session\_key）。

#### 看效果 ####

![微信授权.gif][.gif]

![获取openId.jpg][openId.jpg]

#### 第一步：调用微信wx.login获取登录凭证code ####

##### wx.login(Object object) #####

调用接口获取登录凭证（code）。通过凭证进而换取用户登录态信息，包括用户的唯一标识（openid）及本次登录的会话密钥（session\_key）等。用户数据的加解密通讯需要依赖会话密钥完成。

请求参数
    Object object
    属性	类型	默认值	是否必填	说明	支持版本
    timeout	number		否	超时时间，单位ms	>= 1.9.90
    success	function		否	接口调用成功的回调函数	
    fail	function		否	接口调用失败的回调函数	
    complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）	
    
    返回结果
    Object res
    
    属性	类型	说明	支持版本
    code	string	用户登录凭证（有效期五分钟）。开发者需要在开发者服务器后台调用 code2Session，使用 code 换取 openid 和 session_key 等信息

##### 代码示例 #####

wx.login({
      success (res) {
        if (res.code) {
          //发起网络请求
          wx.request({
            url: 'https://test.com/onLogin',
            data: {
              code: res.code
            }
          })
        } else {
          console.log('登录失败！' + res.errMsg)
        }
      }
    })

#### 第二步：通过code 获取 openid 和 session\_key ####

开发者服务器使用登录凭证 code 获取 session\_key 和 openid。其中 session\_key 是对用户数据进行加密签名的密钥。为了自身应用安全，session\_key 不应该在网络上传输。  
接口地址：  
[https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js\_code=JSCODE&grant\_type=authorization\_code][https_api.weixin.qq.com_sns_jscode2session_appid_APPID_secret_SECRET_js_code_JSCODE_grant_type_authorization_code]

请求参数
    参数	必填	说明
    appid	是	小程序唯一标识
    secret	是	小程序的 app secret
    js_code	是	登录时获取的 code
    grant_type	是	填写为 authorization_code
    
    返回参数
    参数	说明
    openid	用户唯一标识
    session_key	会话密钥
    expires_in	过期时长（默认7200）

#### 第三步：实现源码 ####

#### getOpenId.wxml ####

<view class="userinfo">
      <button wx:if="{
       {!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo" class="userinfo-btn"> 点击微信授权 </button>
      <block wx:else>
        <image bindtap="bindViewTap" class="userinfo-avatar" src="{
       {userInfo.avatarUrl}}" background-size="cover"></image>
        <text class="userinfo-nickname">{
       {userInfo.nickName}}</text>
      </block>
    </view>

\#\#\#\#getOpenId.js

\#\#\#\#getOpenId.json

{
      "navigationBarTitleText": "微信授权并获取OpenId"
    }

\#\#\#\#getOpenId.wxml

.userinfo {
      display: flex;
      flex-direction: column;
      align-items: center;
      background: #f0145a;
       width: 100%; 
      height: 300rpx;
    }
    .userinfo-btn{
      margin-top: 50rpx;
      background: none !important;
      color: #fff !important;
      font-size: 40rpx;
    }
    .userinfo-avatar {
      width: 108rpx;
      height: 108rpx;
      margin: 40rpx;
      border-radius: 50%;
    }
    .userinfo-nickname {
      color: #fff;
    }

## 贡献者 ##

*  [IT实战联盟-Line][IT_-Line]
 *  [IT实战联盟-咖啡][IT_-]

#### 更多精彩内容可以关注“IT实战联盟”公*众*号哦~~~ ####

[.gif]: /images/20220504/aed220a05eb94129812046b9e8dd26ec.png
[openId.jpg]: /images/20220504/80e9f2bdc522469a9760ad9001e211dd.png
[https_api.weixin.qq.com_sns_jscode2session_appid_APPID_secret_SECRET_js_code_JSCODE_grant_type_authorization_code]: https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code
[IT_-Line]: https://www.jianshu.com/u/283f93ada597
[IT_-]: https://www.jianshu.com/u/29d607600e98