转自：http://www.cnblogs.com/linjunjie/p/6378166.html#3902595

说下需求，一个网页要在三类容器运行，公司app，微信自动登录，浏览器。

假设是已经申请完成各平台开发者账号。

先来简单的，微博和QQ

微博：

引入微博JS

<script src="http://tjs.sjs.sinajs.cn/open/api/js/wb.js?appkey=*******&debug=true" type="text/javascript" charset="utf-8"></script>

appkey中，填入你的微博开发者id(替换****)

1	< span  id="wb_connect_btn">微博登录按钮</ span >

在你的页面微博登录按钮标签上，加入以上id。页面加载时，微博会自动加载样式，你也可以自己强行修改。

<script>
    WB2.anyWhere(function (W) {
        W.widget.connectButton({
            id: "wb_connect_btn",
            type: '3,2',
            callback: {
                login: function (o) { //登录后的回调函数
　　　　　　　　　　　　console.log(o);
                    thirdparty(null,null,o.avatar_hd, o.name ,3, o.id);//个人方法
                    try{
                        document.getElementsByClassName('loginout')[0].click();
　　　　　　　　　　　　　　　//页面需求，当前页面登录完成之后，不进行跳转，所以模拟点击事件，让微博账号在当前域中退出。不影响下次登录。（元素为微博动态添加）
　　　　　　　　　　　　　　　//微博没有提供退出方法。下面的logout为另一种开发模式调用。

                    }catch(e){
                        console.log(e);
                    }
                },
                logout: function () { //退出后的回调函数
                }
            }
        });
    });
</script>

将以上标签全部加入html中。

至此，只要在页面中登录之后，就能在控制台看到返回数据。当然，测试要在微博注册的域下。

 QQ登录：

和微博一样，引入JavaScript文件

<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-appid="******" charset="utf-8"></script>

微博类似，替换为你的appid

<span id="qqLoginBtn"></span>

登录标签中加入id标识

然后JavaScript中加入以下代码：

QC.Login({
                    //btnId：插入按钮的节点id，必选
                    btnId:"qqLoginBtn",
                    //用户需要确认的scope授权项，可选，默认all
                    scope:"all",
                    //按钮尺寸，可用值[A_XL| A_L| A_M| A_S|  B_M| B_S| C_S]，可选，默认B_S
                    size: "B_S"
                }, function(reqData, opts){//登录成功
                    //根据返回数据，更换按钮显示状态方法
                    console.log(reqData);//查看返回数据
                    QC.Login.getMe(function(openId, accessToken){//获取用户的openId
                        console.log('QQOPENID:'+openId);
                        thirdparty(null,null,reqData.figureurl_qq_2,reqData.nickname,1,openId);
                        QC.Login.signOut();//退出QQ登录调用事件
                    });
                }
            );

测试要在QQ中注册的域名下。重要的事情，再说一遍。

QQ和微博登录，大致相同，只要引入JS文件，然后直接调用方法即可，QQ比微博更和谐，直接提供退出事件。上面代码中有。。

现在来说最蛋疼的微信登录。

微信登录提供两种方法：

第一种，扫码登录：

需要在微信开发者平台中，注册获取appId。

微信登录按钮：

<span class="weixin-login"></span>

在你微信登录按钮上，添加点击事件，执行以下代码：

$('.weixin-login').on('click',function(){
            window.location.href='https://open.weixin.qq.com/connect/qrconnect?' +
                'appid=*******&redirect_uri=http%3a%2f%2fwww.xxxxxx.com%2f'+window.location.pathname.substr(1)+'&response_type=code&scope=snsapi_login&state=3d6be0a4035d839573b04816624a415e#wechat_redirect';
        });

需要替换：

redirect_url:要想传当前url，直接encodeURIComponent(window.location.href) //当然，需要你自己进行拼接，不懂的留言

至此，当用户点击之后，跳转至扫码界面：

例如：https://passport.yhd.com/wechat/callback.do?code=CODE&state=3d6be0a4035d839573b04816624a415e

至此，拿到第一步令牌，code。在你的回调页面中，你要获取url中的code去和微信换取下一步的令牌。因为换取下一步的令牌需要涉及到跨域请求，但是微信不让跨域请求，只能在后台进行后续事项。

第二步，后台请求：https://api.weixin.qq.com/sns/oauth2/access_token?appid=[APPID]&secret=[SECRET]&code=[CODE]&grant_type=authorization_code

替换中括号中的数据。（我走的get请求）。

返回以下数据：

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

最后一步就不说了：

https://api.weixin.qq.com/sns/userinfo?access_token=[ACCESS_TOKEN]&openid=[OPENID]

替换成上次请求获取到的数据，再请求一次，获奖用户基本信息。

1、OAuth2.0

　　OAuth（开放授权）是一个开放标准，允许用户让第三方应用访问该用户在某一网站上存储的私密的资源（如照片，视频，联系人列表），而无需将用户名和密码提供给第三方应用。

　　允许用户 提供一个令牌， 而不是用户名和密码来访问他们存放在特定服务提供者的数据。每一个令牌授权一个特定的网站（例如，视频编辑网站)在特定的时段（例如，接下来的2小时内）内访问特定的资源（例如仅仅是某一相册中的视频）。这样，OAuth允许用户授权第三方网站访问他们存储在另外的服务提供者上的信息，而不需要分享他们的访问许可或他们数据的所有内容。

2、目标

　　我们这里主要模拟使用OAuth2.0，用户通过扫描我们网页应用的二维码并进行授权登录来获取用户的基本信息的过程。详细的接口相关信息可以在微信开放平台上查看： https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&lang=zh_CN

3、前期准备（获取微信开发者权限）

　　我们这里主要讲的是网站（Web）应用，网站应用微信登录是基于OAuth2.0协议标准构建的微信OAuth2.0授权登录系统(即上面的协议)。在微信客户端授权登录(获取用户信息）的可以查看: http://www.cnblogs.com/0201zcr/p/5131602.html

　　在进行微信OAuth2.在进行微信OAuth2.0授权登录接入之前，在微信开放平台注册开发者帐号，并拥有一个已审核通过的网站应用，并获得相应的AppID和AppSecret，申请微信登录且通过审核后，可开始接入流程。

3.1、注册开发者账号

　　可以在 https://open.weixin.qq.com/ 这里申请开发的账号。由于是腾讯的网页，这里可以直接通过 QQ号进行登录。

3.2、提交网站应用审核

　　在已经登录的界面中选择“管理中心”——》网站应用——》创建网站应用

 　　将会弹出下面的界面

　　填写过后，还有有一个页面需要填写，提交一份纸质版申请书扫描件（会提供模板，我们下载再来填写后，需盖章，签名），配置回调域名（扫码登录后会跳转的页面）等。

　　之后提交审核即可，等微信审核通过，我们即可获得我们需要的网页应用的 appid和AppSecret，并配置后回调的域名了（这三样是我们开发所必须的）。

3.3、开发者资质认证

　　由于我们这里要使用微信登录的接口，所以我们还需要向微信提出认证，只有认证了才能使用微信那些高级的接口。未认证的如下图所示

 　　认证之后是这样子的：

 　  我现在暂时没有找到可以向公众账号那样子的测试账号的申请。如果有知道怎么可以申请到测试账号的高手，希望能赐教一下。

　　接下来，我们就可以开始我们的网页微信扫码登录开发了。

4、授权流程说明

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

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

1. 第三方发起微信授权登录请求，微信用户允许授权第三方应用后，微信会拉起应用或重定向到第三方网站，并且带上授权临时票据code参数；
2. 通过code参数加上AppID和AppSecret等，通过API换取access_token；
3. 通过access_token进行接口调用，获取用户基本数据资源或帮助用户实现基本操作。

 　　获取access_token时序图：

 

5、获取网页的二维码

　　当我们通过微信的认证，获取到了 appid和AppSecret，并配置了回调的域名。我们就已经可以获取属于我们网页的二维码了，获取的方式很简单，只需打开一个微信的链接，加上我们的appid和回调域名即可在网页上面打开二维码，用户用微信客户端扫码并授权登录之后即会跳转到我们配置的回调域名下。

注意：

1、这里填写的是域名（是一个字符串），而不是URL，因此请勿加http://等协议头；
2、授权回调域名配置规范为全域名，比如需要网页授权的域名为：www.qq.com，配置以后此域名下面的页面http://www.qq.com/music.html 、 http://www.qq.com/login.html 都可以进行OAuth2.0鉴权。但http://pay.qq.com 、 http://music.qq.com 、 http://qq.com无法进行OAuth2.0鉴权

5.1、请求url说明

　　第三方使用网站应用授权登录前请注意已获取相应网页授权作用域（scope=snsapi_login），则可以通过在PC端打开以下链接：

https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

 

 参数说明

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

 返回说明

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

redirect_uri?code=CODE&state=STATE

 　　若用户禁止授权，则重定向后不会带上code参数，仅会带上state参数

redirect_uri?state=STATE

5.2、事例：

　　一号店的微信二维码链接如下：

https://open.weixin.qq.com/connect/qrconnect?appid=wxbdc5610cc59c1631&redirect_uri=https%3A%2F%2Fpassport.yhd.com%2Fwechat%2Fcallback.do&response_type=code&scope=snsapi_login&state=3d6be0a4035d839573b04816624a415e#wechat_redirect

 　　将其复制到浏览器中打开即可获得一号店的二维码，二维码页面如下：

　　通过使用微信客户端的扫一扫功能，扫描该二维码，即会跳转到上面填写redirect_uri所在的地址上。假如用户同意授权，这里就获得了微信返回的code参数了。

6、获取用户信息

　　假如前面已经获得code。我们可以通过code参数去获取用户openid和access_token,进而获得用户的信息。

6.1、通过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":"ACCESS_TOKEN", 
"expires_in":7200, 
"refresh_token":"REFRESH_TOKEN",
"openid":"OPENID", 
"scope":"SCOPE",
"unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"
}

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

错误返回样例：

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

注意：

• code参数的超时时间是5分钟，且每次请求的code参数的值都不一样。
• access_token的超时时间是32分钟。

6.2、通过access_token获取用户的基本信息

获取的前提条件

• access_token有效且为超时；
• 微信用户已授权给第三方应用账号相应接口作用域（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作用域的授权是扫码之后无需用户点击授权，扫码后直接跳转，用户感觉不到授权了，但这种授权方式能获取的数据量有限，这里我们要获取用户的基本信息，我们需要使用snsapi_userinfo授权。使用snsapi_userinfo授权，扫码后出现类似于下面的授权界面

　　此接口用于获取用户个人信息。开发者可通过OpenID来获取用户基本信息。特别需要注意的是， 如果开发者拥有多个移动应用、网站应用和公众帐号，可通过获取用户基本信息中的unionid来区分用户的唯一性，因为只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号，用户的unionid是唯一的。换句话说，同一用户，对同一个微信开放平台下的不同应用，unionid是相同的。请注意，在用户修改微信头像后，旧的微信头像URL将会失效，因此开发者应该自己在获取用户信息后，将头像图片保存下来，避免微信头像URL失效后的异常情况。

　　

https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID

 参数说明

参数	是否必须	说明
access_token	是	调用凭证（上一个请求中获得）
openid	是	普通用户的标识，对当前开发者帐号唯一（上一个请求中获得）
lang	否	国家地区语言版本，zh_CN 简体，zh_TW 繁体，en 英语，默认为zh-CN

返回说明

正确的Json返回结果：

{ 
"openid":"OPENID",
"nickname":"NICKNAME",
"sex":1,
"province":"PROVINCE",
"city":"CITY",
"country":"COUNTRY",
"headimgurl": "http://wx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/0",
"privilege":[
"PRIVILEGE1", 
"PRIVILEGE2"
],
"unionid": " o6_bmasdasdsad6_2sgVt7hMZOPfL"

}

参数	说明
openid	普通用户的标识，对当前开发者帐号唯一
nickname	普通用户昵称
sex	普通用户性别，1为男性，2为女性
province	普通用户个人资料填写的省份
city	普通用户个人资料填写的城市
country	国家，如中国为CN
headimgurl	用户头像，最后一个数值代表正方形头像大小（有0、46、64、96、132数值可选，0代表640*640正方形头像），用户没有头像时该项为空
privilege	用户特权信息，json数组，如微信沃卡用户为（chinaunicom）
unionid	用户统一标识。针对一个微信开放平台帐号下的应用，同一用户的unionid是唯一的。

错误的Json返回示例:

{ 
"errcode":40003,"errmsg":"invalid openid"
}

7、总结 

　　最近着手开发了微信网页扫码登录和公众号授权登录收获颇丰，两者的开发很类似。以下是我个人摸索过程中发现的两者的异同：

• 两者都可以通过微信客户端扫码授权的方式，让第三方页面获得微信用户的一些基本信息（昵称、性别、所在地、在微信唯一标示等……）。他们都是通过提供一个链接让用户授权的方式。但网页版需要在页面打开二维码之后授权，而公众号则需要用户先关注了我们的公众号，然后点开公众号里面的链接，确认授权即可。
• 网页扫码登录需要将授权的链接（二维码链接）在网页中打开、而公众号授权登录的链接必须要微信客户端中打开。
• 无论网页扫码登录还是在公众号中授权登录，都是通过授权的方式获得一个code参数，之后通过code参数获取access_token和openid和通过access_token和openid去获取用户的基本信息的请求链接是一样的。
• 在开发公众号授权登录的过程中，我发现了有测试账号的提供，足以满足我们的测试和开发，但在开发网页扫码时，暂时未发现哪里能获取测试账号，我是通过申请获取的。（希望知道哪里有测试账号的请求高手赐教）。

 第一步：获取AppID AppSecret(不做解释，自己去微信公众平台申请)

第一步：填写服务器配置

第二步：验证服务器地址的有效性

第三步：依据接口文档实现业务逻辑

用户向公众号发送消息时，公众号方收到的消息发送者是一个OpenID，是使用用户微信号加密后的结果，每个用户对每个公众号有一个唯一的OpenID。此外，由于开发者经常有需在多个平台（移动应用、网站、公众帐号）之间共通用户帐号，统一帐号体系的需求，微信开放平台（open.weixin.qq.com）提供了UnionID机制。开发者可通过OpenID来获取用户基本信息，而如果开发者拥有多个应用（移动应用、网站应用和公众帐号，公众帐号只有在被绑定到微信开放平台帐号下后，才会获取UnionID），可通过获取用户基本信息中的UnionID来区分用户的唯一性，

1.获取access_token

公众号可以使用AppID和AppSecret调用本接口来获取access_token;

接口调用：https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET

2.获知微信服务器的IP地址列表：https://api.weixin.qq.com/cgi-bin/getcallbackip?access_token=ACCESS_TOKEN

自定义菜单

自定义菜单接口可实现多种类型按钮，如下：

 1、click：点击推事件

用户点击click类型按钮后，微信服务器会通过消息接口推送消息类型为event 的结构给开发者（参考消息接口指南），并且带上按钮中开发者填写的key值，开发者可以通过自定义的key值与用户进行交互；

2、view：跳转URL

用户点击view类型按钮后，微信客户端将会打开开发者在按钮中填写的网页URL，可与网页授权获取用户基本信息接口结合，获得用户基本信息。

3、scancode_push：扫码推事件

4、scancode_waitmsg：扫码推事件且弹出“消息接收中”提示框

5、pic_sysphoto：弹出系统拍照发图

6、pic_photo_or_album：弹出拍照或者相册发图
7、pic_weixin：弹出微信相册发图器

8、location_select：弹出地理位置选择器

9、media_id：下发消息（除文本消息）

10、view_limited：跳转图文消息URL

请注意，3到8的所有事件，仅支持微信iPhone5.4.1以上版本，和Android5.4以上版本的微信用户，旧版本微信用户点击后将没有回应，开发者也不能正常接收到事件推送。9和10，是专门给第三方平台旗下未微信认证（具体而言，是资质认证未通过）的订阅号准备的事件类型，它们是没有事件推送的，能力相对受限，其他类型的公众号不必使用。

微信网页授权
如果用户在微信客户端中访问第三方网页，公众号可以通过微信网页授权机制，来获取用户基本信息，进而实现业务逻辑。
1.到公众平台官网中的开发者中心页配置授权回调域名

snsapi_base 只获取到用户的openid

snsapi_userinfo 用来获取用户的基本信息

关于网页授权access_token和普通access_token的区别

1、微信网页授权是通过OAuth2.0机制实现的，在用户授权给公众号后，公众号可以获取到一个网页授权特有的接口调用凭证（网页授权access_token），通过网页授权access_token可以进行授权后接口调用，如获取用户基本信息；
2、其他微信接口，需要通过基础支持中的“获取access_token”接口来获取到的普通access_token调用。

网页授权获取用户基本信息也遵循UnionID机制，可通过获取用户基本信息中的unionid来区分用户的唯一性

具体而言，网页授权流程分为四步：

• • 1 第一步：用户同意授权，获取code
  • 2 第二步：通过code换取网页授权access_token
  • 3 第三步：刷新access_token（如果需要）
  • 4 第四步：拉取用户信息(需scope为 snsapi_userinfo)
  • 5 附：检验授权凭证（access_token）是否有效

 
微信网页授权自我总结：

首先打开OAuth 配置；确定Scopes是snsapi_base还是snsapi_userinfo？

1、以snsapi_base为scope发起的网页授权，是用来获取进入页面的用户的openid的，并且是静默授权并自动跳转到回调页的。用户感知的就是直接进入了回调页（往往是业务页面）
2、以snsapi_userinfo为scope发起的网页授权，是用来获取用户的基本信息的。但这种授权需要用户手动同意，并且由于用户同意过，所以无须关注，就可在授权后获取该用户的基本信息。

然后可通过

$wechat = app('wechat');
$oauth = $wechat->oauth;
$wechat_user = $oauth->user();
实例来获取用户信息；从中拿去到对应微信的openid;
亦或者也可通过微信公众平台文档中的接口逐步获取code,access_token等

如果需要微信授权登录的情况下，获取到用户的信息之后可继续逻辑操作。比如：判断用户如果有登录过就直接跳转到网站首页或者个人中心；若未登录需授权登录方可继续下一步操作。

微信JS-SDK说明文档
微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。

JSSDK使用步骤

步骤一：绑定域名

步骤二：引入JS文件

步骤三：通过config接口注入权限验证配置

步骤四：通过ready接口处理成功验证

所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。

判断当前客户端版本是否支持指定JS接口

wx.checkJsApi({
    jsApiList: ['chooseImage'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
    success: function(res) {
        // 以键值对的形式返回，可用的api值true，不可用为false
        // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
    }
});

获取“分享给朋友”按钮点击状态及自定义分享内容接口

wx.onMenuShareAppMessage({
    title: '', // 分享标题
    desc: '', // 分享描述
    link: '', // 分享链接
    imgUrl: '', // 分享图标
    type: '', // 分享类型,music、video或link，不填默认为link
    dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
    success: function () { 
        // 用户确认分享后执行的回调函数
    },
    cancel: function () { 
        // 用户取消分享后执行的回调函数
    }
});

相关例子：

开发公众号需要用到微信公众平台的服务号，不能是订阅号；因为订阅号可能会对一些权限有限制；从而不能使用到安正超给我们提供的laravel-wechat当中的一些方法和package.

在开发公众号之前我们需要在公众平台的基本配置里面拿到AppId、AppSecret、URL、Token、AESkey.

1.安装包文件：composer require "overtrue/laravel-wechat:~3.0"

2.配置：

（1）注册 ServiceProvider:

　　OvertrueLaravelWechatServiceProvider::class,

（2）添加外观到 config/app.php 中的 aliases 部分:

'EasyWeChat' => OvertrueLaravelWechatFacade::class,

（3）创建配置文件：

　　php artisan vendor:publish

创建成功之后进入到config/wehcat.php文件当中找到appid,secret,token;然后在.env文件中进行配置

然后创建路由：

　　Route::any('/wechat', 'WechatController@serve');

这里用到any请求的原因是因为是通过get请求验证的，但后面发送消息是通过post请求发送的。

创建控制器WechatController：

<?php

namespace AppHttpControllers;  use Log;  class WechatController extends Controller {   /**  * 处理微信的请求消息  *  * @return string  */  public function serve()  {  Log::info('request arrived.'); # 注意：Log 为 Laravel 组件，所以它记的日志去 Laravel 日志看，而不是 EasyWeChat 日志   $wechat = app('wechat');  $wechat->server->setMessageHandler(function($message){  return "欢迎关注 overtrue！";  });   Log::info('return response.');   return $wechat->server->serve();//这一句是对微信进行了验证  } }
最后把这一段代码publish到与服务器同步，再对之前公众平台的基本配置进行提交，提交成功之后在接口权限中的网页授权获取用户信息处点击修改；把相对应的域名放上去，如果没有放上去，它的权限也就获取不到。

红包接口调用：

在使用红包请求功能的时候，注意mch_billno（商户订单号）这个参数；

商户订单号（每个订单号必须唯一）

组成： mch_id+yyyymmdd+10位一天内不能重复的数字。

微信支付：

用easywechat来开发微信支付功能，步骤如下：

一，需要有一个商品下单页面，页面上有你的商品的信息，还要有购买数量，和一个购买按钮。

        用户在这个页面浏览商品信息的时候，可以选择购买的数量，然后点击提交进入下一个页面。

       （这个页面，跟淘宝的商品购买页面一样。）

二，创建一个页面，接收上面一步提交来的数据，然后做如下计算 。

       1，根据商品ID或是提交来的商品信息，生成商品的参数数组。

[php]  view plain  copy

 

 

1. $product = [  
2.     'trade_type'       => 'JSAPI', // 微信公众号支付填JSAPI  
3.     'body'             => '一盒火柴',  
4.     'detail'           => '一盒火柴',  
5.     'out_trade_no'     => 'MYERPORDERID12345678', // 这是自己ERP系统里的订单ID，不重复就行。  
6.     'total_fee'        => 8888, // 金额，这里的8888分人民币。单位只能是分。  
7.     'notify_url'       => 'http://www.xxx.com/order_notify', // 支付结果通知网址，如果不设置则会使用配置里的默认地址  (填写发起支付请求的网址)
8.     'openid'           => 'you-open-id', // 这个不能少，少了要报错。  
9.     // ...  基本上这些参数就够了，或者参考微信文档自行添加删除。  
10. ];  

        2，接下来，生成商品对象。

[php]  view plain  copy

 

 

1. $order = new Order($product);  

        3，再接下来，要进行调用前计算了。

[php]  view plain  copy

 

 

1. $app = new Application(config('wechat'));  
2. $payment = $app->payment;  
3. //统一下单（像公众号支付、扫码支付、APP支付都使用这个接口）
4. $result = $payment->prepare($order); // 这里的order是上面一步得来的。 这个prepare()帮你计算了校验码，帮你获取了prepareId.省心。
5. //刷卡支付使用下面这个接口：
6. //$result = $payment->pay($order);
7. $prepayId = null;  
8. if ($result->return_code == 'SUCCESS' && $result->result_code == 'SUCCESS'){  
9.     $prepayId = $result->prepay_id; // 这个很重要。有了这个才能调用支付。  
10. } else {  
11.     var_dump($result);  
12.     die("出错了。");  // 出错就说出来，不然还能怎样？  
13. }  
14. $config = $payment->configForJSSDKPayment($prepayId); // 这个方法是取得js里支付所必须的参数用的。 没这个啥也做不了，除非你自己把js的参数生成一遍  

        4，就快进入正题，但是，还没完。还要取得一个数据。

[php]  view plain  copy

 

 

1. $app = new Application(config('wechat'));  
2. $js = $app->js;  // 这个是jssdk里页面上需要用到的js参数信息。  

        5，上面获得的$js 和 $config数据，要在页面里显示出来。

                注意，上面几步都不涉及显示，只是在生成页面显示所需要的数据。

                现在才需要把这些显示在页面上。

[php]  view plain  copy

 

 

1. <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" type="text/javascript" charset="utf-8"></script>  
2. 1. <script type="text/javascript" charset="utf-8">  
   2.     wx.config({{ $js->config(array('chooseWXPay')) }});  
   3. </script>
3. <script>  
4.     $(function(){  
5.   
6.         $(".btn-do-it").click(function(){  
7.             wx.chooseWXPay({  
8.                 timestamp: "{{$config['timestamp']}}", // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符  
9.                 nonceStr: '{{$config['nonceStr']}}', // 支付签名随机串，不长于 32 位  
10.                 package: '{{$config['package']}}', // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）  
11.                 signType: '{{$config['signType']}}', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'  
12.                 paySign: '{{$config['paySign']}}', // 支付签名  
13.                 success: function (res) {  
14.                     // 支付成功后的回调函数  
15.                     if(res.err_msg == "get_brand_wcpay_request：ok" ) {  
16.                         alert('支付成功。');  
17.                         window.location.href="{{url("wechat/pay_ok")}}";  
18.                     }else{  
19.                         //alert(res.errMsg);  
20.                         alert("支付失败，请返回重试。");  
21.                     }  
22.                 },  
23.                 fail: function (res) {  
24.                     alert("支付失败，请返回重试。");  
25.                 }  
26.             });  
27.         });  
28.     });  
29. </script>  

        没错，只需要修改这些。

        再来理一个，第二步里，这个页面需要显示一个确认信息，比如商品的名称，和支付的总金额。

        页面上应该有一个按钮，用来触发支付（.btn-do-it）。

        页面里的js就是第5步里要显示的内容。

        总结:

        第一步，商品信息页面，用户选择购买数据，点购买，提交到第二步的确认页面。

        第二步的确认页面，根据商品信息，和微信配置信息，生成必要的支付数据，并显示购买确认信息，和一个支付按钮，

        用户点击支付按钮，发起支付。

        支付完成，提示用户，或转到相应页面。

        微信的开发团队提醒我们，请以微信的推送信息为准来处理订单，不然有可能人财两空。

product.html

[html]  view plain  copy

 

 

1. <!DOCTYPE html>  
2. <html lang="en">  
3. <head>  
4.     <meta charset="UTF-8">  
5.     <title>一盒火柴</title>  
6. </head>  
7. <body>  
8.   
9. <h1>一盒火柴</h1>  
10.   
11. <div>  
12.     卖火柴的小女孩，手里有一堆火柴。  
13. </div>  
14.   
15. <hr>  
16.   
17. <div>  
18.     <form name="form1" action="payment.php" method="post">  
19.         <lable>数量：</lable>  
20.         <input name="qty" value="1" />  
21.         <input name="submit" type="submit" value="购买" />  
22.     </form>  
23. </div>  
24.   
25. </body>  
26. </html>  

payment.php

[php]  view plain  copy

 

 

1. <?php  
2. use EasyWeChatFoundationApplication;  
3. use EasyWeChatPaymentOrder;  
4.   
5. $product = [  
6.     'body'             => '一盒火柴',  
7.     'trade_type'       => 'JSAPI',  
8.     'out_trade_no'     => 'ERP'.time(),  
9.     'total_fee'        => 1,  
10.     'notify_url'       => 'http://test.xxoo.com/wechat/notify/',  
11.     'openid'           => $_SESSION['openid'],  
12.     'attach'           => '卖火柴的小女孩',  
13. ];  
14.   
15. $order = new Order($product);  
16.   
17. $app = new Application(config('wechat'));  
18. $js = $app->js;  
19. $payment = $app->payment;  
20. $result = $payment->prepare($order);  
21. $prepayId = null;  
22. if ($result->return_code == 'SUCCESS' && $result->result_code == 'SUCCESS'){  
23.     $prepayId = $result->prepay_id;  
24. } else {  
25.     var_dump($result);  
26.     die("出错了。");  
27. }  
28. $config = $payment->configForJSSDKPayment($prepayId);  
29. ?>  
30. <!DOCTYPE html>  
31. <html lang="en">  
32. <head>  
33.     <meta charset="UTF-8">  
34.     <title>购买支付</title>  
35. </head>  
36. <body>  
37.   
38. <h1>一盒火柴</h1>  
39.   
40. <div>  
41.     <p>您购买了“一盒火柴”，总价格： 0.01元。</p>  
42.     <p>数量：1盒。</p>  
43. </div>  
44.   
45. <hr>  
46.   
47. <div>  
48.     <input name="button" id="btnPay" type="button" value="支付" />  
49. </div>  
50.   
51.   
52.   
53.   
54. <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" type="text/javascript" charset="utf-8"></script>  
55. <script type="text/javascript" charset="utf-8">  
56.     wx.config({{ $js->config(array('chooseWXPay')) }});  
57. </script>  
58. <script>  
59.     $(function(){  
60.   
61.         $(".btn-do-it").click(function(){  
62.             wx.chooseWXPay({  
63.                 timestamp: "{{$config['timestamp']}}", // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符  
64.                 nonceStr: '{{$config['nonceStr']}}', // 支付签名随机串，不长于 32 位  
65.                 package: '{{$config['package']}}', // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）  
66.                 signType: '{{$config['signType']}}', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'  
67.                 paySign: '{{$config['paySign']}}', // 支付签名  
68.                 success: function (res) {  
69.                     // 支付成功后的回调函数  
70.                     if(res.err_msg == "get_brand_wcpay_request：ok" ) {  
71.                         alert('支付成功。');  
72.                         window.location.href="{{url("wechat/pay_ok")}}";  
73.                     }else{  
74.                         //alert(res.errMsg);  
75.                         alert("支付失败，请返回重试。");  
76.                     }  
77.                 },  
78.                 fail: function (res) {  
79.                     alert("支付失败，请返回重试。");  
80.                 }  
81.             });  
82.         });  
83.     });  
84. </script>  
85. </body>  
86. </html>  

这些是伪代码，payment.php并没有对product.html传来的商品信息做处理。

其实只要看payment.php文件应该知道怎么做了。

其它就两点。a，获取$config，b， 自己写wx.chooseWXPay。

其它的看easywechat文档就行了。

最后

以上就是文静黑米为你收集整理的微信 第三方登录微信网页第三方登录原理的全部内容，希望文章能够帮你解决微信 第三方登录微信网页第三方登录原理所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。