process:
1. Configure WeChat-related configuration information on the WeChat open platform.
The important thing is to configure the path of the return jump.
2. Configure the configuration code for WeChat authorized login in the code.
There are two methods here.
1. Use the api interface provided by WeChat to generate a QR code picture on the current page. After the user scans the code, jump to the middle page of WeChat authorization login to determine the status of WeChat return, whether it is registered or not register.
2. Open a new page to generate a QR code picture. After scanning the code successfully, it will jump back to the original login page.
How to generate a QR code
The front end gets the parameters returned by the back end and configures them in the wxlogin component to successfully get the QR code picture.
Or directly open the messge information returned by the backend to get the QR code picture.
The premise of the above is to configure the url address of the return of the WeChat open platform. Otherwise, the picture will not be generated, and a parameter configuration error will be displayed.
Vue WeChat login method:
Introduce vue-wxlogin
npm install vue-wxlogin --save-dev
method one:
<wxlogin
class="my-wx-code"
:appid=""
:scope="''"
:theme="''"
:redirect_uri=""
:href="'data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDI2MHB4OyAgIG1hcmdpbjogMCBhdXRvOyBwYWRkaW5nOiAwO30KLmltcG93ZXJCb3ggLnRpdGxlIHtkaXNwbGF5OiBub25lO30KLnN0YXR1c19pY29uIHtkaXNwbGF5OiBub25lOyB9Ci5pbXBvd2VyQm94IC5zdGF0dXMge3RleHQtYWxpZ246IGNlbnRlcjsgZGlzcGxheTogbm9uZTt9Ci5pbXBvd2VyQm94IHsgaGVpZ2h0OiAzNTBweDsgcGFkZGluZzogMDsgbWFyZ2luOiAwIGF1dG87IH0KaS5zdGF0dXNfaWNvbi5pY29uMzhfbXNnLnN1Y2MgewogIGRpc3BsYXk6IG5vbmU7Cn0KLmltcG93ZXJCb3ggLnN0YXR1c190eHQgewoJZGlzcGxheTogbm9uZTsKfQppLnN0YXR1c19pY29uLmljb24zOF9tc2cud2FybiB7CiAgZGlzcGxheTogbm9uZTsKfQ==' ">
</wxlogin>
<!--
appid:就是我们获取的appid
scope:默认为snsapi_login
theme:二维码颜色
redirect_uri:回调域名，开发平台获取，当用户授权后就会跳转到这个地址
href:二维码的样式
-->
<script>
import wxlogin from 'vue-wxlogin'
</script>
//跳转到指定路径 例如/oauth-login页面，进行微信鉴权接口的调用（这里的接口是后端定义的），判断用户是否之前已经注册过。
//例如：
api.wexinlogin('api/weixinlogin',data).then(()=>{
if(res.data.status== '200'){
//前往登录成功页面，
存储用户的状态信息
}else {
//前往登录失败页面，具体爆出为什么会授权失败的原因。
}
})
Method Two:
Directly splicing the front-end request address to the back-end. After the back-end splices these request parameters, the
returned url is obtained after the API request like WeChat, and then sent to the front-end. The front-end directly jumps to the
QR code page.
Example of returned QR code page:
https://open.weixin.qq.com/connect/qrconnect?response_type=code&appid=·········&redirect_uri=········&scope=snsapi_login&state =1
redirect_uri The url here refers to the url that is redirected after scanning the code successfully.
We can judge the login status of WeChat within the life cycle of the page after the jump is completed.