微信受權登陸-微信公衆號和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再進行接口的調用獲取用戶信息