微信公眾號網頁授權登錄的超簡單實現步驟

Posted on by

前言

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

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

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

官方文檔介紹微信開放文檔微信開發者平臺文檔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

兩種的區別是：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、在申請到認證公眾號之前，你可以先通過測試號申請系統，快速申請一個接口測試號，立即開始接口測試開發。（測試號申請地址）

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

redirect_uri的配置：

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

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

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

（3）設置回調域名

 （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(); //微信授權
      }
    }
  },
  onload() {},
  mounted() {},
  methods: {
    //判斷是否是微信內置的瀏覽器
    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); //獲取當前頁面地址作為回調地址
      let appid = indexConfig.weixinAppId;
      //通過微信官方接口獲取code之後，會重新刷新設置的回調地址【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>

四、出現問題怎麼辦

在開發出現問題時，可以通過接口調用的返回碼，以及報警排查指引（在公眾平臺官網 – 開發者中心處可以設置接口報警），來發現和解決問題

總結

到此這篇關於微信公眾號網頁授權登錄的超簡單實現的文章就介紹到這瞭,更多相關微信公眾號網頁授權登錄內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：