开发的PC端微信扫码注册登录功能的实现 NET微信

时间：2021-09-07 来源：互联网编辑：宝哥软件园浏览：次

一、前言

首先，本文重点阐述了实现思路，而代码和数据库的设计主要是为了展示这个思路。如果项目对代码效率有严格要求，不要照搬。

我相信做过微信开发的人都做过很多授权，但一般来说，我们对移动网站做的授权比较多，具体来说，我们在微信下做授权。今天遇到的一个问题是，项目支持微信和PC，注册是开放的。要求在PC端或微信端注册后可以在对方登陆。也就是说，PC和微信都必须是‘你就是你’(以某种方式连接)。

第二，寻找解决方案

用传统的方式思考，微信可以通过授权注册，但是在PC上，传统的方式是填写手机号，或者Email等等。如果您以这种方式注册，将会出现以下问题

1.我先在微信上授权注册，所以如果我想登录PC，还是要注册。

这种解决方案可以在：微信授权注册后，“强制”用户填写手机号、Email等基本信息。这样我们就可以通过某种方式为用户生成PC登录的账号密码，比如以用户的昵称为账号，以手机号为密码等等。

缺点：用户体验不好，存在安全隐患。毕竟你的微信昵称、邮箱或者手机号都暴露了。

2.如果我先在PC上注册，微信授权我怎么和移动终端关联

当然，每一个问题总会有解决的办法。想法如下：

方案一：用户在PC上注册后，“强制”用户填写微信昵称。以此作为微信授权时的关联条件。可惜微信的昵称可以改，但不是唯一的。怎么能用来联想？计划一被杀了。

方案二：在微信授权、PC注册后，用户被“强制”填写手机号码进行关联。这就导致了一个问题，需要保证用户手机的真实性。这可以通过手机验证码来实现(Email也是如此)。但是让我们假设以下情况。如果我有两个手机号码，我会在PC上注册时填写一个，在微信上注册时填写另一个。有关系吗？答案是非常抱歉。再者，我在PC上注册后，就是没填(之所以放强制双引号)，然后用微信授权登录。嗯，这个时候，会有两条数据等着你去想办法把它们联系起来。典型的开发者自己挖坑。这种方法在某种程度上是可行的，但是开发人员无法接受它的严格性。

三、回归原点的解决方案

分析：既然以上方案都有问题，那就先放一边吧。整理一下思路，让我们回到问题的根源。相关问题需要唯一的标识符。唯一的身份就像我们的身份证号码。我们申请信用卡的时候，需要在实名登记系统购买一张号码卡。假设我们是系统管理员，那么我就可以通过你的身份证号查到你的手机号和银行卡号。

有了以上想法，我们需要做的就是找到一个唯一的标识符作为关联。微信有一个重要的角色openid。它的功能和上面提到的ID号一样，是微信账号对某个微信官方账号的唯一标识。

经微信授权，凡是获得openid并开发微信的，应该都没问题。问题是如何实现PC在注册或登录时可以获得openid。笔者的实现思路如下。在PC上注册，或者登录时显示一个二维码，引导用户通过微信扫码，即可跳转到授权页面。这一步有一个关键的细节。请在二维码中携带一个唯一的授权码。想象一下，如果我们可以在用户被授权后将openid和authCode写入数据库。然后我们可以通过PC端的一个API获取与authCode关联的openid。如果我们这样做，就可以知道目前是谁在PC端扫码注册或者登录(注册不注册，直接注册登录)。你是不是突然觉得这么轻松？如果你觉得这篇文章很抽象，请看看下面的插图

PC端微信扫码登录流程

核心代码

弄清楚思路和流程后，我们直接编码。开发思路是通用的，请用开发语言展示你的魔力。

注：以下代码以C#语言为例，采用MVC EF(注：uuid相当于我们上面的authCode)

扫码登录页面背景码

public ActionResult Login(){//如果已经登录，直接跳转到首页if (user。identity.is authenticated)返回重定向到操作(' index '，' home ')；字符串url=请求。网址.主机；字符串uuid=Guid。NewGuid()。ToString()；viewpag . URL=' http://' URL/home/login for？uuid=' uuid//构造授权链接ViewBag.uuid=uuid//保存uuidreturn View()；}插件jquery.qrcode.js用于生成二维码。如果你想了解更多，请去Github。这里需要注意的一点是，插件可以指定二维码的生成方式，需要支持IE的朋友应该指定使用表格来生成画布或者表格

代码如下：

jQuery('#qrcode ')。二维码({render : 'table '，text : ' http://Baidu.com ' })；回到主题，登录页面的主要代码如下

！-div id=' qrcode-container'/div脚本src=' http 3360 ~/plugins/Jquery/Jquery-1 . 9 . 1 . min . js '/script script src=' http : ~/plugins/Jquery-QR code/Jquery . QR code . min . js '/script script Jquery(function(){//生成QR code Jquery(# QR code-container))。二维码(' @ view bag . URL ')；//轮询判断用户是否授权varinterval=set interval(function(){ $)。post ('@ url.action ('userlogin '，' home ')'，{ ' uuid ' : ' @ viewbag.uuid ' }，function (data，Status){ if(' success '==Status){//用户成功授权=跳转if(' success '==data){ window . location . href=' @ URL . action(' index '，' home ')'；clearInterval(区间)；}}});}, 200);})/脚本轮询，以确定用户是否授权API代码

公共字符串user log in(string uuid){//验证参数是否合法if (string。isnullrempty (uuid))返回“param _ error”；WX _用户记录用户=数据库。WX用户记录。其中(u=u.uuId==uuid)。first ordefault()；if (user==null)返回“not _ authcode”；//写入cookieformsauthentication . setauthcookie(user . OpenID，false)；//空uuiduser.uuId=nulldb。saveChanges()；返回“成功”；}微信授权行动

公开行动结果loginfor (string uuid) {# region获取基本信息-snsapi_userinfo/**创建微信通用类-这里的代码比较复杂，不贴在这里*我稍后会整理整个Demo放在Github上*/微信服务上下文wxcontext=new微信服务上下文(System。Web.HttpContext.Current，uuid)；//使用微信通用类获取用户的基本信息wxcontext。GetUserInfo()；if(！字符串。IsNullOrEmpty(wxcontext . OpenID)){ uuid=Request[' state ']；//判断wx _ userrecord用户是否=db . wx _ user record . where(u=u . open id==wxcontext . open id)。数据库中存在first stor default()；if(null==user){ user=new WX _ user record()；用户。OpenId=wxcontext.openid用户。City=wxcontext.city用户。Country=wxcontext.country用户。CreateTime=DateTime。现在；用户。head imgurl=wxcontext . head imgurl；用户。昵称=wxcontext .昵称；用户。省份=wxcontext .省份；用户。Sex=wxcontext.sex用户。union id=wxcontext . union id；user.uuId=uuiddb。WX用户记录。添加(用户)；} user.uuId=uuiddb。saveChanges()；} # endregionreturn View()；}最后附上数据库表设计

没什么特别的，就是微信返回的每个参数都多加了一个我们定义的uuId。