微信小程序-传统开发模式实现授权注册登录流程【超详细】

水深无声 2023-07-20 12:23 5阅读 0赞

>         嗨呀，宝宝心里苦呀，近日赶上小程序的第一轮提测，一堆bug等着我来啃，此刻，我的内心终于恢复了一丝平静，因为第一轮测试产出的bug都啃完了，剩下的就是静静等待第二轮的复测，难得的一丝惬意，终究还是躲不过“命运”的安排，我怕我此刻不更文，明日复明日，明日是何日，我还是抓紧时间吧，给小伙伴们更一篇微信小程序有关登录注册的文章吧，因为自我感觉还是有必要跟伙伴们分享一下心得，毕竟说起登录，几乎是所有软件等程序的第一个功能入口处，那么，微信小程序登入流程是怎样的?又如何简单全面的实现微信小程序传统开发模式开发实现微信用户授权登录？那好，话不多说，咱们往下接着看（请问：什么叫传统开发模式？云开发模式又是什么吗？预知后事如何，请戳下这里）
> 
> **[云开发模式pk传统开发模式][pk]**
> 
>          那么，该我上场表演啦...奥利给

来，往这看，先来大致熟悉下小程序端的登入流程：如图所见，清晰透彻，仿佛已经能下“笔”如有神了，是的，跟你们想象的一样，无非就是那几步，但是微端 有自己封装好的接口服务，相对自己传统开发登录模块，还是简单些。

【ps：图源来至微信官文[https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html][https_developers.weixin.qq.com_miniprogram_dev_framework_open-ability_login.html]】

![format_png][]

接下来我来浅谈一下我对它的一些认知，如有不妥之处，还请多多指教。我先整体列出大致步骤，如有不明白，请继续往下看，每一步都有详细文字剖析，千万别走神，因为我真的很用心在写。

第一步: 定义button属性，获取用户昵称及头像路径

第二步:调用wx.login()方法，获得code并该code作为参数传到后端

第三步:后端将该code 、和appId 、appSecret，作为后端url的参数，调用该微信后端接口，从而得到openid 和 session\_key  \[提示，安全起见，前端除code之外，其余参数后端直接给参，不做前端参数传递\]

参数说明：appid//开发者设置中的appid，appSecret//开发者设置中的appSecret，code//小程序调用wx.login返回的code，grant\_type//默认参数 authorization\_code；

第四步:将openid 和 session\_key 做处理，根据openid去数据库查询，判断是新用户还是老用户登录（老用户直接放行，新用户先入库再放行）

第五步:返回用户的 openid

第六步:小程序端将openid缓存，在其他业务请求时可将其作为参数。

第七步:登录流程End

ok，先来给你们看一下成功登录的整体流程，基本呢，就是这样，那么到底代码应该怎么去写呢，好的，我这边基本已经有所了解，看我下边好好给你们分析，包教包会！请别走神，好好看好好学！不然我熬夜通宵就白给了。

![20200401181116631.gif][]

### 代码包文字说明 ###

<view class="all" style="width:{
       {windowWidth}}px;height:{
       {windowHeight}}px;background-image:url(http://140.207.77.144:8000/bg.jpg);background-size:100% 100%;">
      <view class="body">
        <view class="onLoad" wx:if="{
       {flag2}}">
          <view class="loading">
            <view class="login" style="color: #ffffff">登录中</view>
           <view class="circle-line">
          <text></text>
          <text></text>
          <text></text>
          <text></text>
          <text></text>
          <text></text>
          <text></text>
          <text></text>
        </view>
          </view>
        </view>
      </view>
      <view class="loginButton" wx:if="{
       {flag1}}">
        <button  bindtap="showDialog">点击进入</button>
      </view>
    </view>
    
    <view class="commodity_screen" wx:if="{
       {showScreen}}" bindtap="hideModal"></view>
    <mp-dialog show="{
       {showOneButtonDialog1}}">
      <view>用户未授权，请点击按钮进行授权</view>
      <button open-type="getUserInfo" style="margin-top: 40rpx;font-weight: 300;" bindgetuserinfo="bindGetUserInfo" bindtap="hideModal">授权</button>
    </mp-dialog>
    
    
    <mp-dialog show="{
       {showOneButtonDialog2}}" bindtap="hideModal">
      <view>您已授权，请直接登录</view>
      <button style="margin-top: 40rpx;font-weight: 300;" bindtap="toMinePage">登录</button>
    </mp-dialog>

