微信小程序（九）微信登录（授权）、获取微信登录凭证code、openid

微信登录

• 微信登录面对的问题：
  • 怎么获取用户在微信的信息
  • 怎么获取小程序用户的唯一身份标志

获取openid的方法

• wx.login() 方法可以获取微信登录凭证code
• 使用code 可以向微信服务器换取微信用户的唯一识别标志openid
  • 微信服务器提供的接口地址：https://api.weixin.qq.com/sns/jscode2session?appid=<AppId>&secret=<AppSecret>&js_code=<code>&grant_type=authorization_code
  • AppId和AppSecret 是为了确保用code换openid的人是当前小程序的开发者

AppId 是公开信息，泄露AppId不会带来安全风险
AppSecret 是小程序秘钥，不能泄露，如果发现泄露需要到小程序管理平台进行重置。

login.wxml

<view class="cont">
  <view wx:if="{{hasUserInfo}}">
    {{userInfo.nickName}}您好，欢迎{{type}}
  </view>
  <view wx:else>
    <text>您好，请登录</text>
    <button type="primary" open-type="getUserInfo" bindgetuserinfo="getUserInfo">去授权</button>
  </view>
</view>

login.js

// index.js
// 获取应用实例
const app = getApp()
Page({
  data: {
    userInfo: {},
    hasUserInfo: false,
    type:''
  },
  onLoad() {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse) {
      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  },
  // 获取用户信息  getUserInfo 固定函数
  getUserInfo({detail:{userInfo}}) {
    console.log(userInfo);
    this.setData({
      userInfo,
      hasUserInfo:true
    })
 this.getCode().then(code=>this.getOpenId(code)).then(openid=>this.putOpenid(openid)).then(data=>{
      console.log(data);
    });
  },
  // 获取登录凭证code
  getCode(){
    return new Promise((resolve)=>{
      wx.login({
        success:({code})=>{
          console.log(code);
          resolve(code);
        },
      })
    })
  },
  // 发送code到微信后台获取openId
  getOpenId(code){
    const url = `https://api.weixin.qq.com/sns/jscode2session?appid=你的openid&secret=你的密钥&js_code=${code}&grant_type=authorization_code`;
    // 发起网络请求
    return new Promise((resolve)=>{
      wx.request({
        url,
        success:({data:{openid}})=>{
          resolve(openid);
          console.log(openid);
        }
      })
    })
  },
  // openid传给后端
  putOpenid(openid){
    const data = Object.assign({openid},this.data.userInfo)
    return new Promise((resolve)=>{
      wx.request({
        url: 'http://localhost:8080/',
        method:'POST',
        data,
        success({data}){
          resolve(data)
        }
      })
    })
  }
})