How to implement WeChat scan code login and obtain personal information in vue3

1. Process:

WeChat provides two code scanning methods, which are:

• Jump to the QR code scanning page

• Embedded QR code

According to the document, we can know that the overall process of scanning code authorization mode is:

1. Third party Initiate a WeChat authorized login request. After the WeChat user allows authorization of a third-party application, WeChat will launch the application or redirect to the third-party website, and bring the authorization temporary ticket code parameter;

2. Add the code parameter AppID and AppSecret, etc., are exchanged for access_token through API;

3. Make interface calls through access_token to obtain the user's basic data resources or help the user implement basic operations.

2. Prerequisites:

WeChat development official website application:

appid: ‘’, // Backend provided
redirect_uri: &lsquo ;’, // The backend provides
AppSecret // The backend provides

3. Specific login implementation

Implementation method one:

Use vue Plug-in:

// 安装
npm install vue-wxlogin --save-dev
// js引入
import wxlogin from 'vue-wxlogin'
components: { wxlogin }

Usage:

<wxlogin
        :appid="appid"
        :scope="&#39;snsapi_login&#39;"  // 网页固定的
        :theme="&#39;black&#39;"
        :redirect_uri="redirect_uri"
        :href=&#39;bast64css&#39;
        
        >
 </wxlogin>
 
 
 
//   data
<wxlogin
        :appid="appid"
        :scope="&#39;snsapi_login&#39;"  // 网页固定的
        :theme="&#39;black&#39;"
        :redirect_uri="redirect_uri"
        :href=&#39;bast64css&#39;
        
        >
 </wxlogin>

//   data
bast64css: &#39;data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDIwMHB4O2hlaWdodDoyMDBweH0NCi5pbXBvd2VyQm94IC5pbmZvIHt3aWR0aDogMjAwcHh9DQouc3RhdHVzX2ljb24ge2Rpc3BsYXk6IG5vbmV9DQouaW1wb3dlckJveCAuc3RhdHVzIHt0ZXh0LWFsaWduOiBjZW50ZXI7fQ0KLmltcG93ZXJCb3ggLnRpdGxlIHtkaXNwbGF5OiBub25lfQ0KaWZyYW1lIHtoZWlnaHQ6IDMyMnB4O30NCg==&#39;,
                appid: &#39;wx64914809da50&#39;, // 后端提供
                redirect_uri: &#39;http%3A%2F%2Flant.com&#39;, // 后端提供

Result: In this way, the WeChat QR code will be displayed on the webpage written by you

After scanning, the url of the page will have a Code address, get the code

if (window.location.href.indexOf('code') >= 0) {
                let code = window.location.href.split('?')[1];
                code = code.substring(5, code.indexOf('&'));
                this.wechatcode = code
                this.wechatLogin()
            }

Give the code to the backend, and the backend will return you the information about this person

Method 2:

Integrate it into your own Web page

1. First add a WeChat login button on the vue page:

<!--微信授权登录按钮-->
<img  src="/static/imghwm/default1.png"  data-src="@/assets/images/weixin.png"  class="lazy"   / alt="How to implement WeChat scan code login and obtain personal information in vue3" ><a  type="text" @click="handLoginByWx">微信扫码登录</a>

2. Configure login related parameters and jump to the WeChat login QR code authorization page

// 跳转微信登录二维码授权页面
      handLoginByWx() {
        // 重定向地址重定到当前页面，在路径获取code
        const hrefUrl = window.location.href
        // 判断是否已存在code
        if (!this.code) {
        // 不存在，配置相关微信登录参数（主要是授权页面地址，appID，回调地址）
          window.location.href = `
              https://open.weixin.qq.com/connect/qrconnect
            ?appid=APPID
            &redirect_uri=${encodeURIComponent(hrefUrl)}
            &response_type=code
            &scope=snsapi_login
                    `
        }
      }

3. Scan the QR code to confirm authorization

Scan the QR code with your mobile phone to confirm the authorization

4. Callback

Since there is a routing guard on Vue, the code value returned by the callback is obtained. Processed in the routing guard

// 为微信授权登录重定向地址服务
      var temp = (to.path).split('&')
      var pram = temp[1]
      var item = pram.split('=')
      var code = item[1]
      // 重定向到微信登录页面并且将code值带上
      next({
        path: '/login',
        query: { 'code': code }
      })

5. Whether the login page monitoring address exists code

The login page monitoring whether to obtain the code value returned by WeChat authorization, if it exists, call the interface provided by the background to The code is returned to the backend
6. Call the login interface to log in based on the credentials returned by the backend

Method 3: Combine the backend to obtain the QR code

1. Add a div , used to display the WeChat login QR code

<div id="weixin"></div>

2. Add mounted and introduce the WeChat login QR code JS

mounted() {
    var obj = new WxLogin({
      id: "weixin",
      appid: "wx3bdb1192c22883f3",
      scope: "snsapi_login",
      // 扫码成功后 跳转的地址
      redirect_uri: "http://domain/weixinlogin"
    });
  },
  head: {
    script: [
      { src: "http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js" }
    ]
  }

• appid: application unique identifier

• scope: Application authorization acts on

• redirect_uri: callback address, which is the page to jump to after successful WeChat login

3. Display the QR code

After scanning the QR code to log in, and clicking the confirm login button, the browser will automatically jump to:

http://domain /weixinlogin?code=02147Yff12Yhgz0ArCef1qabgf147Yf0&state=undefined

This code is a temporary token sent to the user by WeChat. We can request the WeChat third-party login interface again according to the code to get access_token (official token)

3. Obtain access_token

3.1. API introduction

Get access_token through code for other purposes Interface call

1. Interface description (obtain access_token through the following interface)

HTTP request method: GET
URL: https://api.weixin.qq.com/ sns/oauth3/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

Returns the following parameters:

{
    "access_token":"ACCESS_TOKEN",
    "expires_in":7200,
    "refresh_token":"REFRESH_TOKEN",
    "openid":"OPENID",
    "scope":"SCOPE"
}

3.2 The following vue front-end calls the java back-end code

1. Call the node service through axios and create a new file: @/api/weixin.js (this is because the interfaces are unified and stored separately under the api file)

import axios from 'axios'
export function getAccessToken(code) {
 return axios.get(`http://localhost:8888?operation=token&code=$[code]`)
}

2. Add the tool utils/param.js ( Used to obtain the browser address bar parameter code)

export function getUrlParam(name) {
　　var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
　　var r = window.location.search.substr(1).match(reg);
　　if(r != null) return unescape(r[2]);
　　return null;
}

3. Create weixinLogin.vue

<template>
    <div></div>
</template>
<script>
import { getUrlParam } from &#39;@/utils/param&#39;
import { getAccessToken } from &#39;@/api/weixin&#39;
    
export default {
    mounted(){
      let code=getUrlParam(&#39;code&#39;)
      if(code!==null){//如果是微信登陆
        //根据code获取access_token
        getAccessToken(code).then( res=>{
          let access_token= res.data.access_token
          let openid= res.data.openid
          console.log(&#39;access_token:&#39;+access_token+ &#39;openid:&#39;+openid)
        })
      }
    }
}
</script>

4. After logging in to WeChat, obtain the user’s avatar and nickname in WeChat

API

1. Interface description

HTTP request method: GET
URL: https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID

Return parameters:

{
“openid”:“OPENID”,
“nickname”:“NICKNAME”,
“sex”:1,
“province”:“PROVINCE”,
“city”:“CITY”,
“country”:“COUNTRY”,
“headimgurl”: “http://wx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/0”,
“privilege”:[
“PRIVILEGE1”,
“PRIVILEGE2”
],
“unionid”: " o6_bmasdasdsad6_2sgVt7hMZOPfL" }

After obtaining the access_token and openid, request the interface again, obtain the nickname and avatar, and save it in the cookie

<template>
    <div></div>
</template>
<script>
import { getUrlParam } from &#39;@/utils/param&#39;
import { getAccessToken } from &#39;@/api/weixin&#39;
import { setUser } from &#39;@/utils/auth&#39; 

export default {
    mounted(){
      let code=getUrlParam(&#39;code&#39;)
      if(code!==null){//如果是微信登陆
        //根据code获取access_token
        getAccessToken(code).then( res=>{
          let access_token= res.data.access_token
          let openid= res.data.openid
          weixin.getUserinfo( access_token, openid ).then( res => {
            //提取用户昵称和头像
            let nickname= res.data.nickname
            let headimgurl= res.data.headimgurl
            // 将用户信息保存到token中
            setUser(access_token,nickname,headimgurl)
            location.href=&#39;/&#39;  //跳转到首页
          })
        })
      }
    }
}
</script>

At this point, getUser obtains the current login The user's username and avatar.

The above is the detailed content of How to implement WeChat scan code login and obtain personal information in vue3. For more information, please follow other related articles on the PHP Chinese website!