微信登入實作代碼

方法一

實作微信登入需要以下幾個步驟：

注冊微信公衆平台 / 微信開放平台 / 微信小程式。
擷取AppID和AppSecret。這些是用于通過OAuth2授權擷取通路令牌和使用者資訊的憑據。
在前端頁面內建微信登入按鈕，并使用微信JS-SDK生成簽名和調用微信登入接口。
在後端建立一個OAuth2.0的授權認證接口來接收來自微信JS-SDK的請求。該接口将使用AppID和AppSecret擷取通路令牌以及一些使用者個人資訊。
在後端驗證使用者Token是否有效。如果有效，則傳回使用者的完整資訊。
前端通過成功接收的使用者資訊，完成自己的登入過程。

下面是一個使用Vue.js架構實作微信登入的示例代碼：

<template>
  <div>
    <!-- 微信登入按鈕 -->
    <button @click="wechatLogin">微信登入</button>
  </div>
</template>

<script>
import wx from 'weixin-js-sdk';
import axios from 'axios';

export default {
  data() {
    return {
      accessToken: '',
      userInfo: {},
    };
  },
  mounted() {
    // 配置微信JS-SDK
    axios.get('/api/wechat/signature').then((response) => {
      const data = response.data;
      wx.config({
        debug: true,
        appId: data.appId,
        timestamp: data.timestamp,
        nonceStr: data.nonceStr,
        signature: data.signature,
        jsApiList: ['login', 'getUserInfo', 'checkSession'],
      });
    });
  },
  methods: {
    // 點選微信登入按鈕，觸發微信登入
    wechatLogin() {
      const that = this;
      wx.checkSession({
        success() {
          console.log('session有效');
          wx.login({
            success(res) {
              if (res.code) {
                axios.post('/api/login/wechat', { code: res.code }).then((response) => {
                  that.userInfo = response.data;
                });
              } else {
                console.log('登入失敗！' + res.errMsg);
              }
            },
          });
        },
        fail() {
          console.log('session失效');
          // session失效時，重新生成session
          wx.login({
            success(res) {
              if (res.code) {
                axios.post('/api/login/wechat', { code: res.code }).then((response) => {
                  that.userInfo = response.data;
                });
              } else {
                console.log('登入失敗！' + res.errMsg);
              }
            },
          });
        },
      });
    },
  },
};
</script>

在上面的代碼中，我們首先在mounted()鈎子中配置微信JS-SDK。接着，當使用者點選微信登入按鈕時，wehcatLogin()方法被調用，用于調用微信登入接口并擷取使用者資訊。最後，我們通過axios來向後端的OAuth2.0接口發送請求，驗證令牌，擷取使用者資訊，并把使用者資訊儲存到userInfo變量中。

方法二：

微信登入有兩種方式，一種是通過微信授權登入實作，另一種是通過微信開放平台的掃碼登入實作。下面是這兩種方式的示範代碼：

通過微信授權登入實作：

在需要接入微信登入的前端頁面中加入微信授權登入按鈕，如下所示：

<!-- 引入微信授權登入按鈕圖檔 -->
<img src="https://res.wx.qq.com/connect/zh_CN/htmledition/images/ico_txl.svg" alt="微信登入" id="wxLoginBtn" />

<!-- 引入微信JS SDK -->
<script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>

<script>
  // 初始化微信JS SDK
  wx.config({
    // 配置參數
    appId: 'YOUR_APP_ID',
    timestamp: 'YOUR_TIMESTAMP',
    nonceStr: 'YOUR_NONCE_STR',
    signature: 'YOUR_SIGNATURE',
    jsApiList: ["checkJsApi", "login"]
  });

  // 點選微信登入按鈕之後執行的函數
  const wxLogin = () => {
    wx.checkJsApi({
      jsApiList: ['login'],
      success: function(res) {
        if (res.checkResult.login == true) {
          wx.login({
            success: function (res) {
              if (res.code) {
                // 将 code 發送給服務端，服務端就可以擷取到使用者 openid 等資訊
                console.log('使用者code:', res.code);
              } else {
                console.log('登入失敗！' + res.errMsg);
              }
            }
          });
        } else {
          console.log('微信登入不可用！');
        }
      }
    });
  }

  // 綁定微信登入按鈕的點選事件，執行 wxLogin 函數
  document.getElementById('wxLoginBtn').addEventListener('click', wxLogin);

</script>

在執行上述代碼之前，請先替換其中的 YOUR_APP_ID 、 YOUR_TIMESTAMP 、 YOUR_NONCE_STR 和 YOUR_SIGNATURE 等配置參數為您的微信公衆号的真實資訊。

通過微信開放平台的掃碼登入實作：

在您的網站中添加微信掃碼登入入口，如下所示：

<a href="https://open.weixin.qq.com/connect/qrconnect?appid=YOUR_APPID&redirect_uri=YOUR_REDIRECT_URI&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect">微信掃碼登入</a>

在執行上述代碼之前，請先替換 YOUR_APPID 和 YOUR_REDIRECT_URI 為您在微信開放平台中建立的應用程式的 AppID 和回調 URL。

在回調URL的後端代碼中，使用以下代碼擷取微信使用者的 openid:

// 擷取微信使用者的 access_token，并設定響應頭 Access-Control-Allow-Origin *
app.use(async(ctx, next) => {
  if (ctx.url.indexOf('/authCallback') >= 0) {
    let code = ctx.query.code;
    let tokenBaseUrl = 'https://api.weixin.qq.com/sns/oauth2/access_token?appid=' + WX_APP_ID + '&secret=' + WX_APP_SECRET + '&code=' + code + '&grant_type=authorization_code';
    let response = await axios.get(tokenBaseUrl);
    ctx.set('Access-Control-Allow-Origin', '*');
    ctx.response.body = response.data;
    await next();
  }
});

// 擷取目前 accessToken 對應的微信使用者的 openid，并設定響應頭 Access-Control-Allow-Origin *
app.use(async(ctx, next) => {
  if (ctx.url.indexOf('/getOpenid') >= 0) {
    let accessToken = ctx.query.accessToken;
    let openidBaseUrl = 'https://api.weixin.qq.com/sns/auth?access_token=' + accessToken + '&openid=OPENID';
    let response = await axios.get(openidBaseUrl);
    ctx.set('Access-Control-Allow-Origin', '*');
    ctx.response.body = response.data;
    await next();
  }
});

在執行上述代碼之前，請先替換 WX_APP_ID 和 WX_APP_SECRET 為您在微信開放平台中建立的應用程式的 AppID 和 AppSecret。

方法三

使用微信登入需要進行以下幾個步驟：

在微信公衆平台開發者中心進行應用的注冊和配置，擷取APPID和APPSECRET。同時需要在開發者中心的網頁授權擷取使用者基本資訊中配置回調URL。
接收到微信授權後回調伺服器，并且在請求時帶上code參數。code隻能使用一次，用于擷取access_token，并且access_token有效期為2小時。如果需要重新整理access_token，需要使用refresh_token。
使用access_token和openid調用微信API，擷取使用者資訊和權限。

以下是一個簡單的微信登入實作代碼

// 引入axios庫
import axios from 'axios';

// 微信登入
async wechatLogin() {
  // 微信登入擷取code
  const authUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${yourappid}&redirect_uri=${encodeURIComponent(callbackUrl)}&response_type=code&scope=snsapi_userinfo&state=wechat#wechat_redirect`;
  const { code } = await this.$router.push(authUrl);
  
  // 擷取access_token
  const resp1 = await axios.get(`https://api.weixin.qq.com/sns/oauth2/access_token?appid=${yourappid}&secret=${yoursecret}&code=${code}&grant_type=authorization_code`);
  const { access_token, openid } = resp1.data;

  // 擷取使用者資訊
  const resp2 = await axios.get(`https://api.weixin.qq.com/sns/userinfo?access_token=${access_token}&openid=${openid}&lang=zh_CN`);
  console.log(resp2.data);
}

代碼中使用了axios庫進行了網絡請求，實作了擷取code、access_token和使用者資訊的功能。您需要将代碼中的 yourappid 和 yoursecret 替換為您在微信公衆平台開發者中心中擷取的 APPID 和 APPSECRET。同時，您也需要配置回調URL。當使用者授權通過後，微信會将使用者重定向到您設定的回調URL，并将code作為url的參數。之後，您可以使用axios庫通路微信API，擷取使用者資訊。

需要注意的是，微信API的調用需要滿足微信的網絡請求安全政策，需要進行簽名驗證等操作。是以，建議您先從微信官方文檔了解微信API的調用方式和相關安全政策，然後再進行代碼的編寫。

微信登入實作代碼

繼續閱讀

Android繞過微信包名限制對接微信登入和支付前言最終效果原理代碼End

Android 關于微信原生登入和友盟第三方微信登入來擷取code那些坑（40029問題）

【WeChat】之微信小程式登入（獲得unionid）（Java版加解密）

微信開放平台掃碼登入擷取使用者基本資訊！附可用demo

AndroidStudio接入微信登入

使用粒子群算法優化供應鍊網絡設計随着企業經營方式的變革，供應鍊管理越來越受到重視。現代供應鍊涉及到從原材料采購到最終産品

不到半小時，chatGPT協助程式設計完成SpringbootJava門店庫存管理核心代碼在不少企業，已陸續開始采用與Cha

強制開機自啟動的安卓app，相關權限和實作代碼

企業微信登入不上怎麼辦？4種類型及解決方案

微信被當機，三步驟幫你解決。嗨，我是洋洋。今天聊聊你怕被微信當機怎麼辦。你的微信零錢突然被當機了，不要害怕，接下來教你三

Android微信登入以及分享內建步驟

重大改進：QQ可使用微信賬号登入QQ可以通過采用綁定微信的方式，使用微信賬号進行登入，在QQ最新用戶端登入界面，出現了“

Z1ProV2版的聯網方法。·首先打開微信，下拉頂部的小程式菜單，在彈出的界面輸入凱迪仕貓眼智能鎖小程式。·點選打開小程

榮耀手表4重要更新，手表微信功能詳解！榮耀手表4的推送更新，版本号是304，明确寫了“新增微信應用和微信支付功能”，老Q

第29期最新AI大模型開源項目❶項目名稱：NewHope★開源實作代碼/模型權重★面向程式設計的llama-2-13b微調語

不懂第三方網站、App如何接入微信登入怎麼辦？這裡我詳解單點登入之第三方微信登入（建議收藏）