用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

微信小程序登录(授权)、获取微信登录凭证code、openid

Rolan 2021-2-22 22:27

微信登录微信登录面对的问题:怎么获取用户在微信的信息怎么获取小程序用户的唯一身份标志获取openid的方法wx.login() 方法可以获取微信登录凭证code使用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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

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)
        }
      })
    })
  }
})
鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