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

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

• 必要条件：

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

• appSecreat (后台需要，通过code换取网页授权access_token)

  具体写法

• 前端调起授权页,当前微信用户授权登陆
• [https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx07e1a11a5dcc8964&redirect_uri=https%3A%2F%2Ftest.2or3m.com%2Fproject%2FaccountID.html&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect]
• 提供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传给后台，继续下一步骤

微信公众官方文档：链接

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

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