第微信公眾號網頁授權登錄的超簡單實現步驟目錄前言一、微信公眾號授權登錄到底哪幾步二、回調地址，安全域名怎么配置三、代碼怎么寫四、出現問題怎么辦總結

前言

這篇文章帶大家掌握從0到1實現微信公眾平臺授權登錄

微信公眾號授權登錄到底哪幾步回調地址，安全域名怎么配置代碼怎么寫出了問題怎么辦

一、微信公眾號授權登錄到底哪幾步

官方文檔介紹微信開放文檔微信開發者平臺文檔/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html

文檔看似很復雜，實際上前端只需要兩步：

1、去訪問微信提供的一個url地址

/connect/oauth2/authorizeappid=wx520c15f417810387redirect_uri=https%3A%2F%2F%2Fphp%2Findex.php%3Fd%3D%26c%3DwxAdapter%26m%3DmobileDeal%26showwxpaytitle%3D1%26vb2ctag%3D4_2030_5_1194_60response_type=codescope=snsapi_basestate=123#wechat_redirect

或者/connect/oauth2/authorizeappid=wxf0e81c3bee622d60redirect_uri=http%3A%2F%2F%2Foauth_response.phpresponse_type=codescope=snsapi_userinfostate=STATE#wechat_redirect

兩種的區別是：scope為snsapi_base和scope為snsapi_userinfo，區別就是是否彈出用戶授權；

應用授權作用域，snsapi_base（不彈出授權頁面，直接跳轉，只能獲取用戶openid），snsapi_userinfo（彈出授權頁面，可通過openid拿到昵稱、性別、所在地。并且，即使在未關注的情況下，只要用戶授權，也能獲取其信息）

這個地址需要你配置的地方有：appid(微信公眾號id)和redirect_uri（回調地址）

2、訪問這個地址后，微信會回跳你設置的redirect_uri地址，并且帶回來一個code，

把這個code傳給后臺，后臺去訪問微信的接口，獲取用戶的openid和access_token,

到這里也用實現了微信的授權登錄。

二、回調地址，安全域名怎么配置

1、在申請到認證公眾號之前，你可以先通過測試號申請系統，快速申請一個接口測試號，立即開始接口測試開發。（測試號申請地址）

微信開放文檔微信開發者平臺文檔/doc/offiaccount/Basic_Information/Requesting_an_API_Test_Account.html

redirect_uri的配置：

只需要配置回調域名(請注意，這里填寫的是域名（是一個字符串），而不是URL，因此請勿加http://等協議頭；)。

(1)打開微信公眾號測試號（方便開發調式），修改js安全域名，也可以設置192的地址

（2）找到體驗接口權限表-網頁賬戶-修改

（3）設置回調域名

（4）微信公眾號正式號設置

三、代碼怎么寫

代碼如下（示例）：

template

div/div

/template

script

import{login}from"@/api/login.js";

importindexConfigfrom"@/config/index.config";

exportdefault{

data(){

return{};

created(){

this.isWXBrowser=this.isWXBrowser();

if(this.isWXBrowser){

letcode=this.getUrlCode("code");

if(code){

this.wxLogin(code);//后臺登錄

}else{

this.getWeChatCode();//微信授權

onload(){},

mounted(){},

methods:{

//判斷是否是微信內置的瀏覽器

isWXBrowser(){

return(

String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i))===

"micromessenger"

//截取地址欄code

getUrlCode(name){

return(

decodeURIComponent(

(newRegExp("[|]"+name+"="+"([^]+)(|#|;|$)").exec(

location.href

)||[,""])[1].replace(/\+/g,"%20")

)||null

//訪問微信地址，用來獲取code

getWeChatCode(){

letlocal=encodeURIComponent(window.location.href);//獲取當前頁面地址作為回調地址

letappid=indexConfig.weixinAppId;

//通過微信官方接口獲取code之后，會重新刷新設置的回調地址【redirect_uri】

window.location.href=

"/connect/oauth2/authorizeappid="+

appid+

"redirect_uri="+

local+

"response_type=codescope=snsapi_basestate=1#wechat_redirect";

//把code傳遞給后臺接口，靜默登錄

wxLogin(code){

login(code).then((res)={

if(res.success){

uni.setStorageSync("token",res.data.session.token);

uni.setStorageSync("userid",res.data.session.userid);

uni.navigateTo.push({

route:"/pages/works/index",

}else{

uni.showToast({

title:res.msg,

duration:3000,

icon:"no