H5獲取OpenID的方法

一、H5獲取OpenID

獲取OpenID是在H5頁面進行的開發中比較重要的一步，由於OpenID是標識用戶身份的唯一標識符，所以有了OpenID之後，在之後的用戶追蹤、數據分析等方面都會極大方便。

以微信H5頁面為例，獲取OpenID的方式一般是通過授權登錄的方式，具體實現方式如下：

// 公眾號appid
const APPID = 'your_appid';

// 授權登錄地址
const url = encodeURIComponent(window.location.href);

// 發送請求，獲取access_token
axios.get(`https://api.weixin.qq.com/sns/oauth2/access_token?appid=${APPID}&secret=${SECRET}&code=${code}&grant_type=authorization_code`)
    .then(res => {
        const openid = res.data.openid;
        // ...此處可進行後續邏輯處理
    });

二、H5獲取OpenID時必須跳轉頁面嗎

其實，H5獲取OpenID時，通常是需要在跳轉頁面後，通過code來獲取access_token，再從access_token中獲取OpenID。但是，如果是在微信內置瀏覽器中進行H5開發，可以通過JS-SDK中的介面來直接獲取OpenID，無需跳轉：

// 公眾號appid
constAPPID = 'your_appid';

// 通過微信JS-SDK獲取OpenID
wx.ready(function() {
    wx.getUserInfo({
        success: function(res) {
            const openid = res.data.openid;
            // ...此處可進行後續邏輯處理
        }
    });
});

三、H5獲取OpenID appid

在獲取OpenID之前，需要先獲得公眾號（或小程序）的appid，並在開發過程中進行使用。如果您還沒有自己的公眾號或小程序，請儘快前往微信公眾平台進行申請，申請後可以在開發文檔中獲取相關的appid。

四、H5獲取位置信息

通過Geolocation API，可以在H5頁面中獲取到用戶當前所在的位置信息，具體代碼如下：

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
        const latitude = position.coords.latitude; // 經度
        const longitude = position.coords.longitude; // 緯度
        // ...此處可進行後續邏輯處理
    });
} else {
    alert('您的瀏覽器不支持獲取位置信息，請升級瀏覽器版本！');
}

五、H5獲取當前地理位置

通過微信JS-SDK，可以在H5頁面中獲取到當前位置的地理信息（即所在城市等信息），具體代碼如下：

// 獲取地理位置
wx.ready(function() {
    wx.getLocation({
        type: 'wgs84',
        success: function (res) {
            var latitude = res.latitude; // 緯度，浮點數，範圍為90 ~ -90
            var longitude = res.longitude; // 經度，浮點數，範圍為180 ~ -180。
            // ...此處可進行後續邏輯處理
        }
    });
});

六、H5獲取手機號碼

為了更好地了解用戶行為，H5頁面有時需要獲取用戶手機號碼。微信提供了一個便捷的介面來獲取用戶的手機號碼，代碼如下：

wx.ready(function() {
    wx.checkSession({
      success: function() {
        wx.request({
          url: 'https://api.weixin.qq.com/wxa/getphonenumber?access_token=ACCESS_TOKEN',
          data: {
            encryptedData: "",
            iv: ""
          },
          method: 'GET',
          success: function(res){
              const phoneNumber = res.data.phoneNumber;
              // ...此處可進行後續邏輯處理
            }
        });
      },
      fail: function() {
        wx.login({
          success: function(res) {
            if (res.code) {
              wx.request({
                url: 'https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=' + res.code + '&grant_type=authorization_code',
                success: function(res) {
                  // 保存session_key，後面解密手機號時使用
                  session_key = res.data.session_key;
                }
              });
            } else {
              console.log('登錄失敗！' + res.errMsg)
            }
          }
        })
      }
    });
});

七、H5獲取設備信息

如果需要在H5頁面中獲取設備信息，可以通過window.navigator.userAgent來獲取相關信息，代碼如下：

const userAgent = window.navigator.userAgent;
const isMobile = /Mobile/i.test(userAgent); // 是否為移動設備
const isAndroid = /Android/i.test(userAgent); // 是否為Android系統
const isIOS = /iPhone|iPad|iPod/i.test(userAgent); // 是否為iOS系統
const isWechat = /MicroMessenger/i.test(userAgent); // 是否為微信瀏覽器
const isMQQBrowser = /MQQBrowser/i.test(userAgent); // 是否為QQ瀏覽器
const isQQ = /\bQQ\b/i.test(userAgent); // 是否為QQ客戶端
// ...此處可進行後續邏輯處理

八、H5獲取微信用戶手機號

通過微信JS-SDK，還可以獲取用戶的微信號碼，具體代碼如下：

wx.ready(function() {
    wx.checkSession({
        success: function() {
            wx.request({
                url: 'https://api.weixin.qq.com/wxa/getphonenumber?access_token=ACCESS_TOKEN',
                data: {
                    encryptedData: "",
                    iv: ""
                },
                method: 'GET',
                success: function(res){
                    const phoneNumber = res.data.phoneNumber;
                    // ...此處可進行後續邏輯處理
                }
            });
        },
        fail: function() {
            wx.login({
                success: function(res) {
                    if (res.code) {
                        wx.request({
                            url: 'https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=' + res.code + '&grant_type=authorization_code',
                            success: function(res) {
                                // 保存session_key，後面解密手機號時使用
                                session_key = res.data.session_key;
                            }
                        });
                    } else {
                        console.log('登錄失敗！' + res.errMsg)
                    }
                }
            })
        }
    });
});

九、H5獲取微信頭像和昵稱

要獲取微信用戶的頭像和昵稱，可以調用微信JS-SDK中的介面，代碼如下：

wx.ready(function() {
    wx.getUserInfo({
        success: function(res) {
            const nickname = res.nickname;
            const headimgurl = res.headimgurl;
            // ...此處可進行後續邏輯處理
        }
    });
});

十、H5獲取手機設備唯一標識

在H5頁面中，要獲取手機設備的唯一標識符，可以通過設備號來進行獲取，代碼如下：

const deviceId = window.localStorage.getItem('deviceId');
if(!deviceId){
    const uuid = [];
    const str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
    for (let i = 0; i < 32; i++) {
        uuid[i] = str.substr(Math.floor(Math.random() * 62), 1);
    }
    uuid[12] = '4';
    uuid[16] = str.substr((uuid[16] & 3) | 8, 1);
    deviceId = uuid.join('');
    window.localStorage.setItem('deviceId', deviceId);
}
// ...此處可進行後續邏輯處理