微信小程序-傳統開發模式實現授權註冊登錄流程【超詳細】

        嗨呀，寶寶心裏苦呀，近日趕上小程序的第一輪提測，一堆bug等着我來啃，此刻，我的內心終於恢復了一絲平靜，因爲第一輪測試產出的bug都啃完了，剩下的就是靜靜等待第二輪的複測，難得的一絲愜意，終究還是躲不過“命運”的安排，我怕我此刻不更文，明日復明日，明日是何日，我還是抓緊時間吧，給小夥伴們更一篇微信小程序有關登錄註冊的文章吧，因爲自我感覺還是有必要跟夥伴們分享一下心得，畢竟說起登錄，幾乎是所有軟件等程序的第一個功能入口處，那麼，微信小程序登入流程是怎樣的?又如何簡單全面的實現微信小程序傳統開發模式開發實現微信用戶授權登錄？那好，話不多說，咱們往下接着看（請問：什麼叫傳統開發模式？雲開發模式又是什麼嗎？預知後事如何，請戳下這裏）

雲開發模式pk傳統開發模式

         那麼，該我上場表演啦...奧利給

來，往這看，先來大致熟悉下小程序端的登入流程：如圖所見，清晰透徹，彷彿已經能下“筆”如有神了，是的，跟你們想象的一樣，無非就是那幾步，但是微端 有自己封裝好的接口服務，相對自己傳統開發登錄模塊，還是簡單些。

【ps：圖源來至微信官文https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html】

接下來我來淺談一下我對它的一些認知，如有不妥之處，還請多多指教。我先整體列出大致步驟，如有不明白，請繼續往下看，每一步都有詳細文字剖析，千萬別走神，因爲我真的很用心在寫。

    第一步: 定義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，先來給你們看一下成功登錄的整體流程，基本呢，就是這樣，那麼到底代碼應該怎麼去寫呢，好的，我這邊基本已經有所瞭解，看我下邊好好給你們分析，包教包會！請別走神，好好看好好學！不然我熬夜通宵就白給了。

代碼包文字說明

login.wxml

<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>

<!--已授過權，存儲的userid有值-->
<mp-dialog show="{{showOneButtonDialog2}}" bindtap="hideModal">
  <view>您已授權，請直接登錄</view>
  <button style="margin-top: 40rpx;font-weight: 300;" bindtap="toMinePage">登錄</button>
</mp-dialog>

login.js

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】

❤鑑於個人經驗有限，所有觀點及技術研點，如有異議，請直接回復討論（請勿發表攻擊言論）。