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

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

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

1.网页授权回调域名

首先要在公众平台官网中的“开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授权获取用户基本信息”的配置选项中，修改授权回调域名
（网页授权域名是唯一的，js接口安全域名可填写多个）

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

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

微信授权登录-微信公众号和PC端网站相关推荐

开源全平台版知识付费系统源码支持微信小程序+公众号+H5+PC端
分享一个开源全平台版知识付费系统源码,系统支持微信小程序+公众号+H5+PC端,一套系统实现全端数据及用户体系全面打通,轻松实现店铺全网一站式运营.含完整代码包和详细搭建教程. 系统支持视频课程.音频 ...
全平台知识付费系统源码支持微信小程序+公众号+H5+PC端含搭建部署教程
分享一个全平台知识付费系统源码,支持微信小程序+微信公众号+H5+PC端,支持DIY风格装修,含完整程序包和详细的搭建教程. 系统特色功能一览: 1.支持视频课程.音频课程.图文课程.专栏课程等: 2 ...
微信授权登录(微信订阅号使用测试账号)
1.微信授权登录: 微信公众号测试登录: 准备: 1.1 花生壳! 下载地址:http://hsk.oray.com/download/ 1.2 微信公众号:https://mp.weixin.qq. ...
小程序 - 微信授权登录微信授权绑定手机号
用户在使用小程序时,经常需要授权登录,授权登录的作用是获取用户的基本信息,如头像.昵称以及openid等,openid可用于微信授权手机号.微信支付. 微信授权登录 .xhtml如下,wxLogin为 ...
微信网页授权登录（公众号）
第一步先去微信公众平台申请公众号,网址:https://mp.weixin.qq.com/,然后有了公众号申请测试号,拿到appID和appsecret 第二步申请url和域名 (1) 测试号二维 ...
ThinkPHP 微信授权web网页公众号推送模版消息
申请公众平台和公众号各种参数填写完成!!! 我这里主要讲的是代码第一步:前端代码 //这里的代码对应下面的 html 代码 public function index(){$id = $th ...
angularjs 微信授权登录微信支付
最近做一个项目,用angular 一个单页应用,打算打包成跨平台移动App 以及在微信里面使用.给大家一个案例首先,熟悉一下微信授权部分的源代码,如下所示: javascript 前端代码: va ...
Java后端对接微信支付(微信公众号、PC端扫码)
微信流程图项目结构前期准备复制证书将证书中名为apiclient_key.pem的文件复制到你的项目中依赖  <dependency>& ...
微信小程序微信授权登录微信登录
一.调用接口获取临时登录凭证(code) wx.login({success(res) {if (res.code) {// res.code => 登录凭证} else {console.lo ...