ホームページ > 記事 > WeChat アプレット > PC 上で .NET WeChat 開発を使用してスキャンコードの登録とログイン機能を実装する方法の詳細な説明

PC 上で .NET WeChat 開発を使用してスキャンコードの登録とログイン機能を実装する方法の詳細な説明

Y2Jオリジナル: 2017-04-26 14:51:533329ブラウズ

この記事は、.NET WeChat によって開発された PC 側の WeChat コードスキャン登録およびログイン機能の実装に関する関連情報を主に紹介します。これは非常に優れており、必要な友人は参考にすることができます。 1. はじめに

まず、この記事の焦点は実装のアイデアであることを述べておきます。コードの効率性について厳しい要件があるプロジェクトがある場合、コードとデータベースの設計は主にそのアイデアを示すためのものです。コピーしないでください。

WeChat の開発を行った人は多くの承認を行っていると思いますが、一般的に言えば、モバイル Web サイトの承認は WeChat で行うことが多いです。今日私が遭遇した問題の 1 つは、このプロジェクトが WeChat と PC をサポートしており、登録が受付中であることです。 PC側またはWeChat側で登録後、相手側でログインできる必要があります。つまり、PCでもWeChatでも、「あなたはあなた」（何らかの形で関連性がある）。

2. 解決策を探しています

従来の方法で考えると、WeChat は認証を通じて完全に登録できますが、PC 側では従来の方法は携帯電話番号を入力するだけで、またはメールなどでお待ちください。この方法で登録すると、次の問題が発生します

1. まず WeChat で登録を承認し、その後 PC にログインしたい場合は、やはり登録する必要があります。

この問題の解決策は次のとおりです: WeChat が登録を承認した後、ユーザーに携帯電話番号や電子メールなどの基本情報の入力を要求することが「必須」になります。このようにして、ユーザーのニックネームをアカウント番号として使用したり、携帯電話番号をパスワードとして使用したりするなど、何らかの方法でユーザーが PC にログインするためのアカウントとパスワードを生成できます。

短所: ユーザーエクスペリエンスは良くなく、セキュリティリスクがあります。結局のところ、WeChat のニックネーム、電子メール、または携帯電話番号はすべて公開されます。

2. 最初にPC側で登録した場合、WeChatを認証するときにモバイル側に接続するにはどうすればよいですか

もちろん、すべての問題には常に解決策があります。アイデアは次のとおりです:

オプション 1: ユーザーが PC に登録した後、ユーザーは WeChat ニックネームを入力することが「強制」されます。 WeChatを認証する際の関連付け条件として使用します。しかし、残念ながら、WeChat のニックネームは変更できるので、それが唯一のものではない場合、どのように関連付けに使用できるのでしょうか。計画は一挙に頓挫した。

オプション 2: WeChat 側での認証と PC 側での登録後、ユーザーはリンクとして携帯電話番号を入力することが「強制」されます。これにより問題が発生します。ユーザーの携帯電話が本物であることを確認する必要があります。これは、携帯電話の確認コードを通じて実行できます (電子メールの場合も同様です)。ただし、次の状況を想定します。携帯電話番号が 2 つある場合、PC で登録するときに 1 つを入力し、WeChat で登録するときにもう 1 つを入力します。関連していますか?答えは残念ながらです。なお、PC側で登録した後は入力せず（ダブルクォーテーションを強制した理由）、WeChat側で認証してログインしました。この時点では、2 つのデータがあり、それらを関連付ける方法を見つけるのを待っています。これは、自分で穴を掘る典型的な開発者です。このアプローチはある程度は機能しますが、その厳密さは開発者にとって受け入れられません。

3. 原点回帰の解決策

分析: 上記の解決策には問題があるので、最初に脇に置きましょう。考えを整理するために、問題の根源に立ち返ってみましょう。関連する質問には一意の識別子が必要です。固有の識別子は、私たちがクレジットカードを申し込む際に必要となるIDカード番号と同じで、実名制でナンバーカードを購入する場合にもIDカードが必要となります。私たちがシステム管理者であると仮定すると、ID 番号から間違いなくあなたの携帯電話番号と銀行カード番号を知ることができます。

上記のアイデアを持ったら、後は関連付けとして一意の識別子を見つけるだけです。WeChat openid には重要な役割があります。 WeChat アカウントは、特定の公開アカウントを一意に識別するために、前述した ID カード番号と同じ機能を持ちます。

openid から WeChat の認可を取得し、WeChat 開発を行っている人であれば問題ありません。問題は、登録またはログイン時にopenidを取得するためにPC側をどのように実装するかです。筆者の実装アイデアは以下の通り。 PC で登録するか、ログインすると QR コードが表示され、WeChat を使用してコードをスキャンして認証ページに移動するように誘導されます。このステップには最も重要な点が 1 つあります。QR コードに固有の認証コード (authCode) を指定してください。ユーザーが許可すると、openid と authCode をデータベースに書き込むことができると想像してください。次に、PC 側の API を介して authCode に関連付けられた openid を取得できます。こうすると、現在誰が QR コードをスキャンして PC に登録またはログインしているかを知ることができます (未登録の場合は登録、登録済みの場合は直接ログイン)。突然、とても簡単に感じましたか? 文章がもっと抽象的だと思うなら、下の図を見てください

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(&#39;#qrcode&#39;).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();
}

最後に添付されるのはデータベーステーブルのデザインです

特別なことは何もありません、WeChat uuId によって返される各パラメーターにカスタムパラメーターを 1 つ追加するだけです