nodejs實現微信授權

longmon 發布于2019-08-21 17:56 / 3422人閱讀

摘要：背景項目基于開發服務器用，提供微信授權和跨域使用微信獲取經緯度，再利用百度地圖獲取用戶所在城市待優化問題項目的微信授權基于老的項目，寫的有點不夠優雅自己開發時把授權信息存到了里面，導致每次進入項目都要走一遍授權，浪費時間和影響用戶體驗解決方

背景
項目基于angular1.3開發
web服務器用node，提供微信授權和跨域
使用微信jssdk獲取經緯度，再利用百度地圖API獲取用戶所在城市

待優化問題：
項目的微信授權基于老的項目，寫的有點不夠優雅；
自己開發時把授權信息存到了sessionStorage里面，導致每次進入項目都要走一遍授權，浪費時間和影響用戶體驗；

解決方案：
重寫授權，讓項目初始化時只請求一個接口，就可以拿到用戶的基本信息；將獲取的用戶基本信息存在cookie里面，并設置一個比較長的過期時間，以便用戶在某一段時間內訪問可以不用再次授權,拿微信授權的相關代碼就貼在下面了.

服務端用node+express

路由部分

router.js
/**
 * router
 */
const express = require("express");
const router = express.Router();
const wxAuth = require("../wxAuth.js");
router.get("/auth", wxAuth.getCode, (req, res, next) => {
    // 授權調用
});
router.get("/wxAuth/getUserInfo", wxAuth.getAccessToken, wxAuth.getUserInfo, (req, res, next) => {
    let back_url = req.query.back_url;
    console.log("back_url=="+back_url);
    if (back_url.indexOf("?path=")) {
        back_url = back_url.replace("?path=","#/")
        console.log(back_url);
    }
    res.redirect(back_url);
});
module.exports = router;

授權中間件 wxAuth.js
//微信公眾號的appId和appSecret配置文件
const weixin = require("../weixin.config.js")

const request = require("request")
const appId = weixin.appID;
const appSecret = weixin.appsecret;
const Host = "http://example.com"
exports.getCode = (req, res, next) => {
    if (req.cookies && req.cookies.openid) {
        next();
    } else {
        console.log(req)
        let back_url = escape(req.query.back_url);
        console.log(req.query.back_url)
        let redirect_url = `http://mall.yizhenjia.com/wxAuth/getUserInfo?back_url=${back_url}`;
        let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${redirect_url}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect `;
        console.log(url);
        res.redirect(url);
    }
}
exports.getAccessToken = (req, res, next) => {
    console.log("====accessToken")
    // console.log(req.query)
    let code = req.query.code;
    let url = `https://api.weixin.qq.com/sns/oauth2/access_token?appid=${appId}&secret=${appSecret}&code=${code}&grant_type=authorization_code `;
    request(url, (error, response, body) => {
        let result = JSON.parse(body);
        console.log(result)
        req.access_token = result.access_token;
        req.openid = result.openid;
        next();
    });
}
exports.getUserInfo = (req, res, next) => {
    console.log("====getUserInfo")
    let access_token = req.access_token;
    let openid = req.openid;
    let url = `https://api.weixin.qq.com/sns/userinfo?access_token=${access_token}&openid=${openid}&lang=zh_CN `
    request(url, (error, response, body) => {
        console.log(body)
        let result = JSON.parse(body);
        res.cookie("openid", result.openid, { maxAge: 24 * 60 * 60 * 1000, httpOnly: false });
        res.cookie("unionid", result.unionid, { maxAge: 24 * 60 * 60 * 1000, httpOnly: false });
        res.cookie("nickname", result.nickname, { maxAge: 24 * 60 * 60 * 1000, httpOnly: false });
        res.cookie("headimgurl", result.headimgurl, { maxAge: 24 * 60 * 60 * 1000, httpOnly: false });
        next();
    });
}

在angular項目啟動的時候，就判斷有沒有用戶union的cookie存在，如果不存在就去授權，并阻止視圖渲染

獲取授權，因為微信授權的時候，會忽略angular路由的哈希值后面的內容，所以把哈希值做了轉換，在服務端的router.js里面，又把哈希值還原，在重定向的時候寫在url里

//放在commonUtil服務里面
轉換url,將路由參數傳給服務器，然后在授權結束后，在重定向的url里獲取路由的哈希值（這里的哈希處理更多的是為了后面微信支付路徑的問題）
self.getAuth = function() {
    var hash = window.location.hash.replace("#/", "?path=");
    var origin = window.location.origin;
    var pathname = window.location.pathname;
    var bcakUrl = origin + pathname + hash;
    window.location.href = "/auth?back_url=" + bcakUrl;
}
 

判斷授權,沒有授權情況下阻止默認渲染，并請求授權（在其他框架的時候也可以做類似處理）
 
 $rootScope.$on("$stateChangeStart", function(event) {
   if (!cookieUtil.hasCookie("unionid") || !cookieUtil.hasCookie("openid")) {
      commonUtil.getAuth();
      event.preventDefault();
     }
 });
 //cookieUtil判斷cookie是否存在，設置cookie和獲取cookie值（angular service）

授權源碼

云服務器 GPU云服務器微信授權詳解微信網頁授權微信授權java php微信登錄授權

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90232.html

2018微博詞云項目深度解析

摘要：最初產生這個項目的想法應該是在年月份，當時正在學習中，就萌生了這樣一個想法從一個用戶這一年發布的微博數據中，提取最有意義的個關鍵詞。這些東西提交完就可以提交審核了，微博應用審核的速度還算比較快的，一兩天基本差不多會審核完。最初產生這個項目的想法應該是在2018年10月份，當時正在學習python中，就萌生了這樣一個想法：從一個用戶這一年發布的微博數據中，提取最有意義的top50個關鍵...

TANKING 2019-07-30 18:42 評論0 收藏0
nodejs微信開發---接入指南

摘要：內網穿透由于微信開發的端口必須是最近貌似增加了，所以一個內網穿透工具還是很有必要的。我個人使用的是瀏覽器微信調試工具。若確認此次請求來自微信服務器，請原樣返回參數內容，則接入生效，成為開發者成功，否則接入失敗。首先github地址奉上：https://github.com/xiadd/shorthand 歡迎star?最近又拾起了微信開發，之前的公眾號是用的flask進行開發的，所以...

LiangJ 2019-08-19 18:40 評論0 收藏0
Fiddler助力微信開發調試

摘要：下面介紹在微信開發調試方面的應用。微信網頁開發中，由于有接口安全域名和授權域名等的限制，導致部分功能需要部署到線上才能測試。設置代理服務器打開微信開發者工具，設置代理設置選擇手動設置代理。 Fiddler是一個非常強大的代理工具，可以讓你的前端開發調試更加方便。下面介紹在微信開發調試方面的應用。微信網頁開發中，由于有js接口安全域名和授權域名等的限制，導致部分功能需要部署到線上才能測...

mengera88 2019-08-26 10:47 評論0 收藏0
微信公眾號開發

摘要：接口安全域名主要是在調用微信時用到。到這里為止測試號配置就完成了二微信網頁授權篇接口地址為這里你可以使用此地址上的接口進行自己編寫，也可以使用別人封裝好的。說明：由于最近開發公眾號，特寫篇文章來記錄下開發流程和開發中的坑。開發用的技術為 react + express , nodejs作為中間層。一.配置篇首先申請接口測試號地址：https://mp.weixin.qq.com/...

nifhlheimr 2019-08-23 12:19 評論0 收藏0
登錄那些事兒

摘要：假如是在同一個域名下，例如與，因為允許設置到二級域名下，所以和是可以共享的，用戶的信息可以通過可逆加密放在二級域名下的，并且設置，就可以一站登錄，站站登錄。原文鏈接：BlueSun | 登錄那些事兒也不知道是什么原因，剛開始不久的職業生涯，在技術這條路走著走著，和「登錄」總是有著一個不解之緣。還記得當初學習Web編程的時候么？不管是Java、.Net、PHP，繼經典「Hello W...

layman 2019-08-19 17:52 評論0 收藏0