PC端网站微信扫码登陆

需求分析：用户经过扫描咱们网页的二维码，若是已经绑定咱们平台的帐户，即成功进入首页，不然提示先绑定我的微信帐号。

一、绑定微信帐号：是经过关注微信公众号实现绑定我的微信帐号。首先经过后台接口获取到ticket值，生成二维码。

$("#erweima-bind").attr('src','https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=' + data.ticket);

二、扫描二维码登陆 https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html

准备工做

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

在https://open.weixin.qq.com/ 这里申请开发的帐号

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

受权流程说明

微信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时序图：

配置了回调的域名注意：

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鉴权。

方法一、PC端打开如下连接：

https://open.weixin.qq.com/connect/qrconnect?appid=wxbdc5610cc59c1631&redirect_uri=https://i.yhd.com/login/login.html&response_type=code&scope=snsapi_login&state=3d6be0a4035d839573b04816624a415e#wechat_redirect

 

方法二、提供了第二种获取code的方式，支持网站将微信登陆二维码内嵌到本身页面中

步骤1：在页面中先引入以下JS文件（支持https），步骤2：在须要使用微信登陆的地方实例如下JS对象

<script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
<script>
    var obj = new WxLogin({
            id : "login_container",// 第三方页面显示二维码的容器id
            appid : "",// 应用惟一标识，在微信开放平台提交应用审核经过后得到
            scope : "snsapi_login",// snsapi_login
            redirect_uri : "https://i.yhd.com/login/login.html",
            //redirect_uri : callback,
            state : "",
            style : "",
            href : "https://i.yhd.com/weixin.css"
        });
</script>

 网站内嵌二维码微信登陆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;}