Record --vue3 question: How to realize WeChat scan code authorization login?

Here I will share with you some of the knowledge I have summarized on the Internet, I hope it will be helpful to everyone

1. Demand

Scan the code on WeChat for authorization. If the authorization is allowed, the login is successful and you will be redirected to the home page.

Two, the problem

1. How many ways are there to implement WeChat code scanning authorization?

2. What are the principles of these implementation methods?

3. The WeChat scan code authorization login in Vue, and the WeChat authorization login of uniapp and native applets, do they have anything in common?

TWO

Problem solving, quick answers

1. Web page jump type

The front end only needs to call the back-end WeChat login interface. Operations such as generating WeChat QR codes and passing code parameters are all processed in the backend.

2. Embedded webpage

1. Introduce wxLogin.js in the head tag of public/index.html.

2. Set an embedded QR code container in the template, and you can customize the style of the container.

3. Create a WxLogin object, configure the necessary parameters, and associate the embedded QR code container through the id. Among them, the parameters redirect_uri and appid are the most critical. The redirect_uri configuration is the address of the redirection page after the code scanning authorization is successful. You can get the most important code parameters on the redirection page.

4. On the redirection page, request the back-end WeChat login interface through the code parameter, obtain the access_token and save it locally, and jump to the homepage after successful login. Here you can customize the logic according to the business.

// 在public/index.html的head标签中引入
<script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js">
</script>

<!-- 内嵌二维码容器 -->
<div id="login_container"></div>
// 获取code
var obj = new WxLogin({      
    // 需要显示内嵌二维码的容器id 
    id: 'login_container',     
    // 应用ID     
    appid: '',    
    // 网页默认即可 
    scope: 'snsapi_login', 
    // 授权成功后回调的url  
    redirect_uri: encodeURIComponent(''),   
    // 可设置为简单的随机数加session用来校验   
    state: Math.ceil(Math.random() * 1000),    
    // 二维码的样式，提供"black"、"white"可选。   
    style: 'black',     
    // 自定义样式链接   
    href: ''   
})  }

// 通过code请求接口获取access_token
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute

let code = route.query.code
let state = route.query.state
if (code) { 
    let codeForm = {   
        code: code,// 关键  
        state: state, 
    } 
// 调微信登录的后端接口 
LoginApi(codeForm).then(res => {  
    localStorage.setItem('access_token', res.data.token)   
    router.push('home') 
})}

THREE

problem analysis, knowledge summary

1. How many ways can WeChat scan code to authorize login?

There are two implementation methods for WeChat scanning code authorization login: web page external link type and web page embedded type.

1. Web page external link

When choosing a third-party login method, click WeChat login, and then jump to a new WeChat scan code page. When the user scans the code to allow authorization to log in, the scanning page will be automatically closed and then redirected to the home page.

This method can be regarded as back-end processing.

2. Embedded webpage

When choosing a third-party login method, click WeChat login, and an embedded QR code will pop up somewhere on the current page. When the user scans the code to allow authorization to log in, it will directly jump to the home page.

This method can be regarded as front-end processing, but this method is recommended, and the user experience is better.

Second, what are the principles of these implementations?

1. Web page external link

Step 1: The user enters the login page, selects WeChat login on the login page, the front end calls the backend WeChat login interface, the backend will generate a WeChat QR code, and return the address to the frontend, and the frontend will open the QR code on a new page after responding code address.

步骤二：用户用微信扫码，当授权成功后，就会自动重定向到后端扫码回调的接口。可以自动重定向到指定接口，是因为在生成二维码时，回调地址填的是后端接口地址，此处区别于网页内嵌式。

步骤三：后端会在重定向扫码回调接口中获取到code参数，再通过code参数获取到access_token、openid，进而获取用户信息，最终返回重定向首页地址给前端，登录成功跳转到首页。其中，地址内携带着access_token、openid、用户信息等参数，前端会保存这些参数到本地存储中。

2、网页内嵌式

步骤一：用户进入登录页，在登录页选择微信登陆，然后就会在内嵌二维码容器中显示出二维码。

步骤二：用户用微信扫码，当授权成功后，就会自动重定向到中转页。其中，中转页可以是注册页，也可以是当前登录页。

步骤三：前端在中转页获取当前路由对象的query信息，并通过请求接口将query信息中的code参数传给后端。

步骤四：后端就会通过code参数获取到access_token、openid，进而获取用户信息，当前端拿到这些参数后就会登录成功，跳转到首页，并保存到本地存储中。

三、vue中的微信扫码授权登录，与uniapp和原生小程序的微信授权登陆，它们之间有共同点吗？

1、uniapp的微信授权登录，主要借助uni.getUserProfile和uni.login这两个API实现。getUserProfile作用是获取用户授权，login作用是获取code参数。

2、原生小程序的微信授权登录，主要借助wx.getUserProfile和wx.login这两个API实现。getUserProfile作用是获取用户授权，login作用是获取code参数。

3、uniapp和原生小程序的微信授权登陆的原理，和vue中的微信扫码授权登录基本一致，掌握其一即可。

本文转载于:

https://juejin.cn/post/7267090979538141239

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。