WeChat 장면 QR 코드 URL 구성 개발을 위해 nodejs+redis 패키지를 사용하는 방법에 대한 심층적인 이해

소개: nodejs+redis 패키지를 사용하여 WeChat 장면 QR 코드 URL 구성 개발을 얻는 방법에 대한 심층적인 이해

외부 네트워크에서 접근할 수 있는 도메인 이름이 필요하며 일시적으로 도메인 이름이 없는 경우 땅콩 껍질을 사용하여 내부 네트워크에 침투할 수 있습니다. 이 측면은 일시적으로만 사용할 수 있으며 오랫동안 사용할 수 없습니다. 기사에서는 땅콩 껍질 내부 네트워크 침투를 예로 들어 획득 방법을 설명합니다. WeChat에서 제공하는 QR 코드의 URL 주소는 아래를 참조하세요.

먼저 로컬 콜백 인터페이스를 만듭니다.

http://127.0.0.1:8081/api/wxLogin/v1/callback

1단계: nodejs 프로젝트 루트 디렉터리의 라우터 폴더에 wxLogin.js를 생성합니다. 이는 WeChat 로그인과 관련된 인터페이스를 구체적으로 저장합니다. 구체적인 코드는 다음과 같습니다.

const express = require('express')
const router = express.Router()
const wxLoginController = require('../controller/WxLoginController')

// 微信登录回调接口
router.get('/callback',wxLoginController.wechatInsert)

module.exports = router

2단계: nodejs 프로젝트의 루트 디렉토리에 있는 app.js 파일에서 인터페이스의 권한 확인을 제외합니다. 코드는 다음과 같습니다.

	// 用户认证中间件
app.use(jwt({
          
           secret: jwtSecretKey, algorithms: ['HS256'] }).unless({
          
          
  path: [
    /^\/api\/wxLogin\/v1/, //微信登录通知接口排除
  ]
}))
// 用户相关的接口
const wxLoginRouter = require('./router/wxLogin')
app.use('/api/wxLogin/v1',wxLoginRouter)

3단계: nodejs 프로젝트의 제어 계층 컨트롤러 폴더에 새 WxLoginController.js 파일을 생성하여 WeChat 액세스 상태를 확인합니다.

	/**
	 * @param wechatInsert 验证微信接入
	 */ 
	const WxLoginService = require("../service/wxLoginservice")
	
	const WxLoginController = {
          
          
	    wechatInsert:(req,res) =>{
          
          
	        // 从微信服务器拿对称加密的参数
	        let {
          
          signature,timestamp,nonce,echostr} = req.query 
	        let handleRes = WxLoginService.wechatInsert(signature,timestamp,nonce,echostr)
	        res.send(handleRes)  // 把结果返回给微信服务器
	    }
	}
	
	module.exports = WxLoginController

4단계: 데이터 레이어에서 토큰, 타임스탬프, nonce의 세 가지 매개변수를 사전순으로 정렬하고 이를 문자열로 연결한 후 sha1 암호화를 수행합니다.구체적인 코드는 다음과 같습니다.

const SecretTool = require("../utils/SecretTool")
const WxLoginService = {
          
          
    wechatInsert:(signature,timestamp,nonce,echostr) => {
          
          
        let token = 'expert'
        let str = SecretTool.sha1([token,timestamp,nonce].sort().join(''))
        if(str == signature) {
          
          
            return echostr
        }
    }
// sha1加密算法，需要先使用npm或yarn安装一下，代码如下：
const sha1 = require('sha1')
class SecretTool {
          
          
  // sha1加密
  static sha1(query) {
          
          
    return sha1(query)
  }
}

module.exports = SecretTool

위챗 서버에 성공적으로 연결되었는지 확인하는 방법입니다. 확인을 위해 위챗 공식 계정 백그라운드에 이 URL을 추가하세요. 확인에 성공하면 저장을 클릭하면 메시지가 표시됩니다.
자세한 내용은 문서 액세스 가이드를 참조하세요: https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Access_Overview.html

콜백 인터페이스가 실행되었으므로 아래로 내려갈 수 있습니다.

다음으로 WeChat QR 코드의 URL 주소를 얻으려면 먼저 액세스 토큰을 얻어야 합니다.
구체적인 획득 방법은 공식 문서를 참조하세요: https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Get_access_token.html

인터페이스 입력 매개변수에는 다음이 포함됩니다: 1. grant_type, access_token 가져오기 및 client_credential 입력 2. appid, 즉 개발자 ID - 공식 계정의 백그라운드에서 얻을 수 있음 3. secret, 즉 개발자의 ID 비밀번호 - 공식 계정의 백그라운드에서 얻을 수 있습니다. 매개변수가 모두 준비되어 있으며 인터페이스를 개발할 수 있습니다.

첫 번째 단계는 WeChat 로그인 인터페이스를 생성하고 nodejs 프로젝트의 라우터 폴더에 있는 wxLogin.js에 로그인 인터페이스를 추가하는 것입니다. 코드는 다음과 같습니다.

// 获取微信二维码接口
router.get('/login',wxLoginController.login)

두 번째 단계는 제어 계층에서 프런트엔드 호출 인터페이스를 수신하고 그 결과를 프런트엔드로 반환하는 것입니다. 구체적인 코드는 다음과 같습니다.

login:async (req,res) => {
          
          
    let handleRes = await WxLoginService.login()
    res.send(handleRes)
}

3단계: 데이터 레이어에서 QR 코드 URL을 얻고 얻은 결과를 Redis Cache에 저장합니다.

login: async () => {
          
          
    // 获取二维码url
    let {
          
          qrcodeUrl,ticket} = await getQR()
    // 将ticket存入redis缓存
    let key = `wechat:ticket:${
            
            ticket}`
    redisConfig.set(key, JSON.stringify({
          
          isScan:'no'}),300)
    return BackCode.buildSuccessAndData({
          
          data:{
          
          qrcodeUrl,ticket}})
}

네 번째 단계는 구성 레이어에서 WeChat의 access_token을 획득하고 호출을 위해 데이터 레이어에 티켓을 제공하는 것입니다. 미리 준비한 appid와 appsecret을 사용해야 합니다. 구체적인 코드는 다음과 같습니다.
코드 구현 논리에 대한 공식 문서를 참조하세요: https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Get_access_token.html 및 이 https://developers.weixin.qq.com/doc/offiaccount/Account_Management /Generating_a_Parametric_QR_Code.html

const axios = require('axios')

const appId = 'XXX'
const appSecret = 'XXX'
const accessTokenPC = `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${
            
            appId}&secret=${
            
            appSecret}`
const qrUrl = 'https://mp.weixin.qq.com/cgi-bin/showqrcode'

// 获取微信access_token
const getAccessToken = () => {
          
          
  return axios({
          
          
    method: 'get',
    url: accessTokenPC
  })
}

// 获取拼接微信二维码url的ticket
const getTicket = (token) => {
          
          
  return axios({
          
          
    method: 'post',
    url: `https://api.weixin.qq.com/cgi-bin/qrcode/create?access_token=${
            
            token}`,
    data: {
          
          
      expire_seconds: 60 * 2,
      action_name: "QR_SCENE",
      action_info: {
          
          
        "scene": {
          
           "scene_id": 123 }
      }
    }
  })
}

// 获取微信二维码url
const wechatLogin = {
          
          
  getOR: async () => {
          
          
    let token = (await getAccessToken()).data.access_token
    let ticket = (await getTicket(token)).data.ticket
    return {
          
           qrcodeUrl: `${
            
            qrUrl}?ticket=${
            
            ticket}`, ticket: ticket }
  }
}

module.exports = wechatLogin

완료되었으면 APIFOX에서 WeChat 로그인 인터페이스를 호출할 수 있습니다. http://127.0.0.1:8081/api/wxLogin/v1/login은 티켓과 WeChat QR 코드 URL을 반환합니다.

WeChat 장면 QR 코드 URL 구성 개발을 위해 nodejs+redis 패키지를 사용하는 방법에 대한 심층적인 이해

추천