微信h5靜默和非靜默授權獲取用戶openId的方法和步驟

 更新時間:2020-06-14 00:01:13   作者:佚名   我要評論(0)

一、openId是什么?
openId是用戶在當前公眾號下的唯一標識(‘身份證'),就是說通過這個openId,就能區分在這個公眾號下具體是哪個用戶。
二、openId有什么用?

一、openId是什么?

openId是用戶在當前公眾號下的唯一標識(‘身份證'),就是說通過這個openId,就能區分在這個公眾號下具體是哪個用戶。

二、openId有什么用?

假如用戶A在當前公眾號下購買了一件商品,用戶的下單信息肯定要存儲到后臺數據庫,那根據什么進行存儲呢?openId是用戶在當前公眾號下的唯一標識,通過openId和用戶的下單購買信息進行鍵值對的數據綁定。那么我要查詢該用戶購買過什么商品,就能夠通過openId去查詢,并且數據是唯一的,不會和另外的用戶數據有沖突。

拓展:UnionID:一個商家或公司可能會有多個公眾號,假如用戶A同時都關注了這個公司下面的三個公眾號,那么這個用戶就會有三個openId(一個公眾號就對應一個openID)。如果作為開發者的我們,要對這個用戶在這三個公眾號下消費的數據進行匯總,我怎么獲取到這三份數據(同一用戶的)?答案是 UnionId,微信開發者文檔:如果開發者擁有多個移動應用、網站應用和公眾帳號,可通過獲取用戶基本信息中的unionid來區分用戶的唯一性,因為同一用戶,對同一個微信開放平臺下的不同應用(移動應用、網站應用和公眾帳號),unionid是相同的。就是說如果要獲取用戶在同一公司不同公眾號下的數據,后臺表結構不但要關聯openId,還要關聯UnionId。

三、怎么獲取openId?

(一)登錄微信公眾平臺后臺獲取公眾號的AppId,設置回調地址。

回調地址設置頁面向導:開發>接口權限>網頁服務>網頁授權>修改。開發的項目需要放到已經解析好服務器域名的服務器下,同時把Mp***.text文件放到服務器根目錄下,此時你的服務器必須能聯通外網也就是有公網IP,并且80端口是打開的,可以使用阿里云等服務器,默認配置就可以了。

(二)根據開發需要,靜默授權還是非靜默授權

   ① 靜默授權:snsapi_base,沒有彈窗,只能獲取用戶的openId。

   ②非靜默授權:snsapi_userinfo,有彈框彈出需要用戶手動點擊確認授權。可以獲取openId,用戶的頭像、昵稱等

(三)前端代碼,配置的參數要一一對應,獲取code,并調用后臺接口,把code傳給后臺

redirect_uri,這個的意思是:授權完成后再重新回到當前頁面(又刷新了一次頁面)

getUrlParam的方法,可以百度下,就是獲取頁面路徑的某個字段所對應的參數。

如果配置參數一一對應,那么此時已經通過回調地址刷新頁面后,你就會看到在地址欄中的code了。

(四)前端截取地址欄中的code后通過調接口把code傳給后臺,后臺通過code獲取openId和用戶頭像昵稱等信息并返回給前端

為什么,前端不能一起把獲取code和獲取openId的操作一并做了,還要請求后臺,讓后臺獲取openId?

(五)后臺通過 code、AppSecret(公眾號平臺后臺取得)請求微信鏈接獲取openId

前端具體代碼如下,可復制(記得把文中的 window.APPID改為自己公眾號的APPID)

<template>
 <div></div>
</template>
 
<script>
import GetUrlParam from '@/assets/js/util/getUrlParam.js'
export default {
 name: 'Index',
 data () {
  return {
  }
 },
 created () {
  this.getCode()
 },
 methods: {
  getCode () { // 非靜默授權,第一次有彈框
   const code = GetUrlParam('code') // 截取路徑中的code,如果沒有就去微信授權,如果已經獲取到了就直接傳code給后臺獲取openId
   const local = window.location.href
   if (code == null || code === '') {
    window.location. + window.APPID + '&redirect_uri=' + encodeURIComponent(local) + '&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect'
   } else {
    this.getOpenId(code) //把code傳給后臺獲取用戶信息
   }
  },
  getOpenId (code) { // 通過code獲取 openId等用戶信息,/api/user/wechat/login 為后臺接口
   let _this = this
   this.$http.post('/api/user/wechat/login', {code: code}).then((res) => {
    let datas = res.data
    if (datas.code === 0 ) {
     console.log('成功')
    }
   }).catch((error) => {
    console.log(error)
   })
  }
 }
}
</script>
 
<style lang="less" scoped>
 
</style>

(六)通過openId做用戶的數據綁定或查詢等操作

    前后端都獲取了openId后,就能通過openId做用戶數據的綁定和查詢了。

(七)補充說明

   使用上述方法進行的微信授權,在手機端會有兩次空白頁跳轉,時間雖然很短暫,但有些產品經理會覺得這種體驗不好(實在很欠揍)。解決方法是:可以把跳轉到微信獲取code的這段鏈接拼接好直接復制到  微信公眾平臺 后臺管理系統菜單列表里面。這樣點擊菜單,在回調頁通過截取url中的code,就能直接獲取到code了,就避免了多次跳轉的情況。

(八)解決微信授權成功進入項目后,點擊手機物理返回鍵或返回會出現空白頁或者報錯的情況,空白頁是因為授權頁就是空白頁。可以參考我的另一篇文章:

解決微信授權成功后點擊按返回鍵出現空白頁和報錯的問題
https://www.jb51.net/article/188238.htm

到此這篇關于微信h5靜默和非靜默授權獲取用戶openId的方法和步驟的文章就介紹到這了,更多相關微信h5靜默和非靜默授獲取openId內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持腳本之家!

您可能感興趣的文章:

  • 微信公眾平臺實現獲取用戶OpenID的方法
  • 微信小程序授權獲取用戶詳細信息openid的實例詳解
  • 微信小程序 獲取微信OpenId詳解及實例代碼
  • .NET微信公眾號獲取OpenID和用戶信息
  • 微信小程序如何獲取openid及用戶信息
  • 微信小程序獲取用戶openid的實現
  • 微信公眾平臺開發教程①獲取用戶Openid及個人信息圖文詳解
  • 微信小程序獲取用戶openId的實現方法
  • 微信小程序 springboot后臺如何獲取用戶的openid

相關文章

最新評論

买宝宝用品赚钱吗 体育彩票11选5走势图 重庆快乐十分软件破解版 内蒙古体彩十一选五任8 辽宁11选5任5 支付宝运动天天红包赛能领多少钱 pk10开奖查询 河南11选5开奖结果 马耳他幸运飞艇加3减3技巧 排列五专家杀号两元网 黑龙江22选5奖池奖金 下载app双色球七乐彩 急速赛车彩票公式 股票投资的24堂必 炒股视频 江苏快3预测号一定牛 排列5走势图500期