Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "how to achieve Mini Program login function in php". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

RequestTask description

The method indicates that RequestTask.abort () interrupts the request task. RequestTask.onHeadersReceived (function callback) listens for HTTP Response Header events. Will be earlier than the request to complete the event. RequestTask.offHeadersReceived (function callback) unlistens for HTTP Response Header events. RequestTask.onChunkReceived (function callback) listens for Transfer-Encoding ChunkReceived events. Triggered when a new chunk is received. RequestTask.offChunkReceived (function callback) unlistens for Transfer-Encoding ChunkReceived events.

Wx.request (Object object) attribute

Only the more commonly used properties are listed here. For all properties, please see the link.

Attribute type default value is required description urlstring

Is the developer server interface address datastring/object/ArrayBuffer

No requested parameter headerObject

No set Referer cannot be set in the requested header,header. Content-type defaults to application/jsontimeoutnumber

No timeout (in milliseconds) methodstringGET No HTTP request method successfunction

No API calls successful callback function failfunction

No API calls the failed callback function completefunction

No API calls the finished callback function (the call succeeds or fails), even if it is a request dropped by abort!

To sum up: all Mini Program interfaces basically have two characteristics:

The parameters are all one object. Easy to remember and expand at the same time.

All the results are handled in the same way: there are three callback attributes: success, fail and complete.

An introduction to errMsg objects in various cases executed by the interface.

Callback property errMsg object success {errMsg: "request:ok"} fail {errMsg: "request:fail".} some systems have a space after this fail, so to use this judgment, it is best to use regular expressions. You can also use the indexOf function, which is greater than-1 to determine. Abort {errMsg: "request:fail abort"...}

Sample code

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) / / since the request is not fully completed, we cannot get the requested status code, but we can judge it by the length of the returned requestBody. / / two points: 1. Two ~ ~ can quickly convert string numbers into numbers. / / 2. Why the value is less than 19 is due to the fact that the Content-length is "18" when the backend returns a requestBody without permission, which is normally greater than 19. So more or less depends on the specific situation. If (~ headers.header ["Content-length"]

< 19) reqTask.abort(); }; reqTask.onHeadersReceived(reqTaskOnHeadersReceived); 小程序登录接口 wx.getUserProfile(Object object) 获取用户信息。页面产生点击事件（例如 button 上 bindtap 的回调中）后才可调用，每次请求都会弹出授权窗口，用户同意后返回 userInfo。该接口用于替换 wx.getUserInfo，详见 用户信息接口调整说明。 wx.checkSession(Object object) 检查登录态是否过期。 通过 wx.login 接口获得的用户登录态拥有一定的时效性。用户越久未使用小程序，用户登录态越有可能失效。反之如果用户一直在使用小程序，则用户登录态一直保持有效。具体时效逻辑由微信维护，对开发者透明。开发者只需要调用 wx.checkSession 接口检测当前用户登录态是否有效。 登录态过期后开发者可以再调用 wx.login 获取新的用户登录态。调用成功说明当前 session_key 未过期，调用失败说明 session_key 已过期。更多使用方法详见 小程序登录。 wx.login(Object object) 调用接口获取登录凭证（code）。通过凭证进而换取用户登录态信息，包括用户在当前小程序的唯一标识（openid）、微信开放平台帐号下的唯一标识（unionid，若当前小程序已绑定到微信开放平台帐号）及本次登录的会话密钥（session_key）等。用户数据的加解密通讯需要依赖会话密钥完成。更多使用方法详见 小程序登录。 后端登录接口代码实现 后端使用NodeJS，web框架KOA版本^2.13.4，路由框架@koa/router版本^10.1.1，框架request，版本 ^2.88.2，jsonwebtoken用来加密解密token信息，版本^8.5.1 // app.jsconst 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",});// 这是正规的登陆方法// 添加一个参数，sessionKeyIsValid，代表sessionKey是否还有效router.post("/weixin-login", async (ctx) =>

{let {code, userInfo, encryptedData, iv, sessionKeyIsValid} = ctx.request.body; / / parse openid const token = await weixinAuth.getAccessToken (code); userInfo.openid = token.data.openid; / / you can handle it yourself, such as recording to a database, dealing with token, etc. 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.jsconst querystring = require ("querystring"); const request = require ("request"); const AccessToken = function (data) {if (! (this instanceof AccessToken)) {return new AccessToken (data);} this.data = data;} / *! * check whether AccessToken is valid, and compare the current time with the expiration time * * Examples: * ```* token.isValid (); *``` * / AccessToken.prototype.isValid = function () {return (! this.data.session_key & & new Date (). GetTime ())

< this.data.create_at + this.data.expires_in * 1000 );};/** * 根据appid和appsecret创建OAuth接口的构造函数 * 如需跨进程跨机器进行操作，access token需要进行全局维护 * 使用使用token的优先级是： * * 1. 使用当前缓存的token对象 * 2. 调用开发传入的获取token的异步方法，获得token之后使用（并缓存它）。 * Examples: * ``` * var OAuth = require('oauth'); * var api = new OAuth('appid', 'secret'); * ``` * @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 开发者可提供的数据 * @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/oauth3/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");});} / *! * handle token, update expiration time * / Auth.prototype.processToken = function (data) {data.create_at = new Date (). GetTime (); / / Storage token this.saveToken (data.openid, data); return AccessToken (data);} / * code obtained by authorization in exchange for access token and openid * after obtaining openid, you can call `wechat.API` to obtain more information * @ param {String} code * / Auth.prototype.getAccessToken = function (code) {return new Promise ((resolve, reject) = > {const url = "https://api.weixin.qq.com/sns/jscode2session";" obtained by authorization. / / since the version of this framework has not been updated for a long time, the address here has changed and needs to be changed to the above address, otherwise a / / 41008 error will occur. This is also the reason why you do not use the framework directly and refer to local use. / / const url = "https://api.weixin.qq.com/sns/oauth3/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));}});});} / * * refresh access token according to refresh token, and it is valid only after calling getAccessToken * @ param {String} refreshToken refreshToken * / Auth.prototype.refreshAccessToken = function (refreshToken) {return new Promise ((resolve, reject) = > {const url = "https://api.weixin.qq.com/sns/oauth3/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);}});});}; / * * obtain user information according to openid. * when the access token is invalid, the new access token is automatically obtained through refresh token. Then get user information * @ param {Object | String} options input openid or see 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));}});};}; / * * obtain user information according to code. * @ param {String} code obtained by code license * / Auth.prototype.getUserByCode = async function (code) {const token = await this.getAccessToken (code); return await this.getUser (token.data.openid);}; module.exports = Auth

Implementation of login code on Mini Program

Wechat login / / pages/index.jsPage (initial data of {/ * page * / data: {}, / / correct login method getUserProfile () {/ / it is recommended to use wx.getUserProfile to obtain user information Every time the developer obtains the user's personal information through this interface, the developer needs the user to confirm / / the developer should take good care of the avatar nickname quickly filled in by the user, and avoid repeating the pop-up window wx.getUserProfile ({desc: "used to improve the member profile", / / declare the use after obtaining the user's personal information, which will be displayed in the pop-up window later. Please fill in success: (res) = > {let {userInfo, encryptedData, iv} = res carefully Const requestLoginApi = (code) = > {/ / initiate network request 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 ("request successful", res.data) Let token = res.data.data.authorizationToken; wx.setStorageSync ("token", token); onUserLogin (token); console.log ("authorization", token);}, fail (err) {console.log ("request exception", err);},}) Const onUserLogin = (token) = > {getApp (). GlobalData.token = token; wx.showToast ({title: "login succeeded",}); / / you must check whether session expires, otherwise there will be an error that the first click on login and the server reports Illegal Buffer / /, but the second click on login is normal. Wx.checkSession ({success: (res) = > {/ / session_key is not expired and has been valid for the current life cycle console.log ("in login"); let token = wx.getStorageSync ("token"); if (token) onUserLogin (token) }, fail: (res) = > {/ / session_key has expired and the login process wx.login ({success (res0) {if (res0.code) {requestLoginApi (res0.code)) needs to be re-executed. } else {console.log ("login failed!" + res0.errMsg);}},});},})

What optimizations can be made for the login code?

For a software, as far as the code level is concerned, you need to pursue the most basic aspects (much more than that, but let's do these first):

Maintainability (maintainability)

The so-called "maintenance" is nothing more than to modify the bug, modify the old code, add new code and so on. The so-called "code easy to maintain" means that the code can be quickly modified or added without destroying the original code design and introducing a new bug. The so-called "code is not easy to maintain" means that modifying or adding code takes a great risk of introducing a new bug and takes a long time to complete.

Readability (readability)

Martin Fowler, a master software designer, once said, "Any fool can write code that a computer can understand. Good programmers write code that humans can understand." Any fool can write code that a computer can understand. A good programmer can write code that people can understand. " There is even a special certification inside Google called Readability. Only the engineer who has obtained this certification is qualified to approve the submission of code at the time of code review. You can see how important the readability of the code is. After all, the code has been read far more times than it has been written and executed. We need to see whether the code conforms to the coding specification, whether the naming is satisfactory, whether the comments are detailed, whether the function length is appropriate, whether the module division is clear, whether it conforms to high cohesion and low coupling, and so on.

Scalability (extensibility)

Scalability is also a very important criterion for evaluating code quality. Some function extension points are reserved in the code, and you can insert the new function code directly into the extension point, without having to make a lot of changes to the original code in order to add a function.

Reusability (reusability)

The reusability of code can be simply understood as minimizing the writing of repetitive code and reusing existing code.

So let's optimize the code next:

Modularization

You can modularize the login code as follows:

/ / lib/login.jsfunction loginWithCallback (cb) {/ / it is recommended to use wx.getUserProfile to obtain user information. Every time developers obtain users' personal information through this API, developers need to confirm / / developers should take good care of the avatar nicknames quickly filled in by users, avoid repeated pop-up window wx.getUserProfile ({desc: "used to improve members' information", / / declare the use after obtaining users' personal information. The following will be displayed in the pop-up window. Please fill in success: (res) = > {let {userInfo, encryptedData, iv} = res carefully. Const requestLoginApi = (code) = > {/ / initiate network request 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 ("request successful", res.data) Let token = res.data.data.authorizationToken; wx.setStorageSync ("token", token); onUserLogin (token); console.log ("authorization", token);}, fail (err) {console.log ("request exception", err);},}) Const onUserLogin = (token) = > {getApp (). GlobalData.token = token; wx.showToast ({title: "login succeeded",}); if (cb & & typeof cb = = "function") cb (token);} Wx.checkSession ({success: (res) = > {/ / session_key is not expired and has been valid for the current life cycle console.log ("in login"); let token = wx.getStorageSync ("token"); if (token) onUserLogin (token) }, fail: (res) = > {/ / session_key has expired and needs to re-execute the login process wx.login ({success (res0) {if (res0.code) {requestLoginApi (res0.code);} else {console.log ("login failed!" + res0.errMsg) },});} export default loginWithCallback

Promise

Recall the hell problem, which is not conducive to code reading, so let's optimize the code based on Promise. With the Promise object, asynchronous operations can be expressed as a flow of synchronous operations, avoiding layers of nested callback functions. In addition, the Promise object provides a unified interface that makes it easier to control asynchronous operations.

Brief introduction of several methods of Promise

The method name indicates that the Promise.prototype.then method returns a new Promise object, so it can be chained. This design allows nested asynchronous operations to be easily rewritten from "horizontal development" to "downward development" of callback functions. Promise.prototype.catch is an alias for Promise.prototype.then (null, rejection) to specify the callback function when an error occurs. Errors in the Promise object are bubbling in nature and are passed backwards until they are caught. That is, the error is always caught by the next catch statement. The Promise.prototype.finally method returns a Promise. At the end of the promise, the specified callback function is executed regardless of whether the result is fulfilled or rejected. This provides a way to execute code that needs to be executed after the Promise completes successfully or not. Promise.all this avoids the need to write the same statement once in then () and catch (). The Promise.all method is used to wrap multiple Promise instances into a new Promise instance. The Promise.all method takes an array as a parameter, var p = Promise.all ([p1Magazine p2recoverp3]); p1, p2, and p3 are all instances of Promise objects. The argument to the Promise.all method is not necessarily an array, but it must have an iterator interface, and each member returned is an instance of Promise. ) the state of p is determined by p1, p2, and p3, and is divided into two cases. (1) only when the states of p1, p2 and p3 become fulfilled,p will they become fulfilled. At this time, the return values of p1, p2 and p3 form an array and are passed to the callback function of p. (2) as long as one of p1, p2, and p3 becomes rejected, the return value of the first instance being reject will be passed to the callback function of p. The Promise.racePromise.race method also wraps multiple Promise instances into a new Promise instance. Var p = Promise.race ([p1, p2, p3]); in the above code, as long as one instance of p1, p2, and p3 changes the state first, the state of p changes accordingly. The return value of the Promise instance that first changed is passed to the return value of p. Promise.any receives an Promise iterable object and returns the promise that has succeeded as long as one of the promise succeeds. All child instances are in the rejected state, and the total promise is in the rejected state. Promise.allSettled returns a promise after all given promise have been fulfilled or rejected, with an array of objects, each representing the corresponding promise result. By contrast, Promise.all () is better suited to depend on each other or end immediately in any of these reject.

Mini Program API interface promise and modularize the calling interface that needs to be logged in

1. Install the plug-in. Please check the npm support documentation first.

Npm install-save miniprogram-api-promise

2. Check the use npm module in the details on the right side of Wechat developer tools, and click build npm in the menu bar tool.

3. Initialization code.

/ / app.jsimport {promisifyAll} from 'miniprogram-api-promise'import login from ".. / lib/login"; const wxp = {} promisifyAll (wx,wxp) / / requests requiring token handle login and setting header uniformly, and handle the error message 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.jsApp ({wxp:wxp,})

4. Rewrite login.js code

/ / lib/login.jsfunction login () {return new Promise ((resolve, reject) = > {/ / it is recommended to use wx.getUserProfile to obtain user information. Every time a developer acquires a user's personal information through this API, the developer needs the user to confirm / / the developer takes good care of the avatar nickname quickly filled in by the user. Avoid repeated pop-up window wx.getUserProfile ({desc: "used to improve the member profile", / / declare the use after obtaining the user's personal information, which will be displayed in the pop-up window later. Please fill in success:async (res0) = > {let {userInfo, encryptedData, iv} = res0 carefully. 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: "login succeeded",}); resolve (token);}},});} export default login

5. Calling code

Request for login call request 1 request 2 / / pages/index.jsPage (initial data of {/ * page * / 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)},}) This is the end of the content of "how to achieve Mini Program login function in php". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.