前幾天做了一個H5頁面項目,它是依托于微信服務(wù)號的網(wǎng)頁.需要包含微信登錄、微信支付以及微信訂單查詢功能;
在這里說一下先說一下微信登錄授權(quán)功能的實現(xiàn)
**微信登錄授權(quán)**
微信登錄授權(quán)呢,分為靜默授權(quán)和非靜默授權(quán);兩個的區(qū)別是scope屬性的屬性值不同,scope= scopr_base是靜默授權(quán)也就是不彈出頁面,直接獲取用戶信息,scope=scope_userinfo是非靜默授權(quán),用戶需要同意授權(quán),然后通過獲得的openid獲取用戶的昵稱,性別,城市等信息...非靜默授權(quán)在用戶未關(guān)注公眾號的情況下也可以使用,因此我比較青睞于這種方式,接下來給大家展示一下這個步驟
A. 獲取微信公眾號的APPID和APPSecret
獲取APPID有兩種方式,一種是公眾號新建立,粉絲不太多,可能會直接使用公眾號APPID,在開發(fā)->基本配置中的開發(fā)者ID中可以看到

但是如果公眾號有更多的粉絲，為了公眾號的用戶體驗，可以使用測試號，開發(fā)者工具->測試號

配合操作，可以看到如下界面

B.回調(diào)域名配置界面

用戶需要在JS界面安全域名中配置安全域名php微信登錄接口開發(fā)，并將提供的安全文件配置到服務(wù)器根目錄下，但配置域名必須是格式，不要帶頭，用這個參數(shù)后面會出現(xiàn)大小寫不正確

C.用戶授權(quán)和獲取代碼

首先網(wǎng)站優(yōu)化，導(dǎo)入.js網(wǎng)站模板，可以參考這個網(wǎng)址使用，

下一步就是更改自己的網(wǎng)址，自己訪問這個網(wǎng)址

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

相關(guān)參數(shù)比較簡單。如上所述，需要注意參數(shù)，使用不同的參數(shù)來達到你的靜默授權(quán)或非靜默授權(quán)的目的

以下是我的登錄JS代碼

.js

var url = this.location.href;
const suffixUrl = url.split("?")[1];
if (suffixUrl == null || suffixUrl == "" || suffixUrl == undefined) {
    var appID = "wx34b2beb43bf1a5a5";
    var redirectUri = "http://www.muyi-nature.com/h5/user/saveOpenId";
    // 授權(quán)接口地址
    var strUrl = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appID + "&redirect_uri="
        + encodeURIComponent(redirectUri) + "&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect";
    window.location.href = strUrl;
    
}

D.獲取

這很簡單。在公共平臺上，它為我們提供了接口在線調(diào)試功能。選擇微信公眾開發(fā)者平臺->界面在線調(diào)試。使用測試號的可以在這里兌換php微信登錄接口開發(fā)，選擇，輸入自己的總和。得到

但是?。。∪绻褂梅菧y試號，建議不要在前端交換。前端使用攔截URL中的代碼發(fā)送給后端，并從后端發(fā)起請求以換取提高安全性，不易被他人獲取

p>

此時，后臺已經(jīng)可以根據(jù)代碼獲取到用戶的信息，然后根據(jù)用戶的信息，就可以實現(xiàn)用戶的微信登錄了