In a wechat related business management system , Sometimes we need to bind with the user's wechat account information , For official account number 、 Enterprise wechat and other accounts are bound to specific system users , Can scan code login 、 Wechat information sending and other operations , User binding is mainly to record official account users. openid Or enterprise wechat userid, That can be done through wechat API Interface , Sending system messages or business messages .
1、 Binding processing of system user interface
1） Official account and system user binding
We bind users , You can bind related information in the system user management interface , You can also provide entry binding in the view current user interface .
Bind in the list interface of user management interface , The interface is as follows .
Binding operation above , We can show it according to the condition , The binding code of official account is shown below. .
<el-table-column align="center" label=" Bind official account " width="120"> <template scope="scope"> <el-row> <el-button-group v-if="scope.row.openId != ''"> {{scope.row.subscribeWechat}} <el-tooltip effect="light" content=" Click to unbind " placement="top-start"> <el-button icon="el-icon-remove-outline" type="warning" size="mini" @click="CancelBindWechat(scope.row.id)"> </el-button> </el-tooltip> </el-button-group> <el-button-group v-else> <el-tooltip effect="light" content=" Click to bind QR code " placement="top-start"> <el-button type="success" circle size="mini" @click="BindQRCode(scope.row.id)"> <v-icon name="qrcode" style="color:#409EFF;" /> </el-button> </el-tooltip> <el-tooltip effect="light" content=" Click on the official account. " placement="top-start"> <el-button type="primary" circle size="mini" @click="BindWechat(scope.row.id)"> <v-icon name="user-tag" style="color:#2A3036;" /> </el-button> </el-tooltip> </el-button-group> </el-row> </template> </el-table-column>
We judge scope.row.openId Is it not empty? , Determine whether to bind or display the Cancel button . And the bound operation , It is to display the official account number and the user interface operation. .
BindWechat (id) { // Bind WeChat account
this.bindForm.id = id
this.bindForm.type = 0
// var param = { id: id, openid: openid, nickname: nickname }
var tags = []
this.$refs.tagUserSelect.show(tags)
},
Enterprise wechat binding is also a similar code .
<el-table-column align="center" label=" Binding enterprise wechat " width="140"> <template scope="scope"> <el-row> <el-button-group v-if="scope.row.corpUserId != ''"> {{scope.row.corpUserId}} <el-tooltip effect="light" content=" Click to unbind " placement="top-start"> <el-button icon="el-icon-remove-outline" type="warning" size="mini" @click="UnBindCorpUser(scope.row.id)"> </el-button> </el-tooltip> </el-button-group> <el-button-group v-else> <el-tooltip effect="light" content=" Click to bind enterprise wechat " placement="top-start"> <el-button icon="el-icon-user-solid" type="primary" circle size="mini" @click="BindCorpUser(scope.row.id)" /> </el-tooltip> </el-button-group> </el-row> </template> </el-table-column>
The above is the binding of WeChat official account. / Unbind , Or the scan code binding of official account. ; Binding of enterprise wechat / Unbind operation .
The official account binding interface is shown below. .
The above operation is to call the code this.$refs.tagUserSelect.show(tags) Realized , User choice of official account , We need to use it in a lot of places , This is defined as the way user interface components are used . For example, official account and enterprise WeChat , They are all handled by reusable user components .
The user interface of the official account is based on the official account number. , Get the corresponding subscriber information , In order to bind to the corresponding system user , Establish a one-to-one correspondence .
If you select a specific subscriber and confirm , The system records their relationship , Then it's shown in the list .
For bound users , Of course, we can also cancel the one-to-one correspondence . Before canceling, we need to confirm the user's choice .
2） System scan code binding
In today's many websites , They all use the wechat open platform's code scanning login authentication processing , This is equivalent to giving identity authentication to a more authoritative third party for authentication , There is no need to store the user's password in the application website .
On the QR code connection of user list , Click to bind wechat scanning code to users , In this way, users can scan the code to log in directly , No need to enter account password . Scan code binding is shown in the following interface .
The processing code of scan code binding is as follows , It's showing the QR code , QR code is a URL Connected
<el-dialog title=" Wechat scan code binding " :visible="isBindCode" width="400px" :modal-append-to-body="false" @close="closeDialog"> <div> <!-- <el-image style="width: 100px; height: 100px" :src="url" fit="fill"></el-image> --> <!-- <barcode v-if="viewForm.BarCode" :value="viewForm.BarCode" :options="{ width:100,height:50,background:'rgba(255,255,255,.0)'}" /> --> <qrcode v-if="qrcode" :value="qrcode" :options="{ width:300,background:'rgba(255,255,255,.0)'}" /> </div> <div slot="footer" class="dialog-footer"> <el-button type="success" @click="closeDialog"> close </el-button> </div> </el-dialog>
For example, for bar code and two-dimensional code , I use @chenfengyuan/vue-barcode and @chenfengyuan/vue-qrcode, Generally in Github Search up and down , You can always find some popular third-party components .
There are specific instructions for installing these components , As shown below ( If uninstall , Directly modifying install by uninstall that will do ）.
npm install @chenfengyuan/vue-barcode vue
as well as
npm install @chenfengyuan/vue-qrcode vue
The display effect of barcode and QR code is as follows
therefore , Display the operation of QR code dialog box , Just copy it to the corresponding attribute , And display the dialog box .
BindQRCode (id) { // Bind QR code , It is used to scan code and log in
this.qrcode = `http://www.iqidi.com/h5/BindWechat?id=${id}`
this.isBindCode = true
},
Once the user wechat is successfully bound , On the wechat side, you will locate a page that has been successfully bound （ Self defined H5 page ）, As shown below .
If a user has already bound one of them, then scan the code to bind other users , Then the user will be prompted to avoid being unable to bind the account repeatedly .
If the user has already bound the QR code , You can unbind in the management interface , This can unbind the association between user accounts and wechat .
Unbound Vue The script processing code is as follows , Call the back end API Just do data processing .
CancelBindWechat (id) {// Unbind wechat account
var tips = " Are you sure to unbind wechat account ？"
this.msgConfirm(tips).then(() => {
var param = {
id: id
}
user.CancelBindWechat(param).then(data => { // Official account binding
// console.log(data.result)
if (data.success) {
// Prompt information
this.msgSuccess(' Successful operation !')
this.getlist()
} else {
this.msgError(' Unbind failed ：' + data.error)
}
})
})
},
3） Enterprise wechat binding
occasionally , We can send messages through wechat , Or process relevant business information , As in the previous essay 《 In wechat framework module , be based on Vue&Element front end , By dynamically building voting options , Achieve radio 、 The voting operation of the check box 》 Sending voting information , You can also give the official account at the same time. 、 Enterprise wechat sends voting information , Push to specific users .
So it is necessary to record the information of enterprise wechat account at the same time .
In the user list interface of the system , We also provide the operation of binding enterprise wechat account .
Same as the official account in front. , Our pop-up dialog is also implemented as a user component
When calling the display, you can handle it .
BindCorpUser (id) {// Binding enterprise wechat
this.bindForm.id = id
this.bindForm.type = 1
var tags = []
this.$refs.corpTagUserSelect.show(tags)
},
If after binding , Unbind required , Just confirm the user's choice .
The operation code is as follows .
UnBindCorpUser (id) { // Unbound enterprise wechat
var tips = " Are you sure to unbind enterprise wechat ?"
this.msgConfirm(tips).then(() => {
var param = {
id: id,
corpUserId: ''
}
user.BindCorpUser(param).then(data => {
// console.log(data.result)
if (data.success) {
// Prompt information
this.msgSuccess(' Successful operation !')
this.getlist()
} else {
this.msgError(' Unbind failed ：' + data.error)
}
})
})
},
That's what we did in the back end management interface , be based on Vue&Element The user binding process of WeChat official account and enterprise WeChat at the front end .