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

微信開放平台官方文檔：鏈接