微信网页授权 accesstoken过期提示

文章目录

• 网页授权接口Oauth2.0 开发

• 步骤1：配置回调域名
• 步骤2：组装开发地址
• 步骤3：回调地址获取用户头像&昵称

• test.php
• wx组件

• CDN&对象存储

• 概念
• 实现

网页授权接口Oauth2.0 开发

步骤1：配置回调域名

http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login 测试公众号

需要单独关注 才行

回调域名：就是从微信的网站跳转到你自己的网站

步骤2：组装开发地址

https://open.weixin.qq.com/connect/oauth2/authorize?appid=自己的APPID&redirect_uri=http://自己的网址/login.php&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect

示例 :
https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx56e3e3d75414b3d0&redirect_uri=http://106.12.201.78/test.php&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect

步骤3：回调地址获取用户头像&昵称

test.php

<?php

// 第一次异步请求  主要获取access_token&openid
#1.获取code
$code = $_GET['code'];

#2.获取openid和accessiontoken
$apiData = array(
'appid'=>'wx56e3e3d75414b3d0',
'secret'=>'f8ec8178c6dda48d1cb25c07304eff44',
'code'=> $code,
'grant_type'=>'authorization_code'
);
$api = "https://api.weixin.qq.com/sns/oauth2/access_token?".http_build_query($apiData);
$data = json_decode(file_get_contents($api), true);
// echo $data['access_token'];
// echo '<hr/>';
// echo $data['openid'];


// 第二次异步请求  主要获取昵称、头像等等
$apiData = array(
'access_token'=> $data['access_token'],
'openid'=> $data['openid'],
'lang'=>'zh_CN'
);
$api = "https://api.weixin.qq.com/sns/userinfo?".http_build_query($apiData);
$data = json_decode(file_get_contents($api), true);
echo '<pre>';
print_r($data);

 
// 1.获取昵称头像openid唯一标识
// 2.users表创建用户
// 3.跳转到前端页面    /my?nickname=&....
// 4.前端获取地址栏信息 存储即可

wx组件

1. 用户输入微信授权网址 -> 点击确定 -> 回调地址到 react项目wx组件
2. 在wx组件 componentDidMount中 发送两次异步请求
3. 将异步请求数据h5存储即可

CDN&对象存储

概念

• CDN是什么：名词解释不清，加快静态资源访问的技术
• CDN原理：将静态资源缓存到用户所在城市

工作中，任意互联网公司要实现CDN技术是自己在各大城市购买服务器部署
还是直接购买百度云、阿里云、腾讯云、七牛云搞好的产品

• 什么是对象存储？

服务器供应商提供的一个产品，让用户存储网站数据，例如图片、视频等

• 特色：
  换网址性能提升，
  解决浏览器每秒并发限制
  磁盘每秒读写上线
  cookie问题
  更方便

实现

步骤1：注册七牛云账号 https://portal.qiniu.com/signup?code=1hgfpqu1al36a

步骤2：创建xxx目录&uploads目录，再xxx目录下创建img.js修改下述参数信息

步骤3：yarn add express multer fs qiniu

步骤4：启动img.js文件，通过postman测试

//1. 导入模块
const express = require("express")
const multer = require('multer')
const fs = require("fs")
const path = require("path")
const qiniu = require('qiniu');
 
//2. 配置
const app = express();
const upload = multer({ dest: 'temp/' }) //上传图片：1-放到临时目录中，2-移动更名

const accessKey = 'lfJfOXL0JPFxs1ShWNwOBaBxk7YQS_BOyXeFVZR8' // 【改】//下面图中提示
const secretKey = 'MwgNj9JjJNk5rzn5MTEE8LwrRC8ed3fb40XLFTBO' // 【改】
const mac = new qiniu.auth.digest.Mac(accessKey, secretKey)
const options = { // 自定义凭证有效期（示例2小时，expires单位为秒，为上传凭证的有效时间）
  scope: 'test',  // 对象存储空间名称【重要 得改成自己的】
  expires: 7200
}
const putPolicy = new qiniu.rs.PutPolicy(options)
const uploadToken = putPolicy.uploadToken(mac)

//3.路由
app.post('/upload', upload.single('avatar'), (req, res, next) => {
    // console.log(req.file)
    // res.send('上传成功') 
    // fs.rename(req.file.path, req.file.originalname, (err) => {
 
    let oldPath = req.file.path
    let newPath = req.file.filename+path.extname(req.file.originalname)
    fs.rename(oldPath,'uploads/'+newPath, err => {
        if (err) throw err;
        // 同步七牛云
        let localFile = 'uploads/'+newPath
        let qiniuFileName = newPath
        let putExtra = new qiniu.form_up.PutExtra()
        let formUploader = new qiniu.form_up.FormUploader()
        formUploader.putFile(uploadToken, qiniuFileName, localFile, putExtra, function(respErr,
          respBody, respInfo) {
          if (respErr) {
            throw respErr;
          }
          if (respInfo.statusCode == 200) {
            // console.log(respBody);
            res.json({
                "data": {
                    "username": newPath,
                    "url": newPath
                },
                "meta": {
                    "msg": "上传成功",
                    "status": 201
                }
            })
          } else {
            // console.log(respInfo.statusCode);
            // console.log(respBody);
            res.json({
                "data": null,
                "meta": {
                    "msg": "上传失败",
                    "status": 500
                }
            })
          }
        });
    });
})

//4.启动服务
app.listen(8889);