Page({
    
      //用户授权获取基本信息 
      bindGetUserInfo: async function (e) {
        if (e.detail.userInfo) {
          //用户按了允许授权按钮
          var that = this;
          that.setData({
            showOneButtonDialog1: false,
            flag2: true,
            flag1: false
          })
          this.checkRe(1,e);
        } else {
          //用户按了拒绝按钮
          wx.showModal({
            title: '警告',
            content: '您点击了拒绝授权，将无法进入小程序，请授权之后再进入!!!',
            showCancel: false,
            confirmText: '返回授权',
            success: function (res) {
              if (res.confirm) {
                console.log('用户点击了“返回授权”');
              }
            }
          });
        };
      },
      //检查用户是否注册
      checkRe: async function(num,e) {
        //将获取的用户信息进行缓存
          wx.setStorageSync('nickName', e.detail.userInfo.nickName)
          wx.setStorageSync('avatarUrl', e.detail.userInfo.avatarUrl)
        //获取openid
        await this.getOpenid();
        var that = this;
        wx.request({
          //接口描述：1、若返回值为0，则表示未入库，返回值为userid，则表示已入库
          url: this.data.host + '/user/userIsRegister',
          header: {
            'content-type': 'application/x-www-form-urlencoded'
          },
          data: {
            weiXin: wx.getStorageSync('openid'),
            //用于校验昵称头像跟第一次授权信息是否一致
            profilePhotoPath: wx.getStorageSync('avatarUrl'),
            nickName: wx.getStorageSync('nickName'),
          },
          method: 'get',
          success: async function(e) {
         
            //未注册用户,则存储入库
            if (e.data.result == '0') {
              wx.request({
                //接口描述：直接进行入库操作
                url: that.data.host + '/user/register',
                header: {
                  'content-type': 'application/json'
                },
                data: {
                  weixin: wx.getStorageSync('openid'),
                  profilePhotoPath: wx.getStorageSync('avatarUrl'),
                  nickName: wx.getStorageSync('nickName'),
                  type: '0'
                },
                method: 'post',
                success: async function(e) {
                  //存储全局变量
                  wx.setStorageSync('userId', e.data.result)
                }
              })
            } 
            //已注册用户
            else {
              wx.setStorageSync('userId', e.data.result);
              
            }
            if (num == 1) {
              //登入成功，进行首页跳转
              setTimeout(function () {
                //进行延迟执行，模拟等待登录Loading效果
                wx.switchTab({
                  url: '../mine/mine'
                })
              }, 1000)
            }
          }
        })
      },
      //获取openId
      getOpenid: function() {
        var that = this;
        return new Promise((resolve) => {
          wx.login({
            success: function(res) {
              if (res.code) {
                const JSCODE = res.code
                const grant_type = 'authorization_code'
                wx.request({
                  url: that.data.host + '/user/getTeacherOpenId',
                  header: {
                    'content-type': 'application/x-www-form-urlencoded',
                  },
                  data: {
                    code: JSCODE
                  },
                  method: 'post',
                  success: function(e) {
                    wx.setStorageSync('openid', e.data.result)
                    console.log('====openid====', e.data.result)
                    resolve(e.data.result)
                  }
                })
              }
            }
          })
        })
      },
    )}

后端代码就不贴了，每个人的都不同,我说一下我的思路，如有需要请下方留言；

从小程序端调用接口获取openid，如果成功获取就通过这个openid查询数据库【说一下，user表新增一个存储用户openid的字段】，如果没有找到相应的记录，就说明是新用户，就专门提供返回一个“0”标志位，供前端判断，如果返回值为“0”，就调用注册接口，wx.getUserInfo()方法拉取用户头像昵称等信息，创建一个新账户，并把账户的userid、openip、头像url、昵称等信息存入user表中，有大佬建议把获取到的userid跟openid关联并存储到另一张中间表中，目的是为了以后如果项目做平台移植时更方便，emm.暂时没考虑这些。如果查到对应的记录（说明是老用户，非第一次登录），直接验证登录通过,此刻后端还做了一层逻辑，校验两次登录用户昵称、头像url是否变动，变动就修改该条用户记录；做到存入数据库的数据跟授权拿到的用户信息是一致即可；

`-----------------------------------------------``------------------------------------------------`

小伙伴们，你们学废了吗？学废了的，扣波6，让我看见你们为我加油的双手！

不好意思，走错片场啦！嘿嘿

> ❤如果文章对您有所帮助，就在文章的右上角或者文章的末尾点个赞吧！(づ￣ 3￣)づ
> 
> ❤如果喜欢大白兔分享的文章，就给大白兔点个关注吧！(๑′ᴗ‵๑)づ╭❤～
> 
> ❤对文章有任何问题欢迎小伙伴们下方留言或者入群探讨【群号：708072830】
> 
> ❤鉴于个人经验有限，所有观点及技术研点，如有异议，请直接回复讨论（请勿发表攻击言论）。

[pk]: https://blog.csdn.net/weixin_43970743/article/details/105250530
[https_developers.weixin.qq.com_miniprogram_dev_framework_open-ability_login.html]: https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html
[format_png]: /images/20230528/9434bdbc26b249b68ea30f5add58c2db.png
[20200401181116631.gif]: /images/20230528/3b116f7d45d94037aed26851fa353f7d.png