微信受权登陆-微信公众号和PC端网站

 

1、微信公众号受权登陆——微信公众平台

微信受权登陆，并调用后台接口，获取用户信息

1.网页受权回调域名

首先要在公众平台官网中的“开发 - 接口权限 - 网页服务 - 网页账号 - 网页受权获取用户基本信息”的配置选项中，修改受权回调域名

2.关于网页受权的两种scope的区别说明

• 一、以snsapi_base为scope发起的网页受权，是用来获取进入页面的用户的openid的，而且是静默受权并自动跳转到回调页的。用户感知的就是直接进入了回调页（每每是业务页面）

• 二、以snsapi_userinfo为scope发起的网页受权，是用来获取用户的基本信息的。但这种受权须要用户手动赞成，而且因为用户赞成过，因此无须关注，就可在受权后获取该用户的基本信息。(H5页面微信受权获取用户,注册成为用户id,能够作点赞关注等功能)

• 三、用户管理类接口中的“获取用户基本信息接口”，是在用户和公众号产生消息交互或关注后事件推送后，才能根据用户OpenID来获取用户基本信息。这个接口，包括其余微信接口，都是须要该用户（即openid）关注了公众号后，才能调用成功的。

3.关于UnionID机制

• 一、请注意，网页受权获取用户基本信息也遵循UnionID机制。即若是开发者有在多个公众号，或在公众号、移动应用之间统一用户账号的需求，须要前往微信开放平台（open.weixin.qq.com）绑定公众号后，才可利用UnionID机制来知足上述需求。
• 二、UnionID机制的做用说明：若是开发者拥有多个移动应用、网站应用和公众账号，可经过获取用户基本信息中的unionid来区分用户的惟一性，由于同一用户，对同一个微信开放平台下的不一样应用（移动应用、网站应用和公众账号），unionid是相同的。

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

• 一、引导用户进入受权页面赞成受权，获取code

• 二、经过code换取网页受权access_token（与基础支持中的access_token不一样）

• 三、若是须要，开发者能够刷新网页受权access_token，避免过时

• 四、经过网页受权access_token和openid获取用户基本信息（支持UnionID机制）

前端：用户赞成受权，获取code

• 必要条件：

  • appId 公众号的惟一标识
  • redirect_uri 受权后重定向的回调连接地址， 请使用 urlEncode 对连接进行处理
  • response_type code
  • scope 是 应用受权做用域，snsapi_base （不弹出受权页面，直接跳转，只能获取用户openid），snsapi_userinfo （弹出受权页面，可经过openid拿到昵称、性别、所在地。而且， 即便在未关注的状况下，只要用户受权，也能获取其信息 ）
  • 必要参数： #wechat_redirect 不管直接打开仍是作页面302重定向时候，必须带此参数

• appSecreat (后台须要，经过code换取网页受权access_token)

  具体写法

• 前端调起受权页,当前微信用户受权登录
• 提供code，后台获取openid,而后再根据openid获取unionid

var Jumpurl = encodeURIComponent(window.location.href);
var appid = "wx3d15e2600fa71eee3";
window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + 
appid + '&redirect_uri=' + Jumpurl + 
'&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect

• 若是用户赞成受权，页面将跳转至 redirect_uri/?code=CODE&state=STATE
• 将code传给后台，继续下一步骤

2、PC端微信受权登陆——微信开放平台

接入网站应用开发，为用户提供了微信登陆功能(测试也能够经过审核，主要是网站信息登记表扫描件，网址改一下就行)
有两种方式进行微信二维码扫描登陆

//第一种：直接跳转一个连接页面
经过在PC端直接打开如下连接：
https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

//第二种：支持网站将微信登陆二维码内嵌到本身页面中，用户使用微信扫码受权后经过JS将code返回给网站
<div id="wxqr" class="wxqr"></div>

//步骤1：在页面中先引入以下JS文件（支持https）：
http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js

//步骤2：在须要使用微信登陆的地方实例如下JS对象：
var obj = new WxLogin({
    id:"wxqr", 
    appid: "wxb9e2238ff05c7bd7", 
    scope: "snsapi_login",
    redirect_uri: "https://test.2or3m.com/newWeb/binding_phone.html",
    state: "2or3m",
    style: "white"
});

 

用户容许受权后，将会重定向到redirect_uri的网址上，而且带上code和state参数 后台拿到code再进行接口的调用获取用户信息