前言

這篇文章帶大家掌握 從0到1實(shí)現(xiàn)微信公眾平臺(tái)授權(quán)登錄

微信公眾號(hào)授權(quán)登錄到底哪幾步回調(diào)地址，安全域名怎么配置代碼怎么寫(xiě)出了問(wèn)題怎么辦

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

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

 文檔看似很復(fù)雜，實(shí)際上前端只需要兩步：

1、去訪問(wèn)微信提供的一個(gè)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

或者h(yuǎn)ttps://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ū)別就是是否彈出用戶(hù)授權(quán)；

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

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

2、訪問(wèn)這個(gè)地址后，微信會(huì)回跳你設(shè)置的redirect_uri地址，并且?guī)Щ貋?lái)一個(gè)code，

把這個(gè)code傳給后臺(tái)，后臺(tái)去訪問(wèn)微信的接口，獲取用戶(hù)的openid和access_token,

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

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

 1、在申請(qǐng)到認(rèn)證公眾號(hào)之前，你可以先通過(guò)測(cè)試號(hào)申請(qǐng)系統(tǒng)，快速申請(qǐng)一個(gè)接口測(cè)試號(hào)，立即開(kāi)始接口測(cè)試開(kāi)發(fā)。（測(cè)試號(hào)申請(qǐng)地址）

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

redirect_uri的配置：

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

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

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

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

 （4）微信公眾號(hào)正式號(hào)設(shè)置

三、代碼怎么寫(xiě)

代碼如下（示例）：

<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); //后臺(tái)登錄
      } 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
      );
    },
    //訪問(wèn)微信地址，用來(lái)獲取code
    getWeChatCode() {
      let local = encodeURIComponent(window.location.href); //獲取當(dāng)前頁(yè)面地址作為回調(diào)地址
      let appid = indexConfig.weixinAppId;
      //通過(guò)微信官方接口獲取code之后，會(huì)重新刷新設(shè)置的回調(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傳遞給后臺(tái)接口，靜默登錄
    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>

四、出現(xiàn)問(wèn)題怎么辦

在開(kāi)發(fā)出現(xiàn)問(wèn)題時(shí)，可以通過(guò)接口調(diào)用的返回碼，以及報(bào)警排查指引（在公眾平臺(tái)官網(wǎng) - 開(kāi)發(fā)者中心處可以設(shè)置接口報(bào)警），來(lái)發(fā)現(xiàn)和解決問(wèn)題

總結(jié)

到此這篇關(guān)于微信公眾號(hào)網(wǎng)頁(yè)授權(quán)登錄的超簡(jiǎn)單實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)微信公眾號(hào)網(wǎng)頁(yè)授權(quán)登錄內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論