Experiencia y proceso de inicio de sesión de autorización del applet de WeChat

Obtener autorización

Cuando se usa en el complemento del subprograma, debe llamar después de obtener la autorización del usuario en la página de función de información del usuario.
Debido a que WeChat modificó oficialmente la interfaz getUserInfo, no es posible abrir la ventana de autorización tan pronto como ingrese al subprograma WeChat . Solo puede usar type = en el botón. GetUserInfo para disparar. Conexión oficial

https://developers.weixin.qq.com/miniprogram/dev/api/open-api/user-info/wx.getUserInfo.html

Parte WXML

<button class="button" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">
授权登录
</button>

Parte JS

  bindGetUserInfo(e) {
    
    
    if (e.detail.userInfo == undefined) {
    
    
      	console.log("用户已取消授权");
    } else {
    
    
    	console.log("用户授权成功!");
    }
  }


getUserInfo de tipo open-type para obtener información del usuario
bindGetUserInfo bind función de devolución de llamada

El efecto de clic es el siguiente
Inserte la descripción de la imagen aquí

Proceso de inicio de sesión

Los eventos de js pueden ser activados activamente por los usuarios o pueden escribirse en funciones de ciclo de vida.

 // 获取用户信息
 wx.getUserInfo({
    
    
 		// 成功回调
        success: function (res) {
    
    
          console.log(res.userInfo)
          // 直接调用登录接口
          wx.login({
    
    
          	// 超时时间设置
            timeout:10000,
            // 使用async await 代替 .then 
            success: async (result)=>{
    
    
              // URL 为登录的接口 功能为 自动注册登录
              let {
    
    data} = await request("URL",{
    
    
              	// 是否自动注册
                autoReg:true,
                // wx.login() 返还的 code
                code:result.code,
              })
              // 全局变量保存token
              app.globalData.token = data.data.token
              // 跳转至主页或会员页面
              wx.switchTab({
    
    
                url: 'url',
              })
            },
            // 登录失败提示
            fail: ()=>{
    
    
              console.log('请求失败!可再次尝试');
            },
          });
        }
      })

Determinar si el usuario está autorizado

	// 获取用户授权信息
    wx.getSetting({
    
    
      // 执行成功
      success: resData => {
    
    
      	// 用户授权
        if (resData.authSetting['scope.userInfo']) {
    
    
          // 获取用户信息
          wx.getUserInfo({
    
    
            success: res => {
    
    
			  // 登录 更新信息
              wx.login({
    
    
                timeout: 10000,
                success: async (result) => {
    
    
                  let {
    
    
                    data
                  } = await request("user/wxapp/login", {
    
    
                    code: result.code,
                  })
                  // 更新 token
                  this.globalData.token= data.data.token;
                },
                fail: () => {
    
    },
              });
            }
          })
        } else {
    
    
          console.log("未授权");
          // 跳转至授权页 
          wx.redirectTo({
    
    
            url: '../../package/pages/authorize/authorize',
          })
        }
      }
    })

Supongo que te gusta

Origin blog.csdn.net/t5_5_5_5_5_7_7/article/details/110341843
Recomendado
Clasificación