微信公眾號網(wǎng)頁授權(quán)登錄的超簡單實現(xiàn)步驟

更新時間：2022年06月13日 09:49:38 作者：國服第二切圖仔

微信開放平臺為第三方移動程序提供分享、傳播的接口,使用戶可將第三方程序的內(nèi)容發(fā)布給好友或分享至朋友圈,下面這篇文章主要給大家介紹了關(guān)于微信公眾號網(wǎng)頁授權(quán)登錄的超簡單實現(xiàn)方法,需要的朋友可以參考下

前言

這篇文章帶大家掌握從0到1實現(xiàn)微信公眾平臺授權(quán)登錄
微信公眾號授權(quán)登錄到底哪幾步回調(diào)地址，安全域名怎么配置代碼怎么寫出了問題怎么辦

一、微信公眾號授權(quán)登錄到底哪幾步

官方文檔介紹微信開放文檔微信開發(fā)者平臺文檔https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html

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

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

https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx520c15f417810387&redirect_uri=https%3A%2F%2Fchong.qq.com%2Fphp%2Findex.php%3Fd%3D%26c%3DwxAdapter%26m%3DmobileDeal%26showwxpaytitle%3D1%26vb2ctag%3D4_2030_5_1194_60&response_type=code&scope=snsapi_base&state=123#wechat_redirect

或者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_redirect

兩種的區(qū)別是：scope為snsapi_base和scope為snsapi_userinfo，區(qū)別就是是否彈出用戶授權(quán)；

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

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

2、訪問這個地址后，微信會回跳你設置的redirect_uri地址，并且?guī)Щ貋硪粋€code，

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

到這里也用實現(xiàn)了微信的授權(quán)登錄。

二、回調(diào)地址，安全域名怎么配置

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

微信開放文檔微信開發(fā)者平臺文檔https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Requesting_an_API_Test_Account.html

redirect_uri的配置：

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

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

（2）找到體驗接口權(quán)限表-網(wǎng)頁賬戶-修改

（3）設置回調(diào)域名

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

三、代碼怎么寫

代碼如下（示例）：

<template>
  <div class="login"></div>
</template>
<script>
import { login } from "@/api/login.js";
import indexConfig from "@/config/index.config";
export default {
  data() {
    return {};
  },
  created() {
    this.isWXBrowser = this.isWXBrowser();
    if (this.isWXBrowser) {
      let code = this.getUrlCode("code");
      if (code) {
        this.wxLogin(code); //后臺登錄
      } else {
        this.getWeChatCode(); //微信授權(quán)
      }
    }
  },
  onload() {},
  mounted() {},
  methods: {
    //判斷是否是微信內(nèi)置的瀏覽器
    isWXBrowser() {
      return (
        String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) ===
        "micromessenger"
      );
    },
    //截取地址欄code
    getUrlCode(name) {
      return (
        decodeURIComponent(
          (new RegExp("[?|&]" + name + "=" + "([^&;]+?)(&|#|;|$)").exec(
            location.href
          ) || [, ""])[1].replace(/\+/g, "%20")
        ) || null
      );
    },
    //訪問微信地址，用來獲取code
    getWeChatCode() {
      let local = encodeURIComponent(window.location.href); //獲取當前頁面地址作為回調(diào)地址
      let appid = indexConfig.weixinAppId;
      //通過微信官方接口獲取code之后，會重新刷新設置的回調(diào)地址【redirect_uri】
      window.location.href =
        "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
        appid +
        "&redirect_uri=" +
        local +
        "&response_type=code&scope=snsapi_base&state=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: "none",
          });
          return;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
</style>