Bagaimana untuk melaksanakan fungsi log masuk dalam program mini? Artikel ini akan memperkenalkan kepada anda cara yang betul untuk membuka log masuk program mini Saya harap ia akan membantu anda!

Komponen rangkaian program mini

https://developers.weixin.qq.com/miniprogram /dev/api/network/request/wx.request.html

Perihalan RequestTask

atribut wx.request(objek objek)

Hanya atribut yang lebih biasa digunakan disenaraikan di sini Untuk semua atribut, sila lihat pautan.

Untuk meringkaskan: semua antara muka program mini pada asasnya mempunyai dua ciri:

• Parameter semuanya adalah satu objek. Mudah diingat dan mudah dikembangkan.

• semuanya mempunyai kaedah pemprosesan hasil yang sama: kesemuanya mempunyai tiga atribut panggil balik: kejayaan, gagal dan lengkap.

Pengenalan kepada objek errMsg dalam pelbagai situasi pelaksanaan antara muka.

Kod contoh

  let reqTask = wx.request({
      url: getApp().globalData.api,
      success(res) {
        if (res.errMsg === "request:ok") console.log("res", res);
      },
      fail(err) {
        // if(err.errMsg.indexOf('request:fail')>-1) console.log('err', err);
        if (/^request:fail/i.test(err.errMsg)) console.log("err", err);
      },
      complete(res) {
        console.log("resOrErr", res);
      },
    });
   const reqTaskOnHeadersReceived = (headers) => {
      reqTask.offHeadersReceived(reqTaskOnHeadersReceived);
      console.log("headers", headers);
      // 由于請求還未完全結束，所以我們沒辦法獲得請求的狀態(tài)碼，但是我們可以通過返回的requestBody的長度來進行判斷。
      // 兩點說明：1. 兩個~~可以把字符串數(shù)字快速轉化為數(shù)字。
      // 2. 為什么取小于19，是由于后臺返回沒有權限的requestBody的時候Content-length為“18”，正常情況下是大于19的。所以具體多少得看一下具體情況。
      if (~~headers.header["Content-length"] < 19) reqTask.abort();
    };
    reqTask.onHeadersReceived(reqTaskOnHeadersReceived);

Antara muka log masuk program mini

• wx.getUserProfile(Object object)

  Dapatkan maklumat pengguna. Ia hanya boleh dipanggil selepas peristiwa klik dijana pada halaman (contohnya, dalam panggilan balik button pada bindtap Tetingkap kebenaran akan muncul untuk setiap permintaan dan pengguna akan kembali ke userInfo). selepas bersetuju. Antara muka ini digunakan untuk menggantikan wx.getUserInfo Untuk butiran, lihat Arahan Pelarasan Antara Muka Maklumat Pengguna.

• wx.checkSession(Object object)

  Semak sama ada status log masuk telah tamat tempoh. Status log masuk pengguna yang diperoleh melalui antara muka wx.login mempunyai ketepatan masa tertentu. Semakin lama pengguna tidak menggunakan program mini, semakin besar kemungkinan status log masuk pengguna akan menjadi tidak sah. Sebaliknya, jika pengguna telah menggunakan program mini, status log masuk pengguna akan sentiasa sah. Logik pemasaan khusus dikekalkan oleh WeChat dan telus kepada pembangun. Pembangun hanya perlu memanggil antara muka wx.checkSession untuk menyemak sama ada status log masuk pengguna semasa adalah sah.

  Selepas status log masuk tamat tempoh, pembangun boleh menghubungi wx.login untuk mendapatkan status log masuk pengguna baharu. Panggilan yang berjaya menunjukkan bahawa session_key semasa belum tamat tempoh, dan panggilan yang gagal menunjukkan bahawa session_key telah tamat tempoh. Untuk butiran penggunaan lanjut, lihat Log Masuk Program Mini.

• wx.login(Object object)

  Panggil antara muka untuk mendapatkan bukti kelayakan log masuk (kod). Maklumat status log masuk pengguna ditukar melalui baucar, termasuk pengenalan unik pengguna dalam program mini semasa (openid), pengenalan unik di bawah akaun platform terbuka WeChat (unionid, jika program mini semasa telah terikat pada platform terbuka WeChat akaun) dan log masuk ini Kunci sesi (session_key), dsb. Penyulitan dan penyahsulitan komunikasi data pengguna bergantung pada kunci sesi. Untuk butiran penggunaan lanjut, lihat Log Masuk Program Mini.

Pelaksanaan kod antara muka log masuk belakang

Halaman belakang menggunakan NodeJS, rangka kerja web versi KOA ^2.13 . 4, rangka kerja penghalaan @koa/router versi ^10.1.1, permintaan rangka kerja, versi ^2.88.2, jsonwebtoken digunakan untuk menyulitkan dan menyahsulit maklumat token, versi ^8.5.1

// app.js
const Koa = require("koa");
const Router = require("@koa/router");
const WeixinAuth = require("./lib/koa2-weixin-auth");
const jsonwebtoken = require("jsonwebtoken");

const app = new Koa();
// 小程序機票信息
const miniProgramAppId = "*********";
const miniProgramAppSecret = "***********";
const weixinAuth = new WeixinAuth(miniProgramAppId, miniProgramAppSecret);

const JWT_SECRET = "JWTSECRET";
// 路由中間件需要安裝@koa/router
// 開啟一個帶群組的路由
const router = new Router({
  prefix: "/user",
});
// 這是正規(guī)的登陸方法
// 添加一個參數(shù)，sessionKeyIsValid，代表sessionKey是否還有效
router.post("/weixin-login", async (ctx) => {
  let { code, userInfo, encryptedData, iv, sessionKeyIsValid } =
    ctx.request.body;
   // 解析openid
  const token = await weixinAuth.getAccessToken(code);
  userInfo.openid = token.data.openid;
  // 這里可以自己進行處理，比方說記錄到數(shù)據(jù)庫,處理token等
  let authorizationToken = jsonwebtoken.sign(
    { name: userInfo.nickName },
    JWT_SECRET,
    { expiresIn: "1d" }
  );
  Object.assign(userInfo, { authorizationToken });
  ctx.status = 200;
  ctx.body = {
    code: 200,
    msg: "ok",
    data: userInfo,
  };
});

// lib/koa2-weixin-auth.js
const querystring = require("querystring");
const request = require("request");

const AccessToken = function (data) {
  if (!(this instanceof AccessToken)) {
    return new AccessToken(data);
  }
  this.data = data;
};

/*!
 * 檢查AccessToken是否有效，檢查規(guī)則為當前時間和過期時間進行對比
 *
 * Examples:
 * ```
 * token.isValid();
 * ```
 */
AccessToken.prototype.isValid = function () {
  return (
    !!this.data.session_key &&
    new Date().getTime() < this.data.create_at + this.data.expires_in * 1000
  );
};

/**
 * 根據(jù)appid和appsecret創(chuàng)建OAuth接口的構造函數(shù)
 * 如需跨進程跨機器進行操作，access token需要進行全局維護
 * 使用使用token的優(yōu)先級是：
 *
 * 1. 使用當前緩存的token對象
 * 2. 調(diào)用開發(fā)傳入的獲取token的異步方法，獲得token之后使用（并緩存它）。

 * Examples:
 * ```
 * var OAuth = require(&#39;oauth&#39;);
 * var api = new OAuth(&#39;appid&#39;, &#39;secret&#39;);
 * ```
 * @param {String} appid 在公眾平臺上申請得到的appid
 * @param {String} appsecret 在公眾平臺上申請得到的app secret
 */
const Auth = function (appid, appsecret) {
  this.appid = appid;
  this.appsecret = appsecret;
  this.store = {};

  this.getToken = function (openid) {
    return this.store[openid];
  };

  this.saveToken = function (openid, token) {
    this.store[openid] = token;
  };
};

/**
 * 獲取授權頁面的URL地址
 * @param {String} redirect 授權后要跳轉的地址
 * @param {String} state 開發(fā)者可提供的數(shù)據(jù)
 * @param {String} scope 作用范圍，值為snsapi_userinfo和snsapi_base，前者用于彈出，后者用于跳轉
 */
Auth.prototype.getAuthorizeURL = function (redirect_uri, scope, state) {
  return new Promise((resolve, reject) => {
    const url = "https://open.weixin.qq.com/connect/oauth2/authorize";
    let info = {
      appid: this.appid,
      redirect_uri: redirect_uri,
      scope: scope || "snsapi_base",
      state: state || "",
      response_type: "code",
    };
    resolve(url + "?" + querystring.stringify(info) + "#wechat_redirect");
  });
};

/*!
 * 處理token，更新過期時間
 */
Auth.prototype.processToken = function (data) {
  data.create_at = new Date().getTime();
  // 存儲token
  this.saveToken(data.openid, data);
  return AccessToken(data);
};

/**
 * 根據(jù)授權獲取到的code，換取access token和openid
 * 獲取openid之后，可以調(diào)用`wechat.API`來獲取更多信息
 * @param {String} code 授權獲取到的code
 */
Auth.prototype.getAccessToken = function (code) {
  return new Promise((resolve, reject) => {
    const url = "https://api.weixin.qq.com/sns/jscode2session";
    //由于此框架版本很久沒有更新了，此處地址發(fā)生了變化，需要修改為以上地址，不然會出現(xiàn)
    //41008錯誤。這也是沒有直接使用框架，引用本地使用的原因。
    // const url = "https://api.weixin.qq.com/sns/oauth2/access_token";
    const info = {
      appid: this.appid,
      secret: this.appsecret,
      js_code: code,
      grant_type: "authorization_code",
    };
    request.post(url, { form: info }, (err, res, body) => {
      if (err) {
        reject(err);
      } else {
        const data = JSON.parse(body);
        resolve(this.processToken(data));
      }
    });
  });
};

/**
 * 根據(jù)refresh token，刷新access token，調(diào)用getAccessToken后才有效
 * @param {String} refreshToken refreshToken
 */
Auth.prototype.refreshAccessToken = function (refreshToken) {
  return new Promise((resolve, reject) => {
    const url = "https://api.weixin.qq.com/sns/oauth2/refresh_token";
    var info = {
      appid: this.appid,
      grant_type: "refresh_token",
      refresh_token: refreshToken,
    };
    request.post(url, { form: info }, (err, res, body) => {
      if (err) {
        reject(err);
      } else {
        const data = JSON.parse(body);
        resolve(this.processToken(data));
      }
    });
  });
};

/**
 * 根據(jù)openid，獲取用戶信息。
 * 當access token無效時，自動通過refresh token獲取新的access token。然后再獲取用戶信息
 * @param {Object|String} options 傳入openid或者參見Options
 */
Auth.prototype.getUser = async function (openid) {
  const data = this.getToken(openid);
  console.log("getUser", data);
  if (!data) {
    var error = new Error(
      "No token for " + options.openid + ", please authorize first."
    );
    error.name = "NoOAuthTokenError";
    throw error;
  }
  const token = AccessToken(data);
  var accessToken;
  if (token.isValid()) {
    accessToken = token.data.session_key;
  } else {
    var newToken = await this.refreshAccessToken(token.data.refresh_token);
    accessToken = newToken.data.session_key;
  }
  console.log("accessToken", accessToken);
  return await this._getUser(openid, accessToken);
};

Auth.prototype._getUser = function (openid, accessToken, lang) {
  return new Promise((resolve, reject) => {
    const url = "https://api.weixin.qq.com/sns/userinfo";
    const info = {
      access_token: accessToken,
      openid: openid,
      lang: lang || "zh_CN",
    };
    request.post(url, { form: info }, (err, res, body) => {
      if (err) {
        reject(err);
      } else {
        resolve(JSON.parse(body));
      }
    });
  });
};

/**
 * 根據(jù)code，獲取用戶信息。
 * @param {String} code 授權獲取到的code
 */
Auth.prototype.getUserByCode = async function (code) {
  const token = await this.getAccessToken(code);
  return await this.getUser(token.data.openid);
};

module.exports = Auth;

Pelaksanaan kod log masuk program mini

<!--pages/index.wxml-->
<view class="page-section">
    <text class="page-section__title">微信登錄</text>
    <view class="btn-area">
        <button  bindtap="getUserProfile" type="primary">登錄</button>
    </view>
</view>

// pages/index.js
Page({
  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {},
  // 正確的登錄方式
  getUserProfile() {
    // 推薦使用wx.getUserProfile獲取用戶信息，開發(fā)者每次通過該接口獲取用戶個人信息均需用戶確認
    // 開發(fā)者妥善保管用戶快速填寫的頭像昵稱，避免重復彈窗
    wx.getUserProfile({
      desc: "用于完善會員資料", // 聲明獲取用戶個人信息后的用途，后續(xù)會展示在彈窗中，請謹慎填寫
      success: (res) => {
        let { userInfo, encryptedData, iv } = res;
        const requestLoginApi = (code) => {
          // 發(fā)起網(wǎng)絡請求
          wx.request({
            url: "http://localhost:3000/user/weixin-login",
            method: "POST",
            header: {
              "content-type": "application/json",
            },
            data: {
              code,
              userInfo,
              encryptedData,
              iv,
            },
            success(res) {
              console.log("請求成功", res.data);
              let token = res.data.data.authorizationToken;
              wx.setStorageSync("token", token);
              onUserLogin(token);
              console.log("authorization", token);
            },
            fail(err) {
              console.log("請求異常", err);
            },
          });
        };
        const onUserLogin = (token) => {
          getApp().globalData.token = token;
          wx.showToast({
            title: "登錄成功了",
          });
        };
        //必須進行session是否過期檢查，不然會出現(xiàn)第一次點擊登錄，服務器報Illegal Buffer
        //的錯誤，但是第二次點擊登錄正常。
        wx.checkSession({
          success: (res) => {
            // session_key 未過期，并且在本生命周期一直有效
            console.log("在登陸中");
            let token = wx.getStorageSync("token");
            if (token) onUserLogin(token);
          },
          fail: (res) => {
            // session_key已經(jīng)失效，需要重新執(zhí)行登錄流程
            wx.login({
              success(res0) {
                if (res0.code) {
                  requestLoginApi(res0.code);
                } else {
                  console.log("登錄失敗!" + res0.errMsg);
                }
              },
            });
          },
        });
      },
    });
  },
});

Apakah pengoptimuman yang boleh dilakukan untuk kod log masuk?

Untuk perisian, pada peringkat kod, adalah perlu untuk mengejar aspek yang paling asas (jauh lebih daripada ini, tetapi mari kita lakukan ini dengan baik dahulu):

• Kebolehselenggaraan (maintainability)

  Apa yang dipanggil "penyelenggaraan" tidak lebih daripada mengubah suai pepijat, mengubah suai kod lama dan menambah kod baharu. Apa yang dipanggil "kod mudah diselenggara" bermakna kod itu boleh diubah suai atau ditambah dengan cepat tanpa memusnahkan reka bentuk kod asal atau memperkenalkan pepijat baharu. Apa yang dipanggil "kod tidak mudah diselenggara" bermakna mengubah suai atau menambah kod memerlukan risiko besar untuk memperkenalkan pepijat baharu dan mengambil masa yang lama untuk diselesaikan.

• Kebolehbacaan

  Guru reka bentuk perisian Martin Fowler pernah berkata: "Mana-mana orang bodoh boleh menulis kod yang boleh difahami oleh komputer. Pengaturcara yang baik menulis kod yang boleh difahami oleh manusia." ke dalam bahasa Cina: "Mana-mana orang bodoh boleh menulis kod yang boleh difahami oleh komputer. Pengaturcara yang baik boleh menulis kod yang boleh difahami oleh manusia malah terdapat pensijilan dalam Google yang dipanggil Kebolehbacaan." Hanya jurutera yang telah memperoleh pensijilan ini layak untuk meluluskan orang lain untuk menyerahkan kod semasa semakan kod. Ia dapat dilihat betapa pentingnya kebolehbacaan kod itu Lagipun, bilangan kali kod dibaca jauh melebihi bilangan kali ia ditulis dan dilaksanakan. Kita perlu menyemak sama ada kod itu mematuhi piawaian pengekodan, sama ada penamaan itu bermakna, sama ada ulasan terperinci, sama ada panjang fungsi sesuai, sama ada pembahagian modul jelas, sama ada ia memenuhi kohesi tinggi dan gandingan rendah, dsb.

• Kebolehlanjutan (extensibility)

  Extensibility juga merupakan kriteria yang sangat penting untuk menilai kualiti kod. Kod ini menyimpan beberapa titik sambungan fungsi Anda boleh memasukkan kod fungsi baharu terus ke titik sambungan tanpa perlu bersusah payah dan menukar sejumlah besar kod asal hanya untuk menambah fungsi.

• Kebolehgunaan semula

  代碼的可復用性可以簡單地理解為，盡量減少重復代碼的編寫，復用已有的代碼。

那么接下來就來優(yōu)化一下代碼吧：

模塊化

可以把登錄的代碼模塊化，代碼如下：

// lib/login.js
function loginWithCallback(cb) {
  // 推薦使用wx.getUserProfile獲取用戶信息，開發(fā)者每次通過該接口獲取用戶個人信息均需用戶確認
  // 開發(fā)者妥善保管用戶快速填寫的頭像昵稱，避免重復彈窗
  wx.getUserProfile({
    desc: "用于完善會員資料", // 聲明獲取用戶個人信息后的用途，后續(xù)會展示在彈窗中，請謹慎填寫
    success: (res) => {
      let { userInfo, encryptedData, iv } = res;
      const requestLoginApi = (code) => {
        // 發(fā)起網(wǎng)絡請求
        wx.request({
          url: "http://localhost:3000/user/weixin-login",
          method: "POST",
          header: {
            "content-type": "application/json",
          },
          data: {
            code,
            userInfo,
            encryptedData,
            iv,
          },
          success(res) {
            console.log("請求成功", res.data);
            let token = res.data.data.authorizationToken;
            wx.setStorageSync("token", token);
            onUserLogin(token);
            console.log("authorization", token);
          },
          fail(err) {
            console.log("請求異常", err);
          },
        });
      };

      const onUserLogin = (token) => {
        getApp().globalData.token = token;
        wx.showToast({
          title: "登錄成功了",
        });
        if (cb && typeof cb == "function") cb(token);
      };
      wx.checkSession({
        success: (res) => {
          // session_key 未過期，并且在本生命周期一直有效
          console.log("在登陸中");
          let token = wx.getStorageSync("token");
          if (token) onUserLogin(token);
        },
        fail: (res) => {
          // session_key已經(jīng)失效，需要重新執(zhí)行登錄流程
          wx.login({
            success(res0) {
              if (res0.code) {
                requestLoginApi(res0.code);
              } else {
                console.log("登錄失敗!" + res0.errMsg);
              }
            },
          });
        },
      });
    },
  });
}

export default loginWithCallback;

Promise化

回調(diào)地獄問題，不利于代碼的閱讀，所以接下來我們基于Promise進行代碼優(yōu)化。有了 Promise 對象，就可以將異步操作以同步操作的流程表達出來，避免了層層嵌套的回調(diào)函數(shù)。此外，Promise 對象提供統(tǒng)一的接口，使得控制異步操作更加容易。

Promise的幾個方法簡介

小程序API接口Promise化并且把需要登錄的調(diào)用接口模塊化

1、安裝插件。請先查看npm支持文檔。

npm install --save miniprogram-api-promise

2、在微信開發(fā)者工具右方詳情中勾選使用npm模塊，并在菜單欄工具中點擊構建npm。

3、初始化代碼。

// app.js
import {promisifyAll} from 'miniprogram-api-promise'
import login from "../lib/login";
const wxp ={}
promisifyAll(wx,wxp)
// 需要token的請求統(tǒng)一處理登錄和設置header，并且處理錯誤信息
wxp.requestNeedLogin = async function (args) {
  let token = wx.getStorageSync("token");
  if (!token) {
    token = await loginWithPromise();
  }
  if (!args.header) args.header = {};
  args.header["Authorization"] = `Bearer ${token}`;
  return wxp.request(args).catch(console.error);
};
// app.js
App({
  wxp:wxp,
});

4、改寫login.js代碼

// lib/login.js
function login() {
  return new Promise((resolve, reject) => {
    // 推薦使用wx.getUserProfile獲取用戶信息，開發(fā)者每次通過該接口獲取用戶個人信息均需用戶確認
    // 開發(fā)者妥善保管用戶快速填寫的頭像昵稱，避免重復彈窗
    wx.getUserProfile({
      desc: "用于完善會員資料", // 聲明獲取用戶個人信息后的用途，后續(xù)會展示在彈窗中，請謹慎填寫
       success:async (res0) => {
        let {
          userInfo,
          encryptedData,
          iv
        } = res0;
        const app = getApp();
        try {
          app.wxp.checkSession();
        } catch (err) {
          reject(err);
        }
        let token = wx.getStorageSync("token");
        if (!token) {
          let res1 = await app.wxp.login().catch(err => reject(err));
          let code = res1.code;
          let res = await app.wxp.request({
            url: "http://localhost:3000/user/weixin-login",
            method: "POST",
            header: {
              "content-type": "application/json",
            },
            data: {
              code,
              userInfo,
              encryptedData,
              iv,
            }
          }).catch(err => reject(err));
          token = res.data.data.authorizationToken;
          wx.setStorageSync("token", token);
          app.globalData.token = token;
          wx.showToast({
            title: "登錄成功了",
          });
          resolve(token);
        }
      },
    });
  })
}

export default login;

5、調(diào)用代碼

<view class="container page-head">
  <text class="page-section__title">需要登錄的請求調(diào)用</text>
  <view class="btn-area">
    <button bindtap="request1" type="primary">請求1</button>
    <button bindtap="request2" type="primary">請求2</button>
  </view>
</view>

// pages/index.js
Page({
  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {},
  request1() {
    getApp().wxp.requestNeedLogin({
        url: "http://localhost:3000/user/home?name=andying",
      }).then(console.log)
  },
  request2() {
    getApp().wxp.requestNeedLogin({
        url: "http://localhost:3000/user/home?name=eva",
      }).then(console.log)
  },
});

【相關學習推薦：小程序開發(fā)教程】

Atas ialah kandungan terperinci Analisis ringkas tentang cara melaksanakan fungsi log masuk dalam program mini. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!