原生微信小程序登录

已于 2023-09-18 18:32:05 修改
阅读量128 收藏
点赞数
文章标签： 小程序 微信小程序 前端
于 2023-08-26 15:47:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59617857/article/details/132511341
版权

目录

一、方达易充用户信息登录

二、方达智充的登录

三、账号和密码登录

一、方达易充用户信息登录

 

index.wxml

<view class="content">
    <view class="view_head_img">
      <image class="head_img" src="{{ siteInfo.mini_logo }}"></image>
    </view>
    <view class="title">{{ siteInfo.mini_name }}</view>
    <view class="hr"></view>
    <block wx:if="{{ bindPhone }}">
      <view class="sectitle">请同意授权您的手机号码</view>
      <view class="sectitle2">· 以便{{ siteInfo.mini_name }}为你提供充电桩更好的服务</view>
      <view class="margin-top padding flex">
        <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber" class="flex-sub cu-btn round bg-olive lg">确认授权手机号码</button>
      </view> 
    </block>
    <block wx:else>
      <view class="sectitle">请同意授权用户信息</view>
      <view class="sectitle2">· 以便{{ siteInfo.mini_name }}为你提供充电桩更好的服务</view>
      <view class="margin-top padding flex">
        <button class="flex-sub cu-btn round bg-olive lg" bindtap="getUserProfile" wx:if="{{canIUseGetUserProfile}}">确认授权用户信息</button>
        <button class="flex-sub cu-btn round bg-olive lg" open-type="getUserInfo" bindgetuserinfo="onGetAuthorize" wx:else>确认授权用户信息</button>
      </view> 
      <view class="padding flex">
        <button class="flex-sub cu-btn round line-gray lg" bindtap="toHome">取消授权</button>
      </view>    
    </block>   
</view>

index.js

  data: {
    siteInfo: '',
    bindPhone:false,
  },
  onLoad(options) {
    let that = this;
    that.setData({
      siteInfo: app.globalData.siteInfo,
      canIUseGetUserProfile: wx.getUserProfile ? true: false,
    })
    console.log(that.data.canIUseGetUserProfile);
    setTimeout(() => {
      that.getCode()
    }, 1000)
    // wx.showLoading({
    //   title: '正在登陆~',
    //   mask: true
    // })
    wx.login({
      success(res) {
        console.log('登录成功！',res)
        that.setData({
          loginCode: res.code
        })
        app.get('wxapi/login', {
          code: res.code,
          login_type: 1
        }).then(res => {
          console.log('@@@@@ 登录接口成功',res)
          console.log(res.user_id, res.mobile)
          if (res.user_id && res.mobile){
            wx.setStorageSync('open_id', res.open_id)
            wx.setStorageSync('user_id', res.user_id)
            wx.setStorageSync('token', res.token)
            wx.showToast({
              type: 'success',
              title: '登陆成功'
            });
            that.getInfo()
          } else {
            setTimeout(() => {
              that.getCode()
            }, 1000)
            wx.hideLoading()
          }  
        })
      }
    })    
  },
/**
   * 获取用户信息
   */
  getUserProfile(e) {
    let that = this
    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
    wx.getUserProfile({
      desc: '用于完善您的个人信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        that.setData({
          encryptedData: encodeURIComponent(res.encryptedData),
          iv: res.iv,
          bindPhone:app.globalData.siteInfo.register_user_moblie_wx == 1
        },()=>{
          console.log(that.data.bindPhone)
          if (!that.data.bindPhone) {
           that.byUserLogin(res)
          }
        })
      },
      fail(){
        wx.showModal({
          title: 'Sorry',
          content: '很遗憾，授权失败或您拒绝了微信授权',
          showCancel: false,
          success(res) {
            if (res.confirm) {
              wx.redirectTo({
                url: '/pages/index/index'
              })
            }
          }
        })
      }
    })
  },
  byUserLogin(e){
    console.log(e)
    let that = this
    that.getNum = that.getNum || 0
    if (e.errMsg == 'getUserProfile:ok') {
      wx.showLoading({
        title: '登录中~~~',
        mask: true
      })
      app.get('wxapi/login', {
        code: that.data.loginCode,
        encryptedData: that.data.encryptedData,
        iv: that.data.iv,
        login_type: 2,
        otherCode: true
      }).then(data => {
        console.log(data)
        if(data.code == 0){
          wx.hideLoading()
          let res = data.data
          wx.setStorageSync('open_id', res.open_id);
          wx.setStorageSync('user_id', res.user_id);
          wx.setStorageSync('token', res.token);
          wx.showToast({
            type: 'success',
            title: '授权成功'
          })
          that.getInfo()
        } else if (data.code == 3){
          that.getNum++
          if (that.getNum >= 3){
            wx.reLaunch({
              url: '/pages/index/index'
            })
          }else{
            that.getCode().then(cres => {
              that.byUserLogin()
            }).catch(err => {
              that.getCode()
            })
          }
        } else {
          wx.hideLoading()
          wx.showToast({
            icon: 'none',
            title: data.msg,
            duration: 3000
          })
        }        
      })
    } else {
      wx.showModal({
        title: 'Sorry',
        content: '很遗憾，您拒绝了微信授权，宝宝很伤心',
        showCancel: false,
        success(res) {
          if (res.confirm) {
            wx.redirectTo({
              url: '/pages/index/index'
            })
          }
        }
      })
    }
  },

