×

一面微信墙的诞生(5) 接入微信开放平台

96
忠叔
2017.11.22 22:47* 字数 948

上一节:一面微信墙的诞生(4) 消息推送的实现
本项目 github 地址 : https://github.com/heygirlwhatyournameis/wechatwall

再将微信墙接入微信平台前,你需要以下两项关键的材料:

  • 一个认证的微信公众号
  • 一个有域名的公网服务器

如果你是大学生,可以购买阿里云或腾讯云提供的学生服务器,非常优惠。具体的购买方法和配置方法在次不阐述,可上网搜索资料。

配置公众号

你需要将你的域名绑定在公众号上,这样你的服务器才能使用微信提供的接口:

  1. 登录公众帐号 -> 公众号设置 -> 功能设置 -> 业务域名
    将业务域名设置成为你自己的域名,并下载链接中的文件,上传到服务器根目录下,上传完成后点击保存即可。


    图5-1 设置业务域名
  2. 同样在功能设置页面设置网页授权域名,这次就不需要再传文件了(刚才已经穿过了)。


    图5-2 设置网页授权域名

业务授权域名的作用是,用户在使用微信访问你的网页时,不会出现防骗的提示条;网页授权的域名是微信接口回调时,所认可的域名。

获取开发者ID和密码

在“基本设置页面”中可以查看到自己的开发者ID和密码,密码需要管理员扫码授权查看,而且只能查看一次,所以要保存在安全的地方。如果忘记了开发者密码,需要扫码重置。


图5-3 获取开发者ID和密码

编写授权业务代码

在 client 文件夹下新建 login.php

<?php
//配置你的开发者ID和密码
$app_id='...';
$app_secret='...';

//工程根目录地址
$domain='http://abc.com/wall';

//没有code,发起授权请求获取code
if(!isset($_GET['code'])){

    //回调地址,即本页面
    $url=urlencode("$domain/client/login.php");
    //跳转到授权页面
    echo ("<script>
    window.location.href='https://open.weixin.qq.com/connect/oauth2/authorize?appid=".$app_id."&redirect_uri=$url&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect';
    </script>");
    exit;
} else {
    $code=$_GET['code'];

    //从微信端获取 access_token 和openid
    $response=file_get_contents("https://api.weixin.qq.com/sns/oauth2/access_token?appid=$app_id&secret=$app_secret&code=$code&grant_type=authorization_code");
    $response=json_decode($response,true);
    if(isset($response['errcode'])){
        echo 'ERROR '.$response['errcode'];
        exit;
    }
    $token=$response['access_token'];
    $openid=$response['openid'];

    require('../util/database.class.php');
    $db=Db::getInstance();
    $user=$db->find("SELECT * FROM user WHERE openid='$openid'");

    //如果数据库,没有该用户,用access_token拉取用户信息
    if(empty($user)){
        $response=file_get_contents("https://api.weixin.qq.com/sns/userinfo?access_token=$token&openid=$openid&lang=zh_CN");
            if(isset($response['errcode'])){
                echo 'ERROR '.$response['errcode'];
                exit;
        }
        $response=json_decode($response,true);
        //将用户信息存入数据库
        $nickname=$response['nickname'];
        $avatarUrl=$response['headimgurl'];

        $db->execute("INSERT INTO user VALUES ('$openid','$nickname','$avatarUrl')");
    }

    //进入登录状态
    session_start();
    $_SESSION['wall_open_id']=$openid;
    
    //进入首页
    header("Location: index.php");
}

修改 /client/user.php

将以下代码

session_start();
if(!isset($_SESSION['wall_open_id'])){
    //未登录时自动登录abcdefg
    $_SESSION['wall_open_id']='abcdefg';
    //预留:后期需要跳转到微信授权页
}
$openid=$_SESSION['wall_open_id'];

改为

session_start();
if(!isset($_SESSION['wall_open_id'])){
    header("Location: login.php");
    exit;
}
$openid=$_SESSION['wall_open_id'];

修改 /server/new.php

将以下代码

/**
 * 预留使用
 * session_start();
 * $openid=$_SESSION['wall_open_id'];
 */
$openid='abcdefg';
if(!$openid){
    result(1,'未登录');
    die;
}
if(!isset($_POST['content'])){
    result(2,'消息为空');
    die;
}

改为

session_start();
if(!isset($_SESSION['wall_open_id'])){
    result(1,'未登录');
    die;
}
$openid=$_SESSION['wall_open_id'];
if(!isset($_POST['content'])){
    result(2,'消息为空');
    die;
}

将工程上传到服务器

我使用了 FTP 工具将我的整个工程文件上传到服务器上,并将本地的数据库也配置到了服务器上。

使用微信web开发者工具测试

在微信提供的开发者工具中,打开你服务器下的 /client/index.php


图5-4 首次登录出现授权页面
图 5-5 登录成功,进入留言页面
图5-6 留言成功上墙
图5-7 数据库新增的用户数据

如果你也测试成功,恭喜你,你的微信墙已经初步完成。


图5-8 基本功能初步完成

不过你的工作还没有结束,在真正投入使用前,你还需要技术完善它,包括但不限于:

  1. 优化前端网页的布局,美化网页样式,可以引入微信的 weui 样式库或者 bootstrap 框架;
  2. 在前后端加上消息验证,设定规则避免空消息和灌水消息;
  3. 优化目录结构,分离网页中的 css 和 javascript;
  4. 对 php 中的 get 和 post 参数进行处理,避免数据库注入的发生。

在未来,你还可以对系统进行更好的升级,使其符合完善和健壮:

  1. 将用户端分离出来,成为一个纯前端应用;将登录的逻辑移至服务端,使客户端和服务端真正相互独立。
  2. 使用 vue 或 angular 等框架来重构前端,将视图和数据剥离。
  3. 使用 thinkphp 等框架重构后端,借助 MVVM 架构和方便的数据库交互功能简化服务端的代码。
  4. 使用 websocket 代替 server-event,让消息的推送更及时和高效
    ……

如果你在阅读和尝试过程中遇到问题,欢迎在评论区、私信区留言,或者添加我的微信与我联系:


一面微信墙的诞生
Web note ad 1