# Preface
This tutorial is based on the "apifm-wxapi" module and teaches you how to quickly implement small program development, so you may need to understand the following knowledge points first:
["Creating HelloWorld Project"](https://www.yuque.com/apifm/doc/hezlrm)
["Use "apifm-wxapi" to quickly develop small programs"](https://www.yuque.com/apifm/doc/mdldsd)
["Register for free to open the backend and obtain an exclusive domain name"](https://www.yuque.com/apifm/doc/qr6l4m)
# Function description
There are many usage scenarios for graphic verification codes. In many situations where security is a concern, graphic verification codes need to be used to block automated and batch operations of robots;
This example demonstrates 2 simple function points:
1. The graphical verification code is displayed on the mini program, click to change the verification code image;
2. Enter the verification code recognized by human eyes, and then determine whether the verification code entered by the user is consistent with what is displayed on the picture.
# Effect demonstration
## wxml code
```plain```
## js code
```plain
const WXAPI = require('apifm-wxapi')
WXAPI.init('gooking')
Page({
data: {
key: Math.random(),
picurl: undefined,
code: undefined
},
onLoad: function (options) {
},
onShow: function () {
this.changePic()
},
changePic(){
const _key = Math.random()
this.setData({
code: null,
key: _key,
picurl: WXAPI.graphValidateCodeUrl(_key)
})
},
codeChange(e){
this.setData({
code: e.detail.value
})
},
check() {
if (!this.data.code){
wx.showToast({
title: 'Verification code cannot be empty',
icon: 'none'
})
return
}
WXAPI.graphValidateCodeCheck(this.data.key, this.data.code).then(res => {
console.log(res)
if (res.code == 0) {
wx.showToast({
title: 'Enter correctly',
icon: 'success'
})
} else {
wx.showToast({
title: res.msg,
icon: 'none'
})
this.changePic()
}
})
}
})
```
> WXAPI.init('gooking') This code links your mini program to your backend, where gooking is your exclusive domain name (please check the chapter about exclusive domain names in the preface);
>
# Summary
This case mainly uses the following two methods of apifm-wxapi:
```plain
WXAPI.graphValidateCodeUrl(key)
WXAPI.graphValidateCodeCheck(key, code)
```
_More usage methods about apifm-wxapi: _
["apifm-wxapi Instructions for Use"](https://github.com/gooking/apifm-wxapi/blob/master/instructions.md)
_Download the Demo code of this case: _
["apifm-wxapi using Demo program"](https://github.com/gooking/apifm-wxapi-demo)
Looking forward to your progress!
grateful!