wxss

page{
  background: var(--white)
}
.view_head_img {
    text-align: center;
    margin-bottom: 10rpx;
    position: relative;
    margin-top: 50px;
}

.head_img {
    border: 0 solid #ff0000;
    border-radius: 100rpx;
    width: 200rpx;
    height: 200rpx;
}

.title {
    text-align: center;
    font-weight: bold;
}

.hr {
    width: 80%;
    height: 1px;
    background: #888;
    margin-top: 20px;
    margin-left: 30px;
}

.sectitle {
    margin-left: 30px;
    margin-top: 20px;
    font-weight: bold;
    font-size: 16px;
}

.sectitle2 {
    margin-left: 30px;
    margin-top: 20px;
    font-size: 16px;
}

.btn {
    margin: 20px auto;
    width: 80%;
}

二、方达智充的登录

第二个获取token的接口

 {"success":true,"code":20000,"message":"成功","data":{"jwt":{"access_token":"eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOlsiYnVzaW5lc3NTZXJ2aWNlIiwibWFjU2VydmljZSJdLCJleHAiOjE2OTMxMzI0NDIsInVzZXJfbmFtZSI6IntcImFjY291bnRcIjpcIm9LM1h2NUFIRzd5S0NfTkJja2tiaURUVVczSUFcIixcImFjY291bnRUeXBlXCI6MixcImZ1bGxuYW1lXCI6XCJ1bmRlZmluZWRcIixcImlkXCI6MTUzOSxcIm1hbmFnZVwiOmZhbHNlLFwibWVyY2hhbnRcIjpmYWxzZX0iLCJqdGkiOiJjM2QyMDJjNS02YjM3LTQ3YmUtYTFjYy04MGRlM2U3Yzc1NDgiLCJjbGllbnRfaWQiOiJidXNpbmVzc1NlcnZpY2UiLCJzY29wZSI6WyJidXNpbmVzc1NlcnZpY2UiLCJtYWNTZXJ2aWNlIl19.XBFRcq_TOqmQCYiy9f-zzGCmBddEK5PoMkJ67BZHuHtC67Er6vSIr0Y-m9M5Dh3vLAYHLLKT5l3L0puD2f9u-pWUyHLjyTyR1WCAdU5OEvdHbS-8rsDuipioLE3nPAvEEwBVL8TIxi9CtEUnPTbacZA9qTeb5Ri0M8Q4xxBHLwEcxpbfBZp1xYVKGBntD5kzx7577oJk8_-E1fPeEicPgRmyJbl4fIs1wV6_-vajz5uTyL0xHe1iZKwx7CPXmPIPNmGomutJL-6uCWhwJbtyGT62lqQnwRezYI-CdgLkoiLSOb9xp3SX7joPicOVknmXkwlG02M2jIgp7Wl0x4IUzA","token_type":"bearer","expires_in":86399,"scope":"businessService macService","jti":"c3d202c5-6b37-47be-a1cc-80de3e7c7548"}}}

第三获取电话号码

<view class="loginContainer">
    <view style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
        <image src="../../imgs/cd.png" style="width: 300rpx; height: 220rpx;margin-bottom: 50px;"></image>
        <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber" style="border-radius: 20px; background-color: white;color: 02112F;">手机号快捷登录</button>
        <label style="color: #999999; font-size: 12px; margin-top: 10px;">登录后将回到原来的界面,请继续原来操作</label>
    </view>
</view>

