Wechat official account - authorized login

Key points

• Official account configuration
• Obtained by authorization code

One 、 Official account configuration

• Configure the security domain name , Configure your domain name
  
• Configuration developer , If you want to debug with wechat development tools
  

Two 、 Authorized access to code

//login.vue

<template>
    <div class="wrap">
        <div class="head">
            <div class="head__logo">
                <img class="head__img" src="@/assets/login-logo.png"/>
                <p> Hello!   Please log in </p>
            </div>
        </div>
        <div class="form">
            <div class="form__bottom">
                <button class="form__btn" @click="onLogin"> Wechat authorized user information </button>
                <div class="form__read">
                     Please continue to use after completing wechat authorization 
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import qs from 'qs';

    export default {
    
        data() {
    
            return {
    };
        },

        created() {
    
            let pagePath = decodeURIComponent(window.location.href); //  Page path 
            let pageArray = pagePath.split('?');
            if (pageArray.length > 1) {
    
                let pageParam = qs.parse(pageArray[1]) || {
    };
                //  Intercept after redirection code
                if (pageParam.code) {
    
                    this.getUserInfoByAccount(pageParam.code)
                }
            }
        },

        methods: {
    

            // Back to the home page 
            onLogin() {
    
                loginWechat();
            },
            
			//  Judge whether it is wechat environment 
			getIsWechat() {
    
			    let ua = navigator.userAgent.toLowerCase();
			    let isWechat = false;
			    if (String(ua.match(/MicroMessenger/i)) === 'micromessenger') {
    
			        isWechat = true;
			    } else {
    
			        isWechat = false;
			    }
			    return isWechat;
			}
			
			//  Wechat authorized login 
			loginWechat(wxAppId = ' Your official account id', wxRedirectUrl = ' The address you want to redirect , Be consistent with the domain name configured above ') {
    
			    if (!getIsWechat()) return;
			    if (!wxAppId) return;
			    let wxState = 'authorize';
			    wxRedirectUrl = encodeURIComponent(wxRedirectUrl);
			    window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${
     wxAppId}&redirect_uri=${
     wxRedirectUrl}&response_type=code&scope=snsapi_userinfo&state=${
     wxState}#wechat_redirect`;
			}

            // The user login , use code Interact with the back-end interface , To realize the login 
            getUserInfoByAccount(code) {
    
                // Request backend interface , According to your specific interface 
                login({
    
                    code: code
                }).then(res => {
    
                    let data = res.data || {
    };
                    // Login successful , So let's go over here , Do other logic by yourself 
                })
            },

        },
    };
</script>
<style lang="scss" scoped>
    .wrap {
    
        background-color: #ffffff;
        flex: 1;

        .head {
    
            display: flex;
            justify-content: center;
            padding: 30px 20px 20px 20px;

            .head__logo {
    
                display: flex;
                flex-direction: column;
                align-items: center;
                font-size: 28px;

                .head__img {
    
                    width: 80px;
                    height: 80px;
                    display: block;
                    margin-bottom: 10px;
                }
            }
        }

        .form {
    
            padding: 30px 20px;

            .form__row {
    
                display: flex;
                flex-wrap: nowrap;
                align-items: center;
                min-height: 50px;
                padding: 10px 0;
                margin-bottom: 10px;
                font-size: 16px;
            }

            .form__icon {
    
                flex: none;
                font-size: 24px;
                margin-right: 15px;
                color: #666666;
            }

            .form__ipt {
    
                flex: auto;
                border: none;
                font-size: 16px;
                height: 50px;
            }

            .form__yzm {
    
                border-left: 1px solid #c1c1c1;
                display: flex;
                align-items: center;
                height: 24px;
                padding-left: 20px;
                word-break: keep-all;
                color: #666666;
            }

            .form__bottom {
    
                margin-top: 30px;
                padding: 20px 0;
            }

            .form__btn {
    
                height: 0.5rem;
                width: 100%;
                background: #53B1FE;
                display: flex;
                align-items: center;
                justify-content: center;
                border: none;
                color: #ffffff;
                border-radius: 50px;
                font-size: 18px;
            }

            .form__btn--grey {
    
                background-color: #F5F5F5 !important;
                color: #ABABAB;
            }

            .form__read {
    
                display: flex;
                justify-content: center;
                align-items: center;
                margin-top: 20px;
                font-size: 14px;
                color: #666666;
            }
        }

    }
</style>

3、 ... and 、 effect