.NET WeChat 개발을 PC에서 활용하여 스캔코드 등록 및 로그인 기능 구현에 대한 자세한 설명

이 글은 .NET WeChat에서 개발한 PC측 WeChat 코드 스캔 등록 및 로그인 기능 구현에 대한 관련 정보를 주로 소개합니다. 매우 좋고 도움이 필요한 친구들이 참고할 수 있습니다. >

1. 머리말

먼저 이 글의 초점은 코드와 데이터베이스 설계에 있다는 점을 말씀드립니다. 코드 효율성에 대한 엄격한 요구 사항이 있는 경우 항목을 복사하지 마세요.

WeChat 개발을 해본 사람이라면 누구나 인증을 많이 했다고 생각하지만, 일반적으로 모바일 웹사이트에 대한 인증을 더 정확하게 말하면 WeChat 인증을 통해 수행합니다. 오늘 제가 겪은 한 가지 문제는 프로젝트가 WeChat과 PC를 지원하고 등록이 열려 있다는 것입니다. PC측 또는 WeChat측에서 등록한 후 상대방에서 로그인할 수 있어야 합니다. 즉, PC이든 WeChat이든 "당신은 당신입니다"(어떤 면에서는 관련이 있음)입니다.

2. 해결책을 찾는다

전통적인 방식으로 생각하면 WeChat은 인증을 통해 완전히 등록할 수 있으며, 하지만 PC 쪽에서는 휴대폰 번호나 이메일 등을 입력하는 것 외에는 전통적인 방법이 없습니다. 이런 식으로 등록하면 다음과 같은 문제가 발생합니다

1. 먼저 위챗에서 등록을 승인한 다음 PC에 로그인하려면 등록을 해야 합니다.

이 문제에 대한 해결책은 다음과 같습니다. WeChat이 등록을 승인한 후 사용자에게 휴대폰 번호 및 이메일과 같은 기본 정보를 입력하도록 "강제"합니다. 이런 식으로 사용자가 PC에 로그인하기 위한 계정과 비밀번호를 어떤 방식으로든 생성할 수 있습니다. 예를 들어 사용자의 닉네임을 계정번호로, 휴대폰 번호를 비밀번호로 사용하는 등이 있습니다.

단점: 사용자 경험이 좋지 않고 보안 위험이 있습니다. 결국 귀하의 WeChat 닉네임, 이메일 또는 휴대폰 번호가 모두 노출됩니다.

2. PC측에서 먼저 등록하고, 위챗 인증시 모바일측에서는 어떻게 접속하나요?

물론 해결방법은 항상 있죠? 모든 문제. 아이디어는 다음과 같습니다.

옵션 1: 사용자가 PC에 등록한 후 사용자가 WeChat 닉네임을 입력해야 하는 것이 "강제"됩니다. WeChat 인증 시 연결 조건으로 사용하세요. 하지만 안타깝게도 위챗 닉네임이 유일한 것이 아니라면 어떻게 협회에 사용될 수 있습니까? 그 계획은 단숨에 사라졌습니다.

옵션 2: WeChat 측에서 승인하고 PC 측에서 등록한 후 사용자는 링크로 휴대폰 번호를 "강제" 입력해야 합니다. 이로 인해 문제가 발생합니다. 사용자의 휴대폰이 정품인지 확인해야 합니다. 휴대폰 인증번호를 통해 인증할 수 있습니다(이메일도 마찬가지). 그런데 다음과 같은 상황을 가정해 보겠습니다. 휴대폰 번호가 2개라면 PC에서 등록할 때 하나를 입력하고, 위챗에 등록할 때 하나를 입력합니다. 관련이 있나요? 대답은 불행히도입니다. 더군다나 PC측에서 등록한 후에는 작성을 안하고(큰따옴표를 강요한 이유), 위챗측을 이용해서 인증하고 로그인을 했는데요. 글쎄, 이 시점에는 두 가지 데이터가 서로 연관되는 방법을 찾기를 기다리고 있을 것입니다. 이는 자신의 구멍을 파는 일반적인 개발자입니다. 이 접근 방식은 어느 정도 작동하지만 개발자는 이러한 엄격함을 받아들일 수 없습니다.

3. 원점복귀를 위한 해결 방법

분석: 위의 해결 방법에는 문제가 있으므로 먼저 모두 제쳐두고 있습니다. 우리의 생각을 정리하기 위해 문제의 근원으로 돌아가 보겠습니다. 관련 질문에는 고유 식별자가 필요합니다. 고유식별자는 우리의 신분증 번호와 마찬가지로 신용카드 신청 시에는 신분증이 필요합니다. 우리가 시스템 관리자라고 가정하면, 귀하의 ID 번호를 통해 귀하의 휴대폰 번호와 은행 카드 번호를 확실히 알아낼 수 있습니다.

위의 아이디어를 얻은 후 우리가 해야 할 일은 연결로서의 고유 식별자를 찾는 것입니다. WeChat에는 openid라는 중요한 역할이 있습니다. 위에서 언급한 ID 카드 번호와 동일한 기능을 가지고 있습니다. WeChat 계정은 특정 공개 계정을 고유하게 식별합니다.

WeChat 개발을 해본 사람이라면 누구나 openid로부터 WeChat 인증을 받는데 문제가 없을 것입니다. 문제는 등록이나 로그인 시 openid를 얻기 위해 PC측을 어떻게 구현하느냐이다. 저자의 구현 아이디어는 다음과 같다. PC에서 등록하거나 로그인 시 QR 코드가 표시되어 사용자가 WeChat을 사용하여 코드를 스캔하여 인증 페이지로 이동할 수 있도록 안내합니다. 이 단계에서는 가장 중요한 세부 사항이 하나 있습니다. QR 코드와 함께 고유 인증 코드(authCode)를 가져오세요. 사용자가 우리에게 권한을 부여하면 openid와 authCode를 데이터베이스에 쓸 수 있다고 상상해 보세요. 그런 다음 PC 측 API를 통해 authCode와 관련된 openid를 얻을 수 있습니다. 이렇게 하면 현재 PC에서 등록 또는 로그인하기 위해 QR 코드를 스캔하고 있는 사람이 누구인지 알 수 있습니다(등록되지 않은 경우 등록, 등록된 경우 직접 로그인). 갑자기 너무 쉽게 느껴지셨나요? 글이 좀 더 추상적이라고 생각되시면 아래 아이콘을 봐주세요

PC 위챗 스캔코드 로그인 과정

핵심 코드

아이디어와 프로세스를 명확히 한 후, 바로 코드로 넘어가겠습니다. 개발 아이디어는 공통이니 개발 언어에 대한 재능을 보여주세요.

참고: 다음 코드는 MVC + EF를 사용하여 C# 언어를 예로 사용합니다(참고: uuid는 위에서 언급한 authCode와 동일합니다)

QR 코드를 스캔하여 로그인하세요. 페이지 백엔드 코드

public ActionResult Login()
{
//如果已登录,直接跳转到首页
if (User.Identity.IsAuthenticated)
return RedirectToAction("Index", "Home");
string url = Request.Url.Host;
string uuid = Guid.NewGuid().ToString();
ViewBag.url = "http://" + url + "/home/loginfor?uuid=" + uuid;//构造授权链接
ViewBag.uuid = uuid;//保存 uuid
return View();
}

는 플러그인 jquery.qrcode.js를 사용하여 QR 코드를 생성합니다. 이에 대해 더 알고 싶은 친구는 Github를 방문하세요. . 여기서 주의할 점은 플러그인에서 QR 코드 생성 방법, 캔버스 또는 테이블을 지정할 수 있다는 것입니다. IE를 지원해야 하는 친구는 테이블을 사용하여 생성하도록 지정하세요

코드는 다음과 같습니다. :

jQuery('#qrcode').qrcode({
render : "table",
text : "http://baidu.com"
});

다시 본론으로 돌아가서 로그인 페이지의 메인 코드는 다음과 같습니다

<!--生成二维码的容器 p-->
<p id="qrcode-container">
</p>
<script src="~/Plugins/Jquery/jquery-1.9.1.min.js"></script>
<script src="~/Plugins/jquery-qrcode/jquery.qrcode.min.js"></script>
<script>
jQuery(function () {
//生成二维码
jQuery(&#39;#qrcode-container&#39;).qrcode("@ViewBag.url");
//轮询判断用户是否授权
var interval = setInterval(function () {
$.post("@Url.Action("UserLogin","Home")", { "uuid": "@ViewBag.uuid" }, function (data, status) {
if ("success" == status) {
//用户成功授权=>跳转
if ("success" == data) {
window.location.href = &#39;@Url.Action("Index", "Home")&#39;;
clearInterval(interval);
}
}
});
}, 200);
})
</script>

사용자가 API 코드를 인증하는지 여부를 확인하는 폴링

public string UserLogin(string uuid)
{
//验证参数是否合法
if (string.IsNullOrEmpty(uuid))
return "param_error";
WX_UserRecord user = db.WX_UserRecord.Where(u => u.uuId == uuid).FirstOrDefault();
if (user == null)
return "not_authcode";
//写入cookie
FormsAuthentication.SetAuthCookie(user.OpenId, false);
//清空uuid
user.uuId = null;
db.SaveChanges();
return "success";
}

WeChat 인증 작업

public ActionResult Loginfor(string uuid)
{
#region 获取基本信息 - snsapi_userinfo
/*
*　创建微信通用类 - 这里代码比较复杂不在这里贴出
*　迟点我会将整个 Demo 稍微整理放上 Github
*/
WechatUserContext wxcontext = new WechatUserContext(System.Web.HttpContext.Current, uuid);
//使用微信通用类获取用户基本信息
wxcontext.GetUserInfo();
if (!string.IsNullOrEmpty(wxcontext.openid))
{
uuid = Request["state"];
//判断数据库是否存在
WX_UserRecord user = db.WX_UserRecord.Where(u => u.OpenId == wxcontext.openid).FirstOrDefault();
if (null == user)
{
user = new WX_UserRecord();
user.OpenId = wxcontext.openid;
user.City = wxcontext.city;
user.Country = wxcontext.country;
user.CreateTime = DateTime.Now;
user.HeadImgUrl = wxcontext.headimgurl;
user.Nickname = wxcontext.nickname;
user.Province = wxcontext.province;
user.Sex = wxcontext.sex;
user.Unionid = wxcontext.unionid; 
user.uuId = uuid;
db.WX_UserRecord.Add(user);
}
user.uuId = uuid;
db.SaveChanges();
}
#endregion
return View();
}

마지막으로 데이터베이스 테이블 디자인을 첨부합니다

특별한 것은 없습니다. 반환된 각 매개변수에 사용자 정의 uuId를 하나 더 추가하면 됩니다. by WeChat

WeChat 매개변수에 대한 자세한 설명은 WeChat 개발자 문서를 참조하세요

운영 결과

1. QR코드를 스캔하여 페이지에 로그인하세요

2.

3. 사용자 인증 승인

PC 로그인 완료

위 내용은 .NET WeChat 개발을 PC에서 활용하여 스캔코드 등록 및 로그인 기능 구현에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!