.loginContainer {
    height: 100vmax;
    width: 100%;
    justify-content: center;
    display: flex;
    align-items: center;
    background-color: #02112F;
}
  onShow() {
    let that = this
    that.codeToSession()
  },
 codeToSession() {
    let that = this
    wx.login({
      success: (res) => {
        wx.request({
          url: codeToSession,
          method: "GET",
          data: {
            code: res.code
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded'
          },
          success: (res) => {
            wx.setStorageSync('userInfo2', res.data.data.data);
            console.log('userInfo2', res.data.data.data);

            let logoPath = wx.getStorageSync('logoPath');
            that.setData({
              logoPath: logoPath,
              item: wx.getStorageSync('logoPath'),
            })

          }
        })
      }
    })
  },

 getPhoneNumber: (e) => {
    wx.setStorageSync('userInfo3', e.detail)

    wx.login({
      success: (res) => {
        wx.showLoading({
          title: "正在登录...",
          mask: true
        })
        let code = res.code;
        getJWtFromServerByCode(code);
      }
    })
  }

function getJWtFromServerByCode(_code) {
  wx.request({
    url: getJWtFromServerByCodeUrl,
    data: {
      'code': _code,
      'client_secret': client_secret,
      'client_id': client_id
    },
    method: "GET",
    dataType: "json",
    success: (res) => {
      wx.hideLoading();
      if (res.data.code === 20000) {
        let jwt = res.data.data.jwt;
        if (jwt != null) {
          var timestamp = Date.parse(new Date());
          let data = {
            'jwt': jwt.access_token,
            'session_key': jwt.session_key,
            'time': timestamp
          } 
          wx.setStorageSync('jwt', data);
          //返回上一页
          wx.navigateBack();
          wx.getUserInfo({
            success: (res) => {
              wx.setStorageSync('userInfo', res.userInfo)
              updateUserProfile();
            },
            fail: (res) => {
              // 用户未授权，请提示用户授权后重试
            }
          });
          // 返回上一页
          wx.navigateBack();
          www();
        }
      } else {
        console.log("code!==20000 res:" + JSON.stringify(res))
      }
    },
    fail: (err) => {
      wx.hideLoading();
      console.log("getJWtFromServerByCode err" + JSON.stringify(err))
    }
  });
}

// 向后端API发送用户信息和JWT
function updateUserProfile() {
  const {
    encryptedData,
    iv
  } = wx.getStorageSync('userInfo3')
  const {
    session_key
  } = wx.getStorageSync('userInfo2')
  const {
    avatar,
    fullName
  } = wx.getStorageSync('userInfo')
  const {
    jwt
  } = wx.getStorageSync('jwt');
  let requestParams = {
    avatar: avatar,
    fullName: fullName,
    phoneEncryptedData: encryptedData, // 电话号码加密数据
    phoneIv: iv, // 电话号码加密向量
    sessionKey: session_key // 添加 session_key 参数
  };
  console.log("one", requestParams);
  wx.request({
    url: setMeInfo,
    method: "POST",
    data: requestParams,
    header: {
      "authorization": "bearer" + jwt,
      'content-type': 'application/x-www-form-urlencoded',
      // 'sessionKey': session_key // 将 session_key 添加到请求头中
    },
    success: function (res) {
      console.log("请求成功", res)

      let logoPath = wx.getStorageSync('logoPath');
      that.setData({
        logoPath: logoPath,
        item: wx.getStorageSync('logoPath'),
      })
    },
    fail: function (err) {
      console.error("请求失败", err)
    }
  });
}


//订阅信息
 function www() {
  let that = this
  let access_token = getJwt();
  wx.request({
    url: getWechatNoticeTemplateList,
    method: "GET",
    data: {},
    header: {
      "authorization": "bearer" + access_token,
      'content-type': 'application/x-www-form-urlencoded'
    },
    success: function (res) {
      let data =res.data.data.data.data
      let tmplIds =[];
      for (let i = 0; i < data.length; i++) {
        tmplIds.push(data[i].priTmplId)
      }
      wx.getSetting({
        withSubscriptions: true, //  这里设置为true,下面才会返回mainSwitch
        success: function (res) {
          // 调起授权界面弹窗
          if (res.subscriptionsSetting.mainSwitch) { // 用户打开了订阅消息总开关
            // 每次执到这都会拉起授权弹窗
            wx.showModal({
              title: '提示',
              content: '请授权开通服务通知',
              showCancel: true,
              success: function (ress) {
                if (ress.confirm) {
                  // console.log('用户点击确定')
                  wx.requestSubscribeMessage({ // 调起消息订阅界面      
                   tmplIds: tmplIds,
                    success(res) {
                      console.log('订阅消息 成功 ');
                      
                      for (var tmplId in res) {
                        console.log(tmplId + ': ' + res[tmplId]);
                      }
                      wx.showLoading({
                        title:"订阅消息成功",
                        icon:"none",
                        duration: 500
                      })
                    },
                    fail(er) {
                      console.log("订阅消息 失败 ");
                      // console.log(er);
                    }
                  })

                } else if (ress.cancel) {
                  // console.log('用户点击取消')
                }
              }
            })
          } else {
            console.log('订阅消息未开启')
          }
        },
        fail: function (error) {
          console.log(error);
        }
      })
    },
    fail: (err) => {
      wx.hideLoading()
      wx.showToast({
        title: "服务器忙",
        icon: 'none'
      })
    }
  })
}

