ASP.NET MVC做的微信WEBAPP中调用微信JSSDK扫一扫

今天做一个项目，是在微信上用的，微信WEB APP，里面用到了调用手机摄像头扫一扫二维码的功能，记得以前某个项目里写有的，但是找不到之前那个项目源码了，想复制粘贴也复制不了了，只好对着微信的那个开发文档重新再写过 ，顺便写个博客，以后碰到相同的问题直接复制博客里的代码就行了

以下是显示在微信上的页面：

以下是页面的代码，（用到了MUI）：

@{

Layout = "~/Views/Shared/_Layout.cshtml";

}

<header class="mui-bar mui-bar-nav">

<h1 class="mui-title">扫码认证</h1>

</header>

<div class="mui-content">

<div style="text-align: center; padding:0.5rem; background: white;">

<img id="img_shaoma" src="/content/images/shaoma.png" style="width:100px;" />

</div>

<div style="margin-top:0.5rem;padding:2rem; text-align: center; background:white;">

<input id="txtyzm" type="text" placeholder="输入认证码验证产品" />

<button type="button" class="mui-btn mui-btn-success">点击认证</button>

</div>

</div>

@section script{

<script src="/content/js/mui.min.js"></script>

<script type="text/javascript">

mui.init();

</script>

<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

<script>

wx.config({

debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。

appId: "@ViewBag.appid", // 必填，企业号的唯一标识，此处填写企业号corpid

timestamp: @ViewBag.timestamp, // 必填，生成签名的时间戳

nonceStr: "@ViewBag.noncestr", // 必填，生成签名的随机串

signature: "@ViewBag.signature",// 必填，签名，见附录1

jsApiList: [‘scanQRCode‘] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2

});

wx.ready(function () {

// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。

document.getElementById(‘img_shaoma‘).addEventListener(‘tap‘, function () {

wx.scanQRCode({

needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，

scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有

success: function (res) {

var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果

// mui.alert("扫码结果：" + result);

document.getElementById("txtyzm").value = result;

}

});

})

});

</script>

}

以下是对应的控制器后台代码：

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

namespace Niunan.NiaoRen.Web.Areas.Seller.Controllers

{

public class ShaoMaController : Controller

{

//卖家中心-扫码页面

public ActionResult Index()

{

#region 用到微信扫一扫接口需要用的东西

WxPayAPI.NiunanWXHelper wxhelper = new WxPayAPI.NiunanWXHelper();

WxPayAPI.WxPayData config_data = wxhelper.GetJSSDKConfig();

ViewBag.appid = config_data.GetValue("appId");

ViewBag.timestamp = config_data.GetValue("timestamp");

ViewBag.noncestr = config_data.GetValue("nonceStr");

ViewBag.signature = config_data.GetValue("signature");

#endregion

return View();

}

}

}

以下是NiunanWXHelper 的代码，用到了一些原来微信官方DEMO里的一些方法，所以创建在了微信官方DEMO的那个项目中：

using LitJson;

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

using System.Web;

using System.Web.Security;

/// <summary>

/// 牛腩自己写的微信helper

/// https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

/// </summary>

namespace WxPayAPI

{

public class NiunanWXHelper

{

/// <summary>

///   返回使用微信JS-SDK接口的配置

//    appId: @ViewBag.wx_appid, // 必填，企业号的唯一标识，此处填写企业号corpid

//    timestamp: @ViewBag.wx_timestamp, // 必填，生成签名的时间戳

//    nonceStr: @ViewBag.wx_noncestr, // 必填，生成签名的随机串

//    signature: @ViewBag.wx_signature,// 必填，签名，见附录1

/// </summary>

/// <returns></returns>

public WxPayData GetJSSDKConfig()

{

string appid = WxPayConfig.APPID;

string secret = WxPayConfig.APPSECRET;

string timestamp = WxPayApi.GenerateTimeStamp();

string noncestr = WxPayApi.GenerateNonceStr();

string signature = "";

//签名算法  https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

//1. 获取AccessToken（有效期7200秒，开发者必须在自己的服务全局缓存access_token）

string url1 = $"https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid={appid}&secret={secret}";

string result = HttpService.Get(url1);

JsonData jd = JsonMapper.ToObject(result);

string access_token = (string)jd["access_token"];

//2. 用第一步拿到的access_token 采用http GET方式请求获得jsapi_ticket（有效期7200秒，开发者必须在自己的服务全局缓存jsapi_ticket）

string url2 = $"https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token={access_token}&type=jsapi";

string result2 = HttpService.Get(url2);

JsonData jd2 = JsonMapper.ToObject(result2);

string ticket = (string)jd2["ticket"];

//3. 开始签名

string now_url = HttpContext.Current.Request.Url.AbsoluteUri;

string no_jiami = $"jsapi_ticket={ticket}&noncestr={noncestr}&timestamp={timestamp}&url={now_url}";

//SHA1加密

signature = FormsAuthentication.HashPasswordForStoringInConfigFile(no_jiami, "SHA1");

WxPayData data = new WxPayData();

data.SetValue("appId", appid);

data.SetValue("timestamp", timestamp);

data.SetValue("nonceStr", noncestr);

data.SetValue("signature", signature);

Log.Debug(this.GetType().ToString(), "使用微信JS-SDK接口的配置 : " + data.ToPrintStr());

return data;

}

}

}

从官网下载的DEMO是ASPX的，我把里面的lib文件夹和business文件夹抽出来放到WXPAYAPI项目中了

时间： 2024-10-22 03:23:17

ASP.NET MVC做的微信WEBAPP中调用微信JSSDK扫一扫的相关文章

Asp.net mvc web api 在项目中的实际应用

Asp.net mvc web api 在项目中的实际应用 前言:以下只是记录本人在项目中的应用,而web api在数据传输方面有多种实现方式,具体可根据实际情况而定! 1:数据传输前的加密,以下用到 微软自带的 Rijndael 类(关于Rijndael 的更多信息请参见MSDN),32位密钥加16对称算法初始化向量,代码如下: //简单定义一个实体类: public class User { public int Id { get; set; } public string Name { g

ASP.NET MVC 做的网站项目

感谢博客园团队日夜为广大需要获取知识人们所做的奉献 博客园团队您们辛苦了 ASP.NET MVC 实现有论坛功能的网站(有iis发布网站 这是之前写的... www.lazyfitness.cn 经过一个月的修正 通过ASP.NET MVC 所做的网站www.lazyfitness.cn正式发布了!!! 这个网站不再像之前的哪样页面简陋功能单一了(毕竟之前的是一周做的...) 丰富了很多功能,还有后台管理员哦~ 值得一提的是,这个全部是基于APS.NET MVC框架实现的,我在博客园其实看到用A

微信浏览器中调用支付宝支付

众所周知,在微信浏览器中是无法唤起支付宝的,会提示请在浏览器中打开,如果非要在微信浏览器中调起支付宝的话,只能是跳出微信浏览器,关于这一点,在支付宝官网给出了一个例子.但是,话说回去,后来我仔细想想,其实真的没有必要非要在微信浏览器中调起支付宝支付(当时真是一根筋啊啊啊...) 支付宝手机网站支付的官方文档: https://doc.open.alipay.com/docs/doc.htm?treeId=203&articleId=105288&docType=1 快速接入: https:

[小技巧][ASP.Net MVC Hack] 使用 HTTP 报文中的 Header 字段进行身份验证

在一些 Web 系统中,身份验证是依靠硬件证书进行的:在电脑上插入 USB 证书,浏览器插件读取证书的相关信息,然后在发送 HTTP 登录请求时顺便在 Header 字段附加上身份信息.服务器端处理这样的登录请求的思路也很简单,就是读取 HTTP Header 相关信息,然后进行相应的处理. 在 ASP.Net MVC 架构的网站中,自然也可以使用这样的机制,下面基于 Visual Studio 2012 演示一下操作步骤. 首先建立一个ASP.Net MVC 4 项目. 选择模板的时候,保留默

asp.net mvc,做 301 永久重定向

以下代码为 asp.net mvc 4.0 代码做的 301 永久重定向 string url = “http://www.csdn.net/test.html” Response.StatusCode = 301;      Response.Status = "301 Moved Permanently";      Response.AppendHeader("Location", url));      Response.AppendHeader("

asp.net mvc部分视图的action中获取父级视图信息

RouteData.DataTokens["ParentActionViewContext"]中包含了父级视图的相关信息,如路由等 public ActionResult Child() { var parentView = RouteData.DataTokens["ParentActionViewContext"] as ViewContext; return View(); } 原文地址:https://www.cnblogs.com/war-hzl/p/91

EF ASP.NET MVC 更新出错：ObjectStateManager中已存在具有同一键的对象

解决方案 /// <summary> /// 保存 /// </summary> /// <param name="g"></param> public static void DbSave(GROUP g) { if (g == null) { return; } if (YJdb.Entry(g).State == EntityState.Detached) { var set = YJdb.Set<GROUP>(); G

微信商城中使用微信支付接口获取用户地址

授人以鱼不如授人以渔 微信支付获取用户地址 使用微信获取地址信息是和微信支付一道申请的,微信支付申请通过,就可以使用该功能. 微信商城中,使用微信支付获取用户的收货地址,可以省略用户输入地址信息的繁复流程,提高用户体验. 但是可能是因为牵扯到用户隐私,所以在使用过程中,需要用户自己主动选择使用该功能,并且是通过点击的操作,我们才可以获取到用户的收货地址,这一点是要注意的. 操作流程如下: 1.用户打开购物车页面,点击结算,跳转到一个微信的oauth2的页面,地址为:https://open.we

在IIS中部署Asp.net Mvc

概述: 最近在做一个MVC 3的项目,在部署服务器时破费了一番功夫,特将过程整理下来,希望可以帮到大家! 本文主要介绍在IIS5.1.IIS6.0.IIS7.5中安装配置MVC 3的具体办法! 正文: IIS5.1 1. 安装Microsoft .net FrameWork 4.0安装包; 2. 安装ASP.NET MVC 3; 3. 在IIS中发布网站,创建虚拟目录,ASP.NET版本选择4.0.30196: 4. 添加MVC的解析: 右击IIS中的虚拟目录选择“属性”-“虚拟目录”-“配置”