微信小程序之个人中心授权登录

)

1.了解微信授权登录

 微信登录官网：
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/6e85391fc5ed4eb097f9439de02907c4.jpeg#pic_center)
 小程序登录图：微信小程序登录授权的基本原理是通过微信开放平台提供的接口来实现。当用户在小程序中点击登录按钮时，小程序会调用wx.login方法获取临时登录凭证code，然后将该code发送给开发者自己的服务器。

开发者的服务器收到code后，可以使用该code向微信开放平台的接口发送请求，包括AppID、AppSecret和code等参数，以换取用户的唯一标识openid和会话密钥session_key。

开发者服务器获得openid和session_key后，可以将其保存在用户的登录状态中，并返回给小程序。小程序根据开发者服务器返回的登录状态，判断用户是否登录成功，并进行相应的业务处理。

需要注意的是，为了保护用户的隐私安全，开发者在处理用户数据时需要遵守相关法律法规，并且建议对用户数据进行加密传输和存储，确保用户信息的安全性。
2…用户信息授权登录
其中有两种方法，第一种方法是点击登录之后便直接获取了用户的个人信息，而第二种会询问用户是否同意授权，这样的话，会更具安全性

2.1.wx.login

这个方法主要用于获取用户的登录凭证（code）。在用户进入小程序时，前端会调用wx.login来获取这个code，然后将这个code发送给后台服务器。后台服务器再向微信发送请求，通过这个code来获取用户的唯一标识（openid）以及本次登录的会话密钥（session_key）。之后，后台服务器将这两个信息传回前台，用于自定义登录状态和用户唯一标识

2.2.wx.getUserProfile

这个方法主要用于获取用户的更多详细信息，如昵称、头像等。在使用这个方法之前，需要先调用wx.authorize接口来发起授权请求，请求用户授权提供这些信息。如果用户同意授权，就可以通过调用wx.getUserProfile方法来获取这些详细信息

<!--pages/index/index.wxml-->
<view>
  <button wx:if="{
    {canIUseGetUserProfile}}" type="primary" class="wx-login-btn" bindtap="getUserProfile">微信直接登录1</button>
  <button wx:else open-type="getUserInfo" type="primary" class="wx-login-btn" bindgetuserinfo="wxLogin">微信直接登录2</button>
  <image mode="scaleToFill" src="{
    {userInfo.avatarUrl}}" />
  <text>昵称:{
  {userInfo.nickName}}</text>
</view>

// pages/index/index.js
Page({
   
  data: {
   
    userInfo: {
   },
    canIUseGetUserProfile: false,
  },
  onLoad() {
   
    // if (wx.getUserProfile) {
   
    //   this.setData({
   
    //     canIUseGetUserProfile: true
    //   })
    // }
  },
  getUserProfile(e) {
   
    console.log('getUserProfile')
    // 推荐使用 wx.getUserProfile 获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
    // 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
    wx.getUserProfile({
   
      desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
   
        console.log(res);
        this.setData({
   
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })
  },
  wxLogin: function(e) {
   
    debugger
    console.log('wxLogin')
    console.log(e.detail.userInfo);
    this.setData({
   
      userInfo: e.detail.userInfo
    })
    if (e.detail.userInfo == undefined) {
   
      app.globalData.hasLogin = false;
      util.showErrorToast('微信登录失败');
      return;
    }
    
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
   
 
  },
 
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
   
 
  },
 
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
   
 
  },
 
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
   
 
  },
 
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
   
 
  },
 
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
   
 
  },
 
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
   
 
  }
})

2.数据交互授权登入

2.1. 前端代码

在项目中编写 api.js 文件中的请求访问地址

// 以下是业务服务器API地址
 // 本机开发API地址
var WxApiRoot = 'http://localhost:8080/oapro/wx/';
// 测试环境部署api地址
// var WxApiRoot = 'http://192.168.191.1:8080/oapro/wx/';
// 线上平台api地址
//var WxApiRoot = 'https://www.oa-mini.com/demo/wx/';
 
module.exports = {
   
  IndexUrl: WxApiRoot + 'home/index', //首页数据接口
  SwiperImgs: WxApiRoot+'swiperImgs',
  MettingInfos: WxApiRoot+'meeting/list',
  AuthLoginByWeixin: WxApiRoot + 'auth/login_by_weixin', //微信登录
  UserIndex: WxApiRoot + 'user/index', //个人页面用户相关信息
  AuthLogout: WxApiRoot + 'auth/logout', //账号登出
  AuthBindPhone: WxApiRoot + 'auth/bindPhone' //绑定微信手机号
}

2.2index.wxml

<view class="page-container">
    <view class="user-info-container">
        <view class="user-info"  bindtap="goLogin">
            <image class="user-img" mode="scaleToFill" src="{
    {userInfo.avatarUrl}}" />
            <text class="user-info-name">{
  {userInfo.nickName}}</text>
        </view>
        <image class="user-update" src="/static/tabBar/component.png" bindtap='goPages' data-url='/pages/ucenter/user/user'/>
    </view>
 
    <view class="boundary" />
    <view class="cells-container">
        <view class="cell-wrap">
            <image class="cell-icon" src="/static/tabBar/sdk.png" />
            <text class="cell-text">我主持的会议</text>
            <view class="cell-right">
                <view class="cell-list-num">{
  {metting_pubs}}</view>
                <view class="cell-arrow"></view>
            </view>
        </view>
        <view class="cell-wrap">
            <image class="cell-icon" src="/static/tabBar/sdk.png" />
            <text class="cell-text">我参与的会议</text>
            <view class="cell-right">
                <view class="cell-list-num">{
  {metting_joins}}</view>
                <view class="cell-arrow"></view>
            </view>
        </view>
    </view>
    <view class="boundary" />
    <view class="cells-container">
        <view class="cell-wrap">
            <image class="cell-icon" src="/static/tabBar/sdk.png" />
            <text class=