三、账号和密码登录

<view class="container">
  <view class="logo">Logo</view>
  <button bindtap="showLoginPopup">点击登录</button>

  <!-- 弹出框 -->
  <view wx:if="{{showPopup}}" class="popup">
    <input placeholder="用户名" bindinput="inputUsername" />
    <input type="password" placeholder="密码" bindinput="inputPassword" />
    <button bindtap="login">登录</button>
    <button bindtap="hideLoginPopup">关闭</button>
  </view>
</view>
// login.js
Page({
  data: {
    showPopup: false,
    username: '',
    password: ''
  },

  // 显示登录弹出框
  showLoginPopup() {
    this.setData({
      showPopup: true
    });
  },

  // 隐藏登录弹出框
  hideLoginPopup() {
    this.setData({
      showPopup: false
    });
  },

  // 输入用户名
  inputUsername(event) {
    this.setData({
      username: event.detail.value
    });
  },

  // 输入密码
  inputPassword(event) {
    this.setData({
      password: event.detail.value
    });
  },

  // 登录
  login() {
    const { username, password } = this.data;

    // 检查用户名和密码是否为空
    if (!username || !password) {
      wx.showToast({
        title: '请输入用户名和密码',
        icon: 'none'
      });
      return;
    }

    // 发送登录请求到后端服务器
    // 请替换以下示例中的 URL 和请求方式
    wx.request({
      url: 'https://your-api-url.com/login', // 替换成实际的登录接口地址
      method: 'POST',
      data: {
        username: this.data.username,
        password: this.data.password
      },
      success: (res) => {
        if (res.data.success) {
          // 登录成功，保存用户信息，通常是用户令牌
          wx.setStorageSync('token', res.data.token);

          // 关闭弹出框
          this.hideLoginPopup();

          // 跳转到其他页面，例如用户主页
          wx.navigateTo({
            url: '/pages/home/home'
          });
        } else {
          // 登录失败，显示错误消息
          wx.showToast({
            title: '登录失败，请检查用户名和密码',
            icon: 'none'
          });
        }
      },
      fail: (error) => {
        // 处理登录请求失败
        wx.showToast({
          title: '登录请求失败，请重试',
          icon: 'none'
        });
      }
    });
  }
});
/* login.wxss */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.logo {
  font-size: 24px;
  margin-bottom: 20px;
}

button {
  background-color: #007acc;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

星々辰#
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
原生微信小程序源码，生鲜商城
07-05
原生微信小程序是一种基于微信平台开发的应用，它利用微信提供的开发工具和框架，可以构建出运行在微信内的轻量级应用。在这个特定的项目中，我们关注的是一个专门用于生鲜电商的微信小程序源码。这样的小程序通常...
微信小程序（原生）——授权登录、授权手机号
努力、拼搏、奋进
11-10 1364
微信小程序（原生）——授权登录、授权手机号
小程序登录
weixin_42115358的博客
06-17 73
小程序登录
微信小程序原生登录功能
weixin_44848636的博客
02-06 326
微信小程序原生登录功能
原生小程序 登录篇
weixin_30532759的博客
06-09 301
详情见：https://developers.weixin.qq.com/ebook?action=get_post_info&docid=000cc48f96c5989b0086ddc7e56c0a 转载于:https://www.cnblogs.com/ceceliahappycoding/p/10994987.html
【微信小程序】详解微信小程序登录wx.login和获取用户信息wx.getUserInfo
码婆Doph
08-19 4万+
前言 相信各位大佬在写小程序的时候基本都会牵扯到小程序原生的登录接口。但是，微信的登录这一套登录体系是真的很难懂！ 接下来，我会跟大家分模块分析它们。 正文 1.标准登录流程详解 小程序通过wx.login()接口从微信官方服务器获取用户code（如下图）（code 我就不打码了) 注意：以上wx.login()接口是静默进行的。也就是说，不会弹出授权窗口。 小程序把...
原生微信小程序源码 - -豆瓣电影
05-01
"原生微信小程序源码 - -豆瓣电影"这个标题表明这是一个关于微信小程序的项目，其主要功能是实现与豆瓣电影相关的服务。原生指的是源码是使用微信小程序官方支持的语言和框架开发的，没有依赖任何第三方库或框架，...
原生微信小程序源码 - -商城
最新发布
05-01
原生微信小程序是指完全遵循微信小程序官方开发框架的小程序，不依赖任何第三方库或工具，直接使用微信提供的API和组件进行开发。这样的小程序性能最佳，能充分利用微信环境的优势，提供流畅的用户体验。 【商城...
基于C#的小程序商城，原生微信小程序+NetCore技术构建.zip
05-05
小程序商城 基于 原生微信小程序 + NetCore 技术构建 ，项目包含 多店铺商城，三级分销，微信小程序，管理后台，物流配送，优惠券，积分，促销，插件管理等功能。基于C#后台语言，达到商用标准的一套项目体系。 小...
原生微信小程序源码 - -果库
05-01
果库原生微信小程序源码则是一个具体的实例，展示了如何构建一个与“果库”相关的应用程序。 【原生开发】 原生开发指的是使用特定平台的编程语言和API进行应用开发，对于微信小程序来说，就是使用微信提供的WXML...
【微信小程序-原生开发】TDesign 实战模板——账号密码登录页（含密码显示隐藏的技巧）
朝阳39的博客
02-04 1987
TDesign 实战模板——账号密码登录页（含密码显示隐藏的技巧）
微信小程序之登录界面示例
m0_67265464的博客
06-22 1795
index.wxss样式文件代码（使用绝对布局和相对布局） 结果图
uni微信小程序登录。若使用wx 原生写的 可直接把uni 改成wx
H_Jian98的博客
07-09 400
uni微信小程序登录。若使用wx 原生写的 可直接把uni 改成wx
原生小程序--授权
wind_linjie的博客
12-04 247
** 获取授权——getUserInfo ** <button type="primary" plain open-type="getUserInfo" bindgetuserinfo="handleGetUserInfo" > 获取授权 </button> // 获取用户信息包含获取token等业务逻辑 async handleGetUserInfo(e) { try { // 1 获取用户信息 const { encryptedDa
微信小程序wx.login()获取openid，附：前端+后端代码
weixin_33862041的博客
06-17 5812
微信小程序开放了微信登录的api，无论是个人还是企业申请的小程序均可使用。 首先创建一个项目，把这些代码都清空，我们自己写！ 然后，开始写了！首先index.wxml，写一个button用于发起登录 index.wxml <!--index.wxml--> <button bindtap='login'>登录&l...
微信小程序实现登录页面
热门推荐
qq_36189144的博客
05-06 7万+
wxml文件： <view class="container"> <view class="login-icon"> <image class="login-img" src="../../img/loginLog.jpg"></image> </view> <view class="login-from"&g...
微信小程序webview中h5网页如何同原生小程序同步登录态
weixin_33937913的博客
03-04 8883
大家好前段时间我们开发小程序有这么个需求 需求：用webview嵌套h5 页面 再次将开发完成的项目页面整体在小程序端实现（其中登录状态webview中的页和整个小程序的登录态要做到统一） 这中间就涉及到了整个项目登录态同步的问题 https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html(官方讲解webv...
微信小程序登录,包括uniapp的微信小程序登录
progrmmmm的博客
04-05 3409
代码： 样式： <button @click="login">登入</button> 事件（methods中）： login() { //判断缓存中是否有用户数据（也就是判断有没有登录） if (!uni.getStorageSync('encryptedData')) { uni.getUserProfile({ desc: '获取您的昵称、头像、地区及性別',//向用户展示的信息
微信小程序登录实现过程
qq_45335911的博客
08-12 2784
微信小程序登录思路及代码 因为项目要求要做微信小程序的登录功能，因为比较繁琐所以记录一下笔记，梳理一下思路 思路 当用户点击个人主页或者购买物品收藏物品的时候往往都需要验证个人信息，比如提交订单要确定是谁购买的才能下订单，或者用户在查看个人信息的时候不能页面上都是空的什么都没有吧，所以这是候就需要登录的功能了 但是因为像微信、QQ这种社交软件都是腾讯的软件，而且牵扯到个人信息，往往都是通过加密的方式，一般公司的后台是不能直接请求到微信个人信息的数据的，所以都是通过三方协同来实现个人信息交互请求的，就像下
如何开发原生微信小程序？
12-15
开发原生微信小程序需要掌握以下几个方面的知识： 1.微信小程序开发框架：小程序开发框架是一套基于MVVM模式的框架，主要包括WXML、WXSS、JS和JSON四个部分，其中WXML和WXSS用于页面的结构和样式，JS用于页面的逻辑...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值