ホームページ > 記事 > WeChat アプレット > PC 上で .NET WeChat 開発を使用してスキャン コードの登録とログイン機能を実装する方法の詳細な説明
この記事は、.NET WeChat によって開発された PC 側の WeChat コード スキャン登録およびログイン機能の実装に関する関連情報を主に紹介します。これは非常に優れており、必要な友人は参考にすることができます。 1. はじめに
まず、この記事の焦点は実装のアイデアであることを述べておきます。コードの効率性について厳しい要件があるプロジェクトがある場合、コードとデータベースの設計は主にそのアイデアを示すためのものです。コピーしないでください。
2. 解決策を探しています
従来の方法で考えると、WeChat は認証を通じて完全に登録できますが、PC 側では従来の方法は携帯電話番号を入力するだけで、またはメールなどでお待ちください。この方法で登録すると、次の問題が発生します
オプション 2: WeChat 側での認証と PC 側での登録後、ユーザーはリンクとして携帯電話番号を入力することが「強制」されます。これにより問題が発生します。ユーザーの携帯電話が本物であることを確認する必要があります。これは、携帯電話の確認コードを通じて実行できます (電子メールの場合も同様です)。ただし、次の状況を想定します。携帯電話番号が 2 つある場合、PC で登録するときに 1 つを入力し、WeChat で登録するときにもう 1 つを入力します。関連していますか?答えは残念ながらです。なお、PC側で登録した後は入力せず(ダブルクォーテーションを強制した理由)、WeChat側で認証してログインしました。この時点では、2 つのデータがあり、それらを関連付ける方法を見つけるのを待っています。これは、自分で穴を掘る典型的な開発者です。このアプローチはある程度は機能しますが、その厳密さは開発者にとって受け入れられません。
3. 原点回帰の解決策
分析: 上記の解決策には問題があるので、最初に脇に置きましょう。考えを整理するために、問題の根源に立ち返ってみましょう。関連する質問には一意の識別子が必要です。固有の識別子は、私たちがクレジットカードを申し込む際に必要となるIDカード番号と同じで、実名制でナンバーカードを購入する場合にもIDカードが必要となります。私たちがシステム管理者であると仮定すると、ID 番号から間違いなくあなたの携帯電話番号と銀行カード番号を知ることができます。
PC WeChatスキャンコードログインプロセス
コアコード
アイデアとプロセスを理解したら、開発アイデアが共通であり、開発に直接進みましょう。言語 あなたの才能を発揮してください。
注: 次のコードは例として C# 言語を使用し、MVC + EF を使用しています (注: uuid は上記の authCode と同等です)
ログイン ページのバックエンド コードをスキャンします
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(); }
QR コードはプラグイン jquery .qrcode.js を使用して生成されます。詳細について知りたい場合は、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('#qrcode-container').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 = '@Url.Action("Index", "Home")'; 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(); }
最後に添付されるのはデータベース テーブルのデザインです
特別なことは何もありません、WeChat uuId によって返される各パラメーターにカスタム パラメーターを 1 つ追加するだけです
WeChat パラメーターの説明の詳細については、WeChat 開発者ドキュメントを参照してください
操作の効果
1 QR コードをスキャンしてログを記録します。ページに移動します
2. ユーザー認証を要求します
3. ユーザーが認証を確認します
4. PC ログインが完了します
以上がPC 上で .NET WeChat 開発を使用してスキャン コードの登録とログイン機能を実装する方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。