關於微信公眾號頁面獲取code進行微信授權登入

2021-03-10 12:00:58

關於微信公眾號頁面獲取code進行微信授權登入

前言

提示:本文章為個人平時開發中的一些坑,對於新手可以耐心看一下,如果您感覺可以的話,請點個小星星再走吧,多謝了~~~

提示:以下是本篇文章正文內容(因為在網頁登入授權這裡,我們只需要跳轉一個URL,在URL上面設定一些資訊就可以,無需引入其他東西)

一、準備所需要的東西

1.官方檔案
2.一個公司認證的公眾號
3.還有編輯器 阿giao~

二、微信官方公眾號開放檔案

1.下面官方檔案連結

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html
所需要的東西在檔案的微信網頁開發-網頁授權

2.開始工作

1.跳轉連結的準備(因為網頁授權只需要跳轉連結):

跳轉所需要的連結(scope為snsapi_userinfo (彈出授權頁面,可通過openid拿到暱稱、性別、所在地。並且, 即使在未關注的情況下,只要使用者授權,也能獲取其資訊 ):

scope還有一種模式(許可權低,如果想要,請移步到官方檔案):
https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxf0e81c3bee622d60&redirect_uri=http%3A%2F%2Fnba.bluewebgame.com%2Foauth_response.php&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirec

2.連結所需要的appid:
這個是在微信開發平臺-開發-就基本設定裡面(前提是已經認證的)

2.連結所需要的redirect_uri:
這個是在微信開發平臺-設定-公眾號設定-功能設定-網頁授權域名(這裡好像只能設定兩個),這裡設定 上面有一個檔案需要下載下來給你們的後端人員然他去設定一下就可以了;
URL 這裡在強調一下(你回撥的頁面必須是在你設定的域名下面);

3.跳轉連結(最為關鍵的一點)
小提示:
這裡有一點切記!!!!!!! appid和回撥的URL必須是同一個公眾號下的!!!appid和回撥的URL必須是同一個公眾號下的!!!appid和回撥的URL必須是同一個公眾號下的!!!
程式碼如下(範例):

 gotoWXLogin() {
      //2 為微信登入
      //此處的ID是在檔案的開發-基本設定裡面
      let appid = "此處為已認證的公眾號的唯一標識(公眾號的開發ID)";
      let url = "這裡是你的回撥URL";
      window.location.href =
        "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
        appid +
        "&redirect_uri=" +
        url +
        "&response_type=code&scope=snsapi_userinfo&state=bc17befd6d5060f16de95e38f6eaf69c&connect_redirect=1#wechat_redirect";
    },

3.獲取官方返給你的code

1.code在哪裡獲取
官方的code會新增在你跳轉到的頁面的URL上面;
2.這裡給一個vue的獲取方式

//在頁面的mounted或者created生命週期裡面獲取就可以
let code = this.getQueryString("code");
//這是方法
getQueryString(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
      var r = window.location.search.substr(1).match(reg); //獲取url中"?"符後的字串並正則匹配
      var context = "";
      if (r != null) context = r[2];
      reg = null;
      r = null;
      return context == null || context == "" || context == "undefined"
        ? ""
        : context;
    }

總結經驗

提示:這裡對文章進行總結:
以上是微信公眾號獲取code的方式,如果你感覺還可以的話,請給個小星星鼓勵一下我吧!