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

最初に言っておきますが、この記事の焦點は実裝のアイデアです。プロジェクトにコードの効率性に関する厳しい要件がある場合は、それをコピーしないでください。

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 カード番號と同じ機能を持ちます。

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

PC WeChat スキャン コード ログイン プロセス

コア コード

アイデアは理解できました。開発のアイデアは共通なので、誰もが言語開発で才能を発揮する必要があります。

注: 次のコードは、MVC + EF を使用して、例として C# 言語を使用しています (注: 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 コードの生成方法、canvas または table を指定できることです。IE をサポートする必要がある場合は、テーブル生成を使用するように指定してください

コードは次のとおりです:

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

戻るトピックに、ログイン ページのメイン コードは次のとおりです

<!--生成二維碼的容器 p-->
<p>
</p>
<script></script>
<script></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
/*
*　創(chuàng)建微信通用類?-?這里代碼比較復雜不在這里貼出
*　遲點我會將整個?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 によって返された各パラメーターにパラメーターを 1 つ追加してカスタマイズするだけです。uuId

WeChat パラメーターの説明の詳細については、WeChat 開発者ドキュメントを參照してください

操作効果

1。ページにログインするための QR コード

2. ユーザー認証を要求します

3. ユーザーが認証を確認します

4.

以上が.NET WeChat を使用して、PC 側 WeChat コード スキャン登録およびログイン機能の実裝コードを開発するの詳細內容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。