软件开发架构师

微信授权登录-微信公众号和PC端网站

问题 50 2019-02-26 03:59

https://blog.csdn.net/qq_34664239/article/details/79107529

一、微信公众号授权登录——微信公众平台

微信授权登录,并调用后台接口,获取用户信息
1.网页授权回调域名
首先要在公众平台官网中的“开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授权获取用户基本信息”的配置选项中,修改授权回调域名

网页授权

2.关于网页授权的两种scope的区别说明
  • 1、以snsapi_base为scope发起的网页授权,是用来获取进入页面的用户的openid的,并且是静默授权并自动跳转到回调页的。用户感知的就是直接进入了回调页(往往是业务页面)

  • 2、以snsapi_userinfo为scope发起的网页授权,是用来获取用户的基本信息的。但这种授权需要用户手动同意,并且由于用户同意过,所以无须关注,就可在授权后获取该用户的基本信息。(H5页面微信授权获取用户,注册成为用户id,可以做点赞关注等功能)

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

3.关于UnionID机制
  • 1、请注意,网页授权获取用户基本信息也遵循UnionID机制。即如果开发者有在多个公众号,或在公众号、移动应用之间统一用户帐号的需求,需要前往微信开放平台(open.weixin.qq.com)绑定公众号后,才可利用UnionID机制来满足上述需求。
  • 2、UnionID机制的作用说明:如果开发者拥有多个移动应用、网站应用和公众帐号,可通过获取用户基本信息中的unionid来区分用户的唯一性,因为同一用户,对同一个微信开放平台下的不同应用(移动应用、网站应用和公众帐号),unionid是相同的。
具体而言,网页授权流程分为四步
  • 1、引导用户进入授权页面同意授权,获取code

  • 2、通过code换取网页授权access_token(与基础支持中的access_token不同)

  • 3、如果需要,开发者可以刷新网页授权access_token,避免过期

  • 4、通过网页授权access_token和openid获取用户基本信息(支持UnionID机制)

前端:用户同意授权,获取code

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传给后台,继续下一步骤

微信公众官方文档:链接

二、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再进行接口的调用获取用户信息

微信开放平台官方文档:链接

文章评论