摘要:步入正題吧身份認證網頁授權登陸企業微信提供了的授權登陸方式,可以讓從企業微信終端打開網頁獲取成員的身份信息,從而避免登陸環節。
在開發之前,最好先過一遍官方的API,不然很難往下進行。企業微信API
先介紹幾個基本的概念:
cropid
每個企業都擁有一個唯一的cropid,要獲取次信息可在管理后臺“我的企業”-“企業信息”下查看“企業ID”(這個需要管理員權限的)
userid
每個成員都有一個唯一的userid,其實就是賬號,在管理后臺-“通訊錄”-點某個成員的詳情頁就可以看到了
部門id
每個部門的唯一id,在管理后臺-“通訊錄”-“組織結構”-點擊某個部門右邊的小圓點可以看到
tagid
每個標簽都有一個唯一的id,在管理后臺-“通訊錄”-“標簽”,選中某個標簽,在右上角有個“標簽詳情”按鈕,就可以看到了。
agentid
每個應用都有一個唯一的id,在管理后臺-“應用與小程序”-“應用”,點擊某個應用,就可以看到了。
appid
appid就是開發者id,是開發的識別碼,配合開發者密碼,可調用公眾號的接口能力。
secret
secret是企業應用里面用于保障數據安全的“鑰匙”,每一個應用都有一個獨立的訪問秘鑰,為了保證數據的安全,secret務必不能泄露。
access_token
access_token是企業后臺去企業微信的后臺獲取信息時的重要票據,由cropid和secret產生,所有的接口在通信時候都需攜帶此信息用于驗證接口的訪問權限。(access_token
請求地址: https://qyapi.weixin.qq.com/c...
返回結果前端會拿到access_token ,結果如下:
{
"errcode": 0,
"errmsg": "ok",
"access_token": "accesstoken000001",
"expires_in": 7200
}
首先,獲取access_token是調用企業微信API接口的第一步,相當于創建一個登陸憑證,其他業務API接口,多需要依賴access_token來鑒權調用者身份。因此,開發者在使用業務接口前,要明確access_token的頒發來源,使用正確的access_token。
步入正題吧
身份認證
網頁授權登陸:企業微信提供了OAuth的授權登陸方式,可以讓從企業微信終端打開網頁獲取成員的身份信息,從而避免登陸環節。企業應用中的URL鏈接(包括自定義菜單或者消息中心中的鏈接),均可通過OAuth2.0驗證接口來獲取成員的UserId身份信息。
在進入我們開發的項目之前, 我們需要先訪問第三方服務構造的OAuth2鏈接(參數包括當前第三方服務的身份ID,以及重定向URL),將用戶引導到認證服務器的授權頁面。這里建議企業應用中的URL鏈接直接填寫自己企業的頁面地址。成員操作跳轉到企業頁面時,企業后臺校驗是否有標識識別成員身份的信息,根據獲取的信息在進入相應的頁面。
下面貼一下獲取用戶信息的方法:
第一步需要構造如下鏈接來獲取code參數,我這邊貼一下我實際開發中構造的url:
function getToken(str) { const appId = Env.appId const redirectUrl = encodeURIComponent(`${Env.url}?str=${str||0}`) const agentId = Env.agentId window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${redirectUrl}&response_type=code&scope=snsapi_base&agentid=${agentId}&state=STATE#wechat_redirect` }
說明一下各個參數代表什么意思。
appid:企業的cropid
redirect_uri:授權后重定向的回調鏈接地址,要使用urlencode對連接進行處理
response_type:返回類型,此時固定為:code
scope:應用授權作用域,企業自建應用固定填寫:snsapi_base
state:重定向后會帶上state參數,企業可填寫a-zA-Z0-9的參數值,長度不可超過128個字節
wechat_redirect:終端使用此參數判斷是否需要帶上身份信息
當員工點擊后,頁面將跳轉至redirect_uri?code=CODE&state=STATE,這時候企業可根據拿到的code獲得員工的userid。
下面是進入之前的登陸判斷:
enterWxAuthor () { //獲取用戶token var _this = this; var wxUserInfo = sessionStorage.getItem("userToken"); var code = GetQueryString("code"); if (!wxUserInfo) { if (code) { _this.getTokenKey(); } else { //沒有微信用戶信息,沒有授權-->> 需要授權,跳轉授權頁面 getToken() } } else { //初始化頁面 _this.init(); } },
getTokenKey方法:
getTokenKey: function () { //獲取用戶信息,token 權限 var _this = this; //通過code獲得用戶token var url = "api/...."; //這里的code就是我們上面構造的OAuth鏈接的code參數 var code = GetQueryString("code"); ajax(url, { WXTicket: code }, "").then(function (res) { // ?去除url中code,目的是為了避免重復code if (window.history.replaceState) { window.history.replaceState("", "", window.location.href.replace( /&code=.*?(?=[/])|code=.*?(?=[/])&?/, "")); } else { if (/code=/.test(window.location.href)) { window.location.href = window.location.href.replace(/&code=.*?(?=[/])|code=.*?(?=[/])&?/, ""); } } _Set("tokenStr", res.data) if (res.data.Data) { sessionStorage.setItem("userToken", res.data.Data.Token) } _this.init() }) },
GetQueryString方法:
function GetQueryString(name) { let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)") let r = window.location.search.substr(1).match(reg) if (r !== null) return unescape(r[2]) return null; }
這里要注意一下處理微信端的一些問題。有的用戶喜歡把微信的默認字體設置的很大,這就會引起頁面布局錯亂,下面是把重寫設置網頁字體大小的方法:
// 禁止微信瀏覽器縮放 (function () { if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") { handleFontSize(); } else { if (document.addEventListener) { document.addEventListener("WeixinJSBridgeReady", handleFontSize, false); } else if (document.attachEvent) { document.attachEvent("WeixinJSBridgeReady", handleFontSize); document.attachEvent("onWeixinJSBridgeReady", handleFontSize); } } function handleFontSize() { // 設置網頁字體為默認大小 WeixinJSBridge.invoke("setFontSizeCallback", {"fontSize": 0}); // 重寫設置網頁字體大小的事件 WeixinJSBridge.on("menu:setfont", function () { WeixinJSBridge.invoke("setFontSizeCallback", {"fontSize": 0}); }); } })();
大致的流程就是這樣。總結一下就是:進入系統之前要先走一下微信的OAuth鏈接,拿到code,再憑借code獲取用戶的token。
后面就隨便玩了。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/106744.html
摘要:以下會以其中一個以公積金頁面開發項目作為例子,介紹移動端的一些常見問題和使用作為進行多頁開發的經驗。所以要想在微信開發調試工具中獲取,我們需要使用一種叫做內網穿透的工具。 showImg(https://segmentfault.com/img/remote/1460000015405042?w=800&h=600);兩年前剛接觸移動端開發,剛開始比較疑惑,每次遇到問題都是到社區里提問...
摘要:總結本文以微信小程序常規的發布流程為切入點,循序漸進地介紹了如何集成實現微信小程序預覽上傳功能。 showImg(https://raw.githubusercontent.com/yingye/Blog/master/images/wechat-jenkins.png); 本文首發于 https://github.com/yingye/Blo... ,歡迎各位關注我的Blog,正文以...
摘要:綜合以上問題得出以下結論業務處理失敗消息要以的方式向上傳遞給調用者業務處理失敗消息以參數的方式傳遞不是很適合,并且不能以的方式返回再次思考,最終從里面想到了一點思路幸好是出身。 我需要拍磚 和 看見你們的意見,為團隊少挖坑 場景:創建訂單 實際流程: 終端調用(PC端、移動端APP、微信端、Web端)-->控制器 或 接口-->實際的業務處理-->控制器 或 接口-...
閱讀 2470·2023-04-25 21:41
閱讀 1647·2021-09-22 15:17
閱讀 1921·2021-09-22 10:02
閱讀 2433·2021-09-10 11:21
閱讀 2569·2019-08-30 15:53
閱讀 996·2019-08-30 15:44
閱讀 946·2019-08-30 13:46
閱讀 1125·2019-08-29 18:36