图解微信”网页授权“自动登录(附ThinkPHP5.1代码)

 阅读约 21 分钟

零、前言

在初学微信开发的时候由于没有经验,再加上微信的官方文档不够清晰,导致看完文档之后只剩下”抓瞎“,根本不知道微信开发是怎样一个流程,也不知道如何开始,于是不得不去查阅第三方博客。
后来终于完成了微信公众号和服务器的对接,实现了网页授权,并且,用户可以直接点击公众号下方的按钮,自动获取OpenID登录,不用再进行传统的手动登录了。网页授权自动登录,也就是本文需要实现的功能。

一、原理

1,什么是网页授权?

网页授权,就是用户向公众号授权,让开发者通过此用户的唯一识别码(OpenID)获得此用户的身份。通俗的讲,就是用户给开发者提交一个“身份证”,让开发者知道当前正在访问的用户是谁微信官方文档——网页授权

2,使用网页授权的优势

通常情况下,用户是直接访问开发者的服务器,获取服务器返回的数据。由于http协议是匿名的,在这种情况下,服务器不知道当前访问的用户是谁,识别用户身份的唯一办法就是通过CookieSession,然而,由于Cookie具有时效性,用户还是在一些情况下还是要手动登录。
直接连接开发者服务器的流程图:
2016-07-06_577c9b3a28e87.png
(图片出自梦云智软件开发团队ThinkPHP5.1入门实例教程

而微信网页授权的优势在于,可以给每一个微信账号分配一个唯一的识别码(也就是OpenID),通过这个识别码,微信服务器就可以知道当前登录的用户是谁,然后把此用户的信息告诉开发者的服务器,这样开发者就获取了用户身份,并且可以实现把用户在网站的账号和用户的微信号绑定起来,这样,以后用户通过微信登录网站时就再也不用手动登录了。
通过连接微信服务器获取用户信息的流程图:
图片.png

3,什么情况下可以使用网页授权?

微信的公众号有两种——订阅号和服务号,订阅号通常适用于个人(自媒体、学校的小型组织),服务号适用于企业。订阅号没有网页授权的权限,服务号只有在认证之后可以使用网页授权。微信接口权限说明
图片.png
图片.png

所以,只有订阅号的小伙伴可以洗洗睡了...可是作为开发者,如果出于学习的目的想尝试网页授权的话,可以去申请微信测试号,测试号具有所有的微信接口权限。申请接口测试号

二、操作

本文假设用户已经完成了公众号和服务器的绑定,设置好了服务器地址。
图片.png

1,设置公众号的按钮

在公众号刚刚创建的时候,主页面是这样的,只有聊天框:
图片.png
而我们希望是这样:
图片.png

那么,怎么定义这些按钮呢?微信为我们提供了一个很好的接口测试工具,我们可以利用这个工具来定义按钮。
首先选择基础支持,获取AccessToken(这个是公众号的全局AccessToken而不是网页授权的AccessToken)
图片.png
填入正确的APPID和Secret之后,下面返回了AccessToken有效期7200秒。
图片.png
复制这串字符,然后把接口切换到自定义菜单查询接口,把刚刚获取的token粘贴进去。
图片.png
如果这个公众号之前设置过按钮,就会出现所以按钮的代码:
图片.png

{
    "menu": {
        "button": [
            {
                "name": "学生菜单", 
                "sub_button": [
                    {
                        "type": "view", 
                        "name": "学生主页", 
                        "url": "http://awjdjsz.jincheng4917.cn/index/WxIndex/page", 
                        "sub_button": [ ]
                    }, 
                    {
                        "type": "view", 
                        "name": "课程查询", 
                        "url": "http://awjdjsz.jincheng4917.cn/index/WxIndex/course", 
                        "sub_button": [ ]
                    }, 
                    {
                        "type": "view", 
                        "name": "成绩查询", 
                        "url": "http://awjdjsz.jincheng4917.cn/index/WxIndex/score", 
                        "sub_button": [ ]
                    }, 
                    {
                        "type": "view", 
                        "name": "个人信息", 
                        "url": "http://awjdjsz.jincheng4917.cn/index/WxIndex/info", 
                        "sub_button": [ ]
                    }
                ]
            }, 
            {
                "name": "教师菜单", 
                "sub_button": [
                    {
                        "type": "view", 
                        "name": "教师主页", 
                        "url": "http://awjdjsz.jincheng4917.cn/index/WxIndex/tpage", 
                        "sub_button": [ ]
                    }, 
                    {
                        "type": "view", 
                        "name": "课程管理", 
                        "url": "http://awjdjsz.jincheng4917.cn/index/WxIndex/tcourse", 
                        "sub_button": [ ]
                    }, 
                    {
                        "type": "view", 
                        "name": "成绩录入", 
                        "url": "http://awjdjsz.jincheng4917.cn/index/WxIndex/tgrade", 
                        "sub_button": [ ]
                    }
                ]
            }, 
            {
                "type": "scancode_push", 
                "name": "扫码进入课堂", 
                "key": "rselfmenu_0_1", 
                "sub_button": [ ]
            }
        ]
    }
}

如果是一次设置,可以把上面的代码加以改造,然后把接口改为自定义菜单创建接口,然后输入改好的代码。
注意:查询结果的代码用于创建按钮时,必须把第二行和倒数第二行的"menu"{}删掉,不然会报错。
图片.png
点击创建之后,刷新公众号,按钮已经出现了。
图片.png

三、代码分析

我们还是要拿出这张流程图
图片.png

1,第一阶段

实际上已经在刚才完成了,就是在公众号按钮中设置链接,让用户通过按钮访问ThnkPHP的某个方法。

2,第二阶段

    //你的微信公众号appid
    protected $appid='wx4b4890b3f8c0ada5';
    //你的微信公众号secret 
    protected $appsecret = '7634c6e2889e0d366e4ff2e58bc520fa';
    
    //用户访问这个方法
    public function weChatAccredit($buttonType) {
        //这个地址是回调地址
        $url = 'http://'.$_SERVER['HTTP_HOST'].'/index/WxIndex/getChatInfo';
        //调用方法
        accredit($url,$buttonType); 
    }
    
    //用于访问服务器的方法
    public function accredit($redirect_url,$state){
        //拼接URL
        $url = "https://open.weixin.qq.com/connect/oauth2/authorize?appid={$this->appid}&redirect_uri={$redirect_url}&response_type=code&scope=snsapi_userinfo&state={$state}#wechat_redirect";
        //重定向
        $this->redirect($url);
    }

到目前为止,用户重定向访问微信服务器之后,就会带着code回调开发者服务器,因此我们就要拿code继续换取AccessToken

3,第三阶段

    //回调到这个方法
    public function getChatInfo(){
        $we_chat = new WxController();//实例化微信类
        $code = $_GET['code'];      //获取跳转后的code
           $state = $_GET['state'];    //获取state
        
        $access_token = getAccessToken($code); //根据code获取token
        根据access_token和openid获取到用户信息
        $we_chat_user_info = getWeChatUserInfo($access_token['access_token'],$access_token['openid']);

        $this->gogogo($state,$access_token["openid"]);
       
    public function getAccessToken($code){
        $url = "https://api.weixin.qq.com/sns/oauth2/access_token?appid={$this->appid}&secret={$this->appsecret}&code={$code}&grant_type=authorization_code";
        $res = file_get_contents($url); //获取文件内容或获取网络请求的内容
        $access_token = json_decode($res,true);
        return $access_token;
    }
    
    public function getWeChatUserInfo($access_token,$openid){
        $url = "https://api.weixin.qq.com/sns/userinfo?access_token={$access_token}&openid={$openid}&lang=zh_CN";
        $output = file_get_contents($url);
        $weChatUserInfo = json_decode($output,true);
        return $weChatUserInfo;
    }

到此,开发者服务器已经成功获取到用户信息,然后就可以自行编写gogogo()这个方法,通过OpenID进行登录操作,实现自动登录,登录之后把用户请求的网页返回给用户了。

四、附上完整代码

1,\app\index\controller\WxindexController.php

<?php

namespace app\index\controller;
use app\index\controller\WxController;
use app\index\controller\StudentController;
use app\index\controller\LoginController;
use app\index\model\Student;
use app\index\model\Teacher;
use app\index\model\Term;
 
class WxindexController extends WxController {

    public static $openIdTest = 'openIdTest';
    public static $page = 'page';
    public static $score = 'score';
    public static $course = 'course';
    public static $info = 'info';

    public function page(){ // 跳转到主页
        $this->weChatAccredit($this::$page);
    }

    public function course(){ // 跳转到课程查询
        $this->weChatAccredit($this::$course);
    }

    public function score(){ // 跳转到成绩查询
        $this->weChatAccredit($this::$score);
    }

    public function info(){ // 跳转到个人信息
        $this->weChatAccredit($this::$info);
    }

    /**
     * 微信按钮跳转授权
     */
    public function weChatAccredit($buttonType) {
        $url = 'http://'.$_SERVER['HTTP_HOST'].'/index/WxIndex/getChatInfo';
        $we_chat = new WxController();  //实例化类
        $we_chat->accredit($url,$buttonType); //调用方法
    }

    /**
     * 获取微信用户信息
     */
    public function getChatInfo(){
        $we_chat = new WxController();//实例化微信类
        $code = $_GET['code'];      //获取跳转后的code
           $state = $_GET['state'];    //获取state
        
        $access_token = $we_chat->getAccessToken($code); //根据code获取token
        $this->gogogo($state,$access_token["openid"]);
    }

    //用于跳转到各个方法,传入OpenId和要跳转的方法
    public function gogogo($state,$openid)
    {
        Student::login($openid);
        return 'success';
        //跳转内容请根据实际情况自己编写
    }
}

2,\app\index\controller\WxController.php

<?php
namespace app\index\controller;
use think\Controller;

class WxController extends Controller{

    protected $appid='xxxxxxx';
    //你的微信公众号appid
    protected $appsecret = 'xxxxxxxx';
    //你的微信公众号secret 
 
     //拼接URL
    public function accredit($redirect_url,$state){
        $url = "https://open.weixin.qq.com/connect/oauth2/authorize?appid={$this->appid}&redirect_uri={$redirect_url}&response_type=code&scope=snsapi_userinfo&state={$state}#wechat_redirect";
        $this->redirect($url);
    }

    /**
     * @param $code
     * @return bool|string
     */
    public function getAccessToken($code){
        $url = "https://api.weixin.qq.com/sns/oauth2/access_token?appid={$this->appid}&secret={$this->appsecret}&code={$code}&grant_type=authorization_code";
        $res = file_get_contents($url); //获取文件内容或获取网络请求的内容
        $access_token = json_decode($res,true);
        return $access_token;
    }

    /**
     * 获取用户信息
     * @param unknown $openid
     * @param unknown $access_token
     * @return unknown
     */
    public function getWeChatUserInfo($access_token,$openid){
        $url = "https://api.weixin.qq.com/sns/userinfo?access_token={$access_token}&openid={$openid}&lang=zh_CN";
        $output = file_get_contents($url);
        $weChatUserInfo = json_decode($output,true);
        return $weChatUserInfo;
    }
}

五,总结

整个过程的核心,是那张流程图

阅读 351更新于 2019-11-19

推荐阅读
目录