Uniapp 微信公众号授权登录指南

// pages/login/login.vue
 
<template>
  <view>
    <button @click="wxLogin">微信授权登录</button>
  </view>
</template>
 
<script>
export default {
  methods: {
    wxLogin() {
      // 1. 获取微信公众号的AppID
      const appid = 'YOUR_APPID';
 
      // 2. 设置回调URL（需在微信公众号平台配置）
      const redirect_uri = encodeURIComponent('https://yourdomain.com/wx-callback');
 
      // 3. 构造微信授权URL
      const url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`;
 
      // 4. 跳转到微信授权页面
      window.location.href = url;
    }
  }
}
</script>

// server.js
 
const express = require('express');
const axios = require('axios');
const app = express();
 
const APPID = 'YOUR_APPID';
const APPSECRET = 'YOUR_APPSECRET';
 
// 处理微信授权回调
app.get('/wx-callback', async (req, res) => {
  const code = req.query.code;
 
  // 1. 使用code获取access token
  const tokenUrl = `https://api.weixin.qq.com/sns/oauth2/access_token?appid=${APPID}&secret=${APPSECRET}&code=${code}&grant_type=authorization_code`;
  try {
    const tokenResponse = await axios.get(tokenUrl);
    const { access_token, openid } = tokenResponse.data;
 
    // 2. 使用access token获取用户信息
    const userInfoUrl = `https://api.weixin.qq.com/sns/userinfo?access_token=${access_token}&openid=${openid}&lang=zh_CN`;
    const userInfoResponse = await axios.get(userInfoUrl);
    const userInfo = userInfoResponse.data;
 
    // 3. 返回用户信息（或存储在数据库中）
    res.json(userInfo);
  } catch (error) {
    console.error('Error during wx callback:', error);
    res.status(500).send('Server Error');
  }
});
 
app.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});