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

This article mainly introduces "how to achieve login authorization for the new version of Mini Program". In daily operation, I believe many people have doubts about how to achieve login authorization for the new version of Mini Program. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts of "how to achieve login authorization for the new version of Mini Program". Next, please follow the editor to study!

Comparison between the old and the new:

The old method: the old method wx.getUserInfo according to the user login, pop-up window that requires authorization, the user can click authorization to use.

New method: the flexible use of Open-data does not allow you to get user information directly, but Mini Program clicks the login button to get the user profile picture, which is to use the button component and specify open-type as the getUserInfo type to get the basic user information.

The logic of authorized login refers to multiple Mini Program, hoping to find the optimal mode. The following will explain the whole process in detail with the code.

Model overview

As a result of WeChat Mini Programs's revision, the login method of direct pop-up authorization will no longer be supported, including the wx.getUserInfo interface and the introduction of scope= "scope.userInfo" into the wx.authorize interface. Therefore, it is necessary to redesign an appropriate login authorization process. The overall process is as follows:

Active login

Because some pages in APP need to be logged in by default, such as the "personal Center" page, you need to log in to obtain user information before you can continue. Such a page needs to determine whether it is authorized each time you enter the page (onShow).

Profile page

OnShow () {login (()) = > {do something... })}

The logic related to login authorization can be encapsulated in handleLogin.js

HandleLogin.js

/ / start loginfunction login (callback) {wx.showLoading () wx.login ({success (res) {if (res.code) {/ / login successfully, get user information getUserInfo (res.code, callback)} else {/ / otherwise pop-up display ShowToast needs to encapsulate showToast ()}}, fail () {showToast ()})} / / obtain user information function getUserInfo (code, callback) {wx.getUserInfo ({/ / obtained successfully) and store user information globally Developer server login success (res) {/ / global storage user information store.commit ('storeUpdateWxUser', res.userInfo) postLogin (code, res.iv, res.encryptedData, callback)}, / / failed to obtain, pop-up window prompts one-click login fail () {wx.hideLoading () / / failed to obtain user information, clear the login status of the global storage The pop-up window prompts you to log in / / use token to manage the login state, and clearly store the global token / / use cookie to manage the login state, you can make it clear that the variable store.commit ('storeUpdateToken',') / / managed by the global login status cannot obtain user information, indicating that the user is not authorized or revoked. The pop-up window prompts you to log in with one click, and later you will talk about showLoginModal ()} / / the developer server logs in to function postLogin (code, iv, encryptedData, callback) {let params = {code: code, iv: iv, encryptedData: encryptedData} request (apiUrl.postLogin, params, 'post'). Then ((res) = > {if (res.code = = 1) {wx.hideLoading () / login successfully, / / use token to manage login status Store the global token, which is used to determine the login state. / / if you use cookie to manage the login state, you can store any variable as the login status store.commit ('storeUpdateToken', res.data.token) callback & & callback ()} else {showToast ()}). Catch ((err) = > {showToast ()})} / / displays the toast pop-up window function showToast (content =' login failed Please try again later') {wx.showToast ({title: content, icon: 'none'})}

At this point, the login is complete. Whether you use token or cookie, you can have a normal login state, and you can perform subsequent operations.

The whole process is wx.login = > wx.getUserInfo = > developer server login to postLogin.

Call interface

Some pages do not require login by default, but some user action events require login status, so one can determine the globally stored login status management variables. if it is false, you can directly prompt you to log in with one click. If the global status is true, call the API to see whether the code returned by the API is not logged in (generally speaking, the login status expires). If you do not log in, you will also be prompted to log in with one button.

A page (user actions to be logged in)

GetPlayer () {/ / determine whether there is a login status globally If there is no direct pop-up prompt to log in isLogin (()) > {let params = {token: this.token} request (apiUrl.getPlayer, params). Then ((res) = > {/ / TODO: delete print if (res.code = 1) {store.commit ('storeUpdateUser', res.data.player_info)} else {/ / failed, if code is not logged in Then log in, and then execute the callback function this.getPlayer / / if code is not unlogged in, directly pop-up window to report the error message handleError (res, this.getPlayer)}}) .catch ((err) = > {handleError (err)}

HandleLogin.js

/ / determine whether to log in to function isLogin (callback) {let token = store.state.token if (token) {/ / if there is a globally stored login state, temporarily assume that he is the login status callback & & callback ()} else {/ / if there is no login state, the pop-up window prompts you to click login showLoginModal ()}} / / API call failed processing Function handleError (res, callback) {/ / stipulate-3041 and-3042 represent failure if (res.code = =-3041 | | res.code = =-3042) {/ / pop-up window prompts one-click login showLoginModal ()} else if (res.msg) {/ / display error message showToast (res.msg)}}

At this point, the user actions that need to log in can be handled. If the global login status variable is true, call the API first and process it according to whether the returned information is not logged in.

Pop-up window prompt

Since the scope in wx.getUserInfo and wx.authorize authorized by WeChat Mini Programs is "scope.userInfo", calling these two API in the new version will not trigger the pop-up authorization window actively. A method is required.

The showLoginModal that appears in many places in the above code is used to display one-click login. As follows:

HandleLogin.js

/ / display the one-click login pop-up window function showLoginModal () {wx.showModal ({title: 'prompt', content: 'you are not logged in yet, you can get a complete experience after login', confirmText: 'one-click login', success (res) {/ / click to log in Go to the authorization page if (res.confirm) {wx.navigateTo ({url: 'authorization login page address',})}})}

About authorized login, we have done a special page processing, where the button is Wechat login. As follows:

GetUserInfo (e) {if (e.target.userInfo) {/ / Click Button pop-up window authorization. If authorized, execute login / / because there is a wx.getUserInfo in the Login process, then you can get login (() = > {/ / after login is successful, return wx.navigateBack ()})}} so far, the study on "how to implement login authorization for the new Mini Program" ends. I hope I can solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.