背景

公司接受到一个项目，需要在政务微信开发一个应用，综合考虑下来，采用嵌入网页的方式。需要解决的最为核心的就是用户认证的问题。

基本信息获取

CorpId获取

从我的单位中直接可以查看到。

image.png

AgentId与Secret获取

进行应用与小程序，点击应用进入，可以查看到。

image.png image.png

政务微信接口调用

前台不能直接调用

前台接口调用会出现跨域问题，使用nginx代理也是不能解决,需要走后台绕一下的,在这里使用的是node(koa)开发的应用。

配置可信域名

image.png image.png

配置工作台网页

image.png

形如：https://open.weixin.qq.com/connect/oauth2/authorize?appid=CORPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&agentid=AGENTID&state=STATE#wechat_redirect

代码展示

后端与政务微信接口通信

node环境准备 node 需要大于7.9 因为会使用到async await
全局安装koa
koa 生成项目
跨域问题解决 安装 koa2-cors

// app.js
const Koa = require('koa')
const app = new Koa()
const views = require('koa-views')
const json = require('koa-json')
const onerror = require('koa-onerror')
const bodyparser = require('koa-bodyparser')
const logger = require('koa-logger')
const zwwx = require('./routes/zwwx')
const cors = require('koa2-cors');

app.use(cors({
  origin: '*', // 允许跨域的地址，我的理解类似白名单，*代表全部允许
  exposeHeaders: ['WWW-Authenticate', 'Server-Authorization'], // 暴露header列表
  maxAge: 5, // 每隔5秒发送预检请求，也就是发送两次请求
  credentials: true, // 允许请求携带cookie
  allowMethods: ['OPTIONS', 'GET', 'PUT', 'POST', 'DELETE'], // 请求方式
  allowHeaders: ['Accept', 'Origin', 'Content-type', 'Authorization'],
}))

// error handler
onerror(app)

// middlewares
app.use(bodyparser({
  enableTypes:['json', 'form', 'text']
}))
app.use(json())
app.use(logger())

...

// routes
app.use(zwwx.routes(),zwwx.allowedMethods())
// error-handling
app.on('error', (err, ctx) => {
  console.error('server error', err, ctx)
});

module.exports = app

// zwwx.js
const router = require('koa-router')()
const axios  = require('axios')
const corpid = 'xxx'  // 使用正确的corpid
const corpsecret='xxx' // 使用正确的corpsecret
const getToken =async () =>{
  const res = await axios.get(`http://zwwxuat.shdata.com/cgi-bin/gettoken?corpid=${corpid}&corpsecret=${corpsecret}`)
  if(res.status === 200){
    const data = res.data
    const token = data.access_token
    if(!token) {
      console.log('http://zwwxuat.shdata.com/cgi-bin/gettoken接口未调用成功')
    }else{
      console.log(`token:${token}`)
      return token
    }
  }else{
    console.log('http://zwwxuat.shdata.com/cgi-bin/gettoken接口未调用成功')
  }
}

const getUserInfo = async (token,code)=>{
  const res = await axios.get(`http://zwwxuat.shdata.com/cgi-bin/user/getuserinfo?access_token=${token}&code=${code}`)
  if(res.status === 200){
    const data = res.data
    if(data.errcode){
      console.log(data.errmsg)
    }
    return data
  }else{
    console.log('http://zwwxuat.shdata.com/cgi-bin/user/getuserinfo接口未调用成功')
  }
}
router.prefix('/zwwx')

router.post('/getUserInfo',async(ctx, next )=>{
    const code = ctx.request.body.code
    console.log(ctx.params)
    if(!code){
      console.log('code不存在')
      ctx.body = {
        message:'code不存在'
      } 
      return
    }
    const token = await getToken()
    const userInfo =await getUserInfo(token,code)
    console.log('UserInfo:',userInfo)
    ctx.body = userInfo
})

module.exports = router

前台调用

const baseURL = 'http://127.0.0.1:3000/zwwx'

import axios from 'axios'



function param2Obj(url) {
  const search = url.split('?')[1]
  if (!search) {
    return {}
  }
  return JSON.parse('{"' + decodeURIComponent(search).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') + '"}')
}

export  async function  getUserInfo() {
    const params = param2Obj(window.location.href)
    axios.post(`${baseURL}/getUserInfo`,{code:params.code}).then(res=>{
        alert(JSON.stringify(res))
    })
}