Use abp Zero builds a third-party login module (4): wechat applet development

​ Briefly review the process of wechat applet ：

1. The user enters the authentication page of the applet by scanning the code , Update status to ACCESSED Scanned code
2. The user clicks confirm Authorization , Wechat through wx.login() Interface to obtain the necessary information of the third party login ：Code Login credentials .

Wechat applet mainly provides interactive functions for user authorization , The user scans the code , Provide an interaction UI, as follows ：

​

stay Use Abp.Zero Build a third-party login module （ Two ）： Server development - Lin Xiao lx - Blog Garden (cnblogs.com) The interface that the server has built is introduced in , This time we will call Access and Authenticate, Call respectively to complete the update of scanned code and authorized status .

Project structures,

  use first vue-cli Create a web project , Name it mp-weixin

vue create -p dcloudio/uni-preset-vue mp-weixin

  stay Pages Create login/index.vue page , As the login authorization page

The directory structure is as follows ：

​

pages.json：

{
	"pages": [ //pages The first item in the array represents the application startup page , Reference resources ：https://uniapp.dcloud.io/collocation/pages { "path": "pages/index/index", "style": { "navigationBarTitleText": "uni-app" } }, { "path": "pages/login/index", "style": { "navigationBarTitleText": " Authorization page " } } ], "globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "uni-app", "navigationBarBackgroundColor": "#F8F8F8", "backgroundColor": "#F8F8F8" } } 

 login New under the directory ajaxRequire.ts, establish request object , This object will utilize uni-axios-ts Library send ajax request

import axios from 'uni-axios-ts' // Send network request  export const request = async (url: string, methods, data: any, onProgress?: (e) => void, cancelToken?) => { let token = null let timeout = 3000; if (cancelToken) { token = cancelToken.token timeout = 0; } const service = axios.create() service.interceptors.request.use( (config) => { config.header['Content-Type'] = "application/json" return config }, (error) => { Promise.reject(error) } ) const re = await service.request({ headers: { 'Content-Type': 'multipart/form-data' }, url: url, method: methods, data: data, cancelToken: token, timeout: timeout, onUploadProgress: function (progressEvent) { // The event that gets the upload progress  if (progressEvent.lengthComputable) { if (onProgress) { onProgress(progressEvent); } } }, }) return re as any; } /// Get cancellation token  export const getCancelToken = () => { const source = axios.CancelToken.source(); return source; } 

index.vue Created in loginExternalForms As a parameter transfer object

export default { data() { return { loginExternalForms: { WeChat: { token: "", providerAccessCode: "", }, } }; } }

onLoad Function ,option Stored in the scanning applet code scene Parameters , take scene The parameter is assigned to token Variable

 onLoad(option) { this.loginExternalForms.WeChat.token = option.scene; this.start(); },

start In, we call Access Interface , Change status to ACCESSED（ Scanned code ） , If the return is successful , Then prompt the user to click confirm authorization , If the returned result is abnormal "WechatMiniProgramLoginInvalidToken" when , Indicates that the applet code has expired at this time , You need to update the applet code on the webpage .

    async start() { var currentForms = this.loginExternalForms["WeChat"]; this.loading = true; await request(`${this.prefix}/MiniProgram/Access`, "post", currentForms) .then((re) => { this.successMessage(" You have scanned the QR code , Please click confirm login to complete "); }) .catch((c) => { var err = c.response?.data?.error?.message; if (err != null) { if (err == "WechatMiniProgramLoginInvalidToken") { this.isInvalid = true; } else { this.errorMessage(c.err); } } }) .finally(() => { setTimeout(() => { this.loading = false; }, 1.5 * 1000); }); },

Prefix Is your service address prefix

prefix: "https://localhost:44311/api/services/app"

stay Html in , We create authorized login and Cancel buttons , Only when the isInvalid by true You can click authorize

      <button @click="handleWxLogin" :disabled="isInvalid || loading" class="sub-btn" >  Authorized login  </button> <button @click="cancelWxLogin" :disabled="loading" class="sub-btn">  Cancel  </button>

establish  handleExternalLogin It is used to process the logic after the user clicks the authorization to log in , call Authenticate Interface , Update status to AUTHORIZED（ Authorized ） You need to call before that uni.login Get applet login credentials code.

of uni.login function , Please refer to the official documentation uni.login(OBJECT) | uni-app Official website (dcloud.io)

uniapp Support a variety of applets , In order to retain certain expansion capability ,handleExternalLogin We keep parameters in the function authProvider, Wechat applet login has been implemented handleWxLogin Pass parameters when a function is called "WeChat",

    async handleExternalLogin(authProvider) { var currentForms = this.loginExternalForms[authProvider]; this.loading = true; await request( `${this.prefix}/MiniProgram/Authenticate`, "post", currentForms ) .then((re) => { uni.redirectTo({ url: "/pages/index/index", }); }) .catch((c) => { var err = c.response?.data?.error?.message; if (err != null) { if (err == "WechatMiniProgramLoginInvalidToken") { this.isInvalid = true; } else { this.errorMessage(c.err); } } setTimeout(() => { this.loading = false; }, 1.5 * 1000); }); }, async handleWxLogin() { const that = this; uni.login({ provider: "weixin", success: (loginRes) => { that.loginExternalForms.WeChat.providerAccessCode = loginRes.code; that.handleExternalLogin("WeChat"); }, }); },

Create the unregister function

    cancelWxLogin() { uni.redirectTo({ url: "/pages/index/index", }); },

Execute the success notification function

    successMessage(value = " Successful implementation ") { uni.showToast({ title: value, icon: "success", duration: 1.5 * 1000, }); },

Next, simply write an interface ,

The interface will clearly reflect isInvalid And loading Corresponding to UI Interaction ：

normal

​

Applet code is out of date  

​

Overall test

Simulator test

When I open the page , Save image as

 ​

  In wechat applet debugging tool ,“ Through two-dimensional code compilation ”

​

  Wait for the mobile interface to display the authorization page and click “ Authorized login ”：

 ​

 GetCurrentUser The interface returns the correct data , And displayed on web On the page

 ​

 

So far, the development of the applet side has been completed

Project address

jevonsflash/abp-mp-auth (github.com)

 

Conclusion

Applet login has certain scalability , Although wechat applet login is introduced throughout , But login authentication is an abstract function of applet ,uniapp Integrated with various platforms （ WeChat 、 Alipay 、 Baidu 、 Bytedance applet ） Login interface , adopt uni.login You can get the code

​