微信开放平台开发(2) 微信登陆

时间  2019-11-19
标签 微信 开放 平台 开发 登陆 繁體版
原文   原文链接
关键字：微信公众平台 微信开放平台 微信登陆 微信扫码登陆 使用微信帐号登陆网站
做者：方倍工做室 
原文： http://www.cnblogs.com/txw1958/p/weixin-qrlogin.html  

 

在这篇微信公众平台开发教程中，咱们将介绍如何使用微信开放平台接口实现微信扫码登陆的功能。php

 

准备工做

网站应用微信登陆是基于OAuth2.0协议标准构建的微信OAuth2.0受权登陆系统。css

在进行微信OAuth2.在进行微信OAuth2.0受权登陆接入以前，在微信开放平台注册开发者账号，并拥有一个已审核经过的网站应用，并得到相应的AppID和AppSecret，申请微信登陆且经过审核后，可开始接入流程。html

受权流程说明

微信OAuth2.0受权登陆让微信用户使用微信身份安全登陆第三方应用或网站，在微信用户受权登陆已接入微信OAuth2.0的第三方应用后，第三方能够获取到用户的接口调用凭证（access_token），经过access_token能够进行微信开放平台受权关系接口调用，从而可实现获取微信用户基本开放信息和帮助用户实现基础开放功能等。json

微信OAuth2.0受权登陆目前支持authorization_code模式，适用于拥有server端的应用受权。该模式总体流程为：api

  1. 1. 第三方发起微信受权登陆请求，微信用户容许受权第三方应用后，微信会拉起应用或重定向到第三方网站，而且带上受权临时票据code参数；安全

  2. 2. 经过code参数加上AppID和AppSecret等，经过API换取access_token；服务器

  3. 3. 经过access_token进行接口调用，获取用户基本数据资源或帮助用户实现基本操做。微信

获取access_token时序图：session

第一步：请求CODE

登陆方倍工做室微信登陆网站应用app

http://weixin.fangbei.org/login.php

打开后，应用会生成state参数，跳转到如下连接：（登陆前请注意已获取相应网页受权做用域（scope=snsapi_login））

https://open.weixin.qq.com/connect/qrconnect?appid=wxed782be999f86e0e&redirect_uri=http%3A%2F%2Fweixin.fangbei.org%2Flogin.php&response_type=code&scope=snsapi_login&state=123#wechat_redirect

若提示“该连接没法访问”，请检查参数是否填写错误，如redirect_uri的域名与审核时填写的受权域名不一致或scope不为snsapi_login。

参数说明
参数 是否必须 说明
appid 是 应用惟一标识
redirect_uri 是 重定向地址，须要进行UrlEncode
response_type 是 填code
scope 是 应用受权做用域，拥有多个做用域用逗号（,）分隔，网页应用目前仅填写snsapi_login便可
state 否 用于保持请求和回调的状态，受权请求后原样带回给第三方。该参数可用于防止csrf攻击（跨站请求伪造攻击），建议第三方带上该参数，可设置为简单的随机数加session进行校验
返回说明

此时，PC网站上显示以下二维码

 

用户容许受权后，将会重定向到redirect_uri的网址上，而且带上code和state参数

http://weixin.fangbei.org/login.php?code=0317a2c31ccd5eadf1a7a8fffd4a7dbf&state=123

为了知足网站更定制化的需求，咱们还提供了第二种获取code的方式，支持网站将微信登陆二维码内嵌到本身页面中，用户使用微信扫码受权后经过JS将code返回给网站。

JS微信登陆主要用途：网站但愿用户在网站内就能完成登陆，无需跳转到微信域下登陆后再返回，提高微信登陆的流畅性与成功率。 网站内嵌二维码微信登陆JS实现办法：

步骤1：在页面中先引入以下JS文件（支持https）：
<script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
步骤2：在须要使用微信登陆的地方实例如下JS对象：
        <script>
            var obj = new WxLogin({
              id: "login_container",
              appid: "wxed782be999f86e0e",
              scope: "snsapi_login",
              redirect_uri: encodeURIComponent("http://" + window.location.host + "/login.php"),
              state: Math.ceil(Math.random()*1000),
              style: "black",
              href: ""});
        </script>

参数说明

参数 是否必须 说明
id 是 第三方页面显示二维码的容器id
appid 是 应用惟一标识，在微信开放平台提交应用审核经过后得到
scope 是 应用受权做用域，拥有多个做用域用逗号（,）分隔，网页应用目前仅填写snsapi_login便可
redirect_uri 是 重定向地址，须要进行UrlEncode
state 否 用于保持请求和回调的状态，受权请求后原样带回给第三方。该参数可用于防止csrf攻击（跨站请求伪造攻击），建议第三方带上该参数，可设置为简单的随机数加session进行校验
style 否 提供"black"、"white"可选，默认为黑色文字描述。详见文档底部FAQ
href 否 自定义样式连接，第三方可根据实际需求覆盖默认样式。详见文档底部FAQ

完整代码以下

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
    </head>
    <body>
        <span id="login_container"></span>
        <script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
        <script>
            var obj = new WxLogin({
              id: "login_container",
              appid: "wxed782be999f86e0e",
              scope: "snsapi_login",
              redirect_uri: encodeURIComponent("http://" + window.location.host + "/login.php"),
              state: Math.ceil(Math.random()*1000),
              style: "black",
              href: ""});
        </script>
    </body>
</html>

页面显示效果以下 

 

第二步：经过code获取access_token

经过code获取access_token

https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

参数说明
参数 是否必须 说明
appid 是 应用惟一标识，在微信开放平台提交应用审核经过后得到
secret 是 应用密钥AppSecret，在微信开放平台提交应用审核经过后得到
code 是 填写第一步获取的code参数
grant_type 是 填authorization_code
返回说明

正确的返回：

{
    "access_token": "OezXcEiiBSKSxW0eoylIeFy2HFC4Bxv9JvC0Sgj4Px4_8TX1ci3jF_QP_6sWjvx2rCAUjXEP1_9edZdJLf3MIwii2N8cnTooDfx7nYpFRmOSZyq4gb2FNdWJr__KUqPtcfVUvg6XBTucZZ4zH6v8VQ",
    "expires_in": 7200,
    "refresh_token": "OezXcEiiBSKSxW0eoylIeFy2HFC4Bxv9JvC0Sgj4Px4_8TX1ci3jF_QP_6sWjvx2lW60INlf6AK1q21rW7mJyc5yG3GZ9p1psANOKTi2EZUQXA6CnwSXxDQlJ3421tEOvCWIrJhkA8oTqjsLKYG-yg",
    "openid": "oJekJs2faTQ47FGjDOEIyOPMN97s",
    "scope": "snsapi_login",
    "unionid": "o4wcnw02YjFUYglZxV0LwcBkVF6Y"
}

参数说明

参数 说明
access_token 接口调用凭证
expires_in access_token接口调用凭证超时时间，单位（秒）
refresh_token 用户刷新access_token
openid 受权用户惟一标识
scope 用户受权的做用域，使用逗号（,）分隔
 unionid 当且仅当该网站应用已得到该用户的userinfo受权时，才会出现该字段。

错误返回样例：

{"errcode":40029,"errmsg":"invalid code"}

刷新access_token有效期

access_token是调用受权关系接口的调用凭证，因为access_token有效期（目前为2个小时）较短，当access_token超时后，可使用refresh_token进行刷新，access_token刷新结果有两种：

  1. 1. 若access_token已超时，那么进行refresh_token会获取一个新的access_token，新的超时时间；

  2. 2. 若access_token未超时，那么进行refresh_token不会改变access_token，但超时时间会刷新，至关于续期access_token。

refresh_token拥有较长的有效期（30天），当refresh_token失效的后，须要用户从新受权。

请求方法

获取第一步的code后，请求如下连接进行refresh_token：

https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=APPID&grant_type=refresh_token&refresh_token=REFRESH_TOKEN

参数说明
参数 是否必须 说明
appid 是 应用惟一标识
grant_type 是 填refresh_token
refresh_token 是 填写经过access_token获取到的refresh_token参数
返回说明

正确的返回：

{ 
"access_token":"ACCESS_TOKEN", 
"expires_in":7200, 
"refresh_token":"REFRESH_TOKEN", 
"openid":"OPENID", 
"scope":"SCOPE" 
}

参数 说明
access_token 接口调用凭证
expires_in access_token接口调用凭证超时时间，单位（秒）
refresh_token 用户刷新access_token
openid 受权用户惟一标识
scope 用户受权的做用域，使用逗号（,）分隔

错误返回样例：

{"errcode":40030,"errmsg":"invalid refresh_token"}

注意：

一、Appsecret 是应用接口使用密钥，泄漏后将可能致使应用数据泄漏、应用的用户数据泄漏等高风险后果；存储在客户端，极有可能被恶意窃取（如反编译获取Appsecret）；

二、access_token 为用户受权第三方应用发起接口调用的凭证（至关于用户登陆态），存储在客户端，可能出现恶意获取access_token 后致使的用户数据泄漏、用户微信相关接口功能被恶意发起等行为；

三、refresh_token 为用户受权第三方应用的长效凭证，仅用于刷新access_token，但泄漏后至关于access_token 泄漏，风险同上。

 

建议将secret、用户数据（如access_token）放在App云端服务器，由云端中转接口调用请求。

 
第三步：经过access_token调用接口

获取access_token后，进行接口调用，有如下前提：

  1. 1. access_token有效且未超时；

  2. 2. 微信用户已受权给第三方应用账号相应接口做用域（scope）。

对于接口做用域（scope），能调用的接口有如下：

受权做用域（scope） 接口 接口说明
snsapi_base /sns/oauth2/access_token 经过code换取access_token、refresh_token和已受权scope
/sns/oauth2/refresh_token 刷新或续期access_token使用
/sns/auth 检查access_token有效性
snsapi_userinfo /sns/userinfo 获取用户我的信息

其中snsapi_base属于基础接口，若应用已拥有其它scope权限，则默认拥有snsapi_base的权限。使用snsapi_base可让移动端网页受权绕过跳转受权登陆页请求用户受权的动做，直接跳转第三方网页带上受权临时票据（code），但会使得用户已受权做用域（scope）仅为snsapi_base，从而致使没法获取到须要用户受权才容许得到的数据和基础功能。

接口调用方法可查阅《微信受权关系接口调用指南》

 

下面是获取用户我的信息，并dump出来

array(10) {
  ["openid"]=> string(28) "oJekJs2faTQ47FGjDOEIyOPMN97s" ["nickname"]=> string(15) "方倍工做室" ["sex"]=> int(1) ["language"]=> string(5) "zh_CN" ["city"]=> string(6) "海淀" ["province"]=> string(6) "北京" ["country"]=> string(6) "中国" ["headimgurl"]=> string(139) "http://wx.qlogo.cn/mmopen/Q3auHgzwzM7zdkiaZFdM5qrwk1iaEESVjfhWVHNg22teOnfKSPpKDE0l2yfQm1hM9AeT8pO1BKElntEBZ7DxibzdteBp3H3yXESwPYUkhibNObs/0" ["privilege"]=> array(0) { } ["unionid"]=> string(28) "o4wcnw02YjFUYglZxV0LwcBkVF6Y" }

 

完整代码实现以下

<?php

/*
    方倍工做室 http://www.fangbei.org/
    CopyRight 2014 All Rights Reserved
    微信开放平台接口SDK
*/


define('APPID',        "wxed782be999f86e0e");
define('APPSECRET',    "72edec63779f7aa16a3a33447e2c70fb");

class class_weixin
{
    var $appid = APPID;
    var $appsecret = APPSECRET;

    //构造函数，获取Access Token
    public function __construct($appid = NULL, $appsecret = NULL)
    {
        if($appid && $appsecret){
            $this->appid = $appid;
            $this->appsecret = $appsecret;
        }
    }

    /*
    *  PART1 网站应用
    */

    //生成扫码登陆的URL
    public function qrconnect($redirect_url, $scope, $state = NULL)
    {
        $url = "https://open.weixin.qq.com/connect/qrconnect?appid=".$this->appid."&redirect_uri=".urlencode($redirect_url)."&response_type=code&scope=".$scope."&state=".$state."#wechat_redirect";
        return $url;
    }

    //生成OAuth2的Access Token
    public function oauth2_access_token($code)
    {
        $url = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=".$this->appid."&secret=".$this->appsecret."&code=".$code."&grant_type=authorization_code";
        $res = $this->http_request($url);
        return json_decode($res, true);
    }

    //获取用户基本信息（OAuth2 受权的 Access Token 获取 未关注用户，Access Token为临时获取）
    public function oauth2_get_user_info($access_token, $openid)
    {
        $url = "https://api.weixin.qq.com/sns/userinfo?access_token=".$access_token."&openid=".$openid."&lang=zh_CN";
        $res = $this->http_request($url);
        return json_decode($res, true);
    }


    //HTTP请求（支持HTTP/HTTPS，支持GET/POST）
    protected function http_request($url, $data = null)
    {
        $curl = curl_init();
        curl_setopt($curl, CURLOPT_URL, $url);
        curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, FALSE);
        curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, FALSE);
        if (!empty($data)){
            curl_setopt($curl, CURLOPT_POST, 1);
            curl_setopt($curl, CURLOPT_POSTFIELDS, $data);
        }
        curl_setopt($curl, CURLOPT_RETURNTRANSFER, TRUE);
        $output = curl_exec($curl);
        curl_close($curl);
        return $output;
    }
}

接口调用方法以下

<?php
header("Content-type: text/html; charset=utf-8");
require_once('wxopen.class.php');
$weixin = new class_weixin();
if (!isset($_GET["code"])){
    $redirect_url = 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
    $jumpurl = $weixin->qrconnect($redirect_url, "snsapi_login", "123");
    Header("Location: $jumpurl");
}else{
    $oauth2_info = $weixin->oauth2_access_token($_GET["code"]);
    $userinfo = $weixin->oauth2_get_user_info($oauth2_info['access_token'], $oauth2_info['openid']);
    var_dump($userinfo);
}

 

F.A.Q
1. 什么是受权临时票据（code）？

答：第三方经过code进行获取access_token的时候须要用到，code的超时时间为10分钟，一个code只能成功换取一次access_token即失效。code的临时性和一次保障了微信受权登陆的安全性。第三方可经过使用https和state参数，进一步增强自身受权登陆的安全性。

2. 什么是受权做用域（scope）？

答：受权做用域（scope）表明用户受权给第三方的接口权限，第三方应用须要向微信开放平台申请使用相应scope的权限后，使用文档所述方式让用户进行受权，通过用户受权，获取到相应access_token后方可对接口进行调用。

3. 网站内嵌二维码微信登陆JS代码中style字段做用？

答：第三方页面颜色风格可能为浅色调或者深色调，若第三方页面为浅色背景，style字段应提供"black"值（或者不提供，black为默认值），则对应的微信登陆文字样式为黑色。相关效果以下：

 

若提供"white"值，则对应的文字描述将显示为白色，适合深色背景。相关效果以下：

 

4.网站内嵌二维码微信登陆JS代码中href字段做用？

答：若是第三方以为微信团队提供的默认样式与本身的页面样式不匹配，能够本身提供样式文件来覆盖默认样式。举个例子，如第三方以为默认二维码过大，能够提供相关css样式文件，并把连接地址填入href字段

.impowerBox .qrcode {width: 200px;}
.impowerBox .title {display: none;}
.impowerBox .info {width: 200px;}
.status_icon {display：none}
.impowerBox .status {text-align: center;} 

相关效果以下：

 

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程