PCのQRコードをスキャンして登録してログインします
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の承認を使用してログインしました。この方法はある程度機能しますが、開発者が厳密であることは受け入れられません。
3.原点に戻すソリューション
分析：上記のソリューションにはすべて問題があるため、最初に脇に置いてみましょう。問題の根源にいくつかの考えを戻します。関連する問題には、一意の識別子が必要です。一意の識別は、ID番号と同じです。クレジットカードを申請する場合、IDカードが必要です。本名システムの下で番号カードを購入する場合、IDカードが必要です。私たちがシステム管理者であると仮定すると、ID番号を介して携帯電話番号と銀行カード番号を見つけることができます。
上記のアイデアを使用すると、私たちがする必要があるのは、関連する一意の識別子を見つけることだけです。 WeChatには重要な役割があります。上記のID番号、WeChatアカウントによる特定の公式アカウントの一意の識別とこの共通の関数があります。
WeChatからの承認は、OpenIDが利用できます。 WeChat開発を行った人は誰でも問題ないはずです。問題は、登録またはログインするときにOpenIDを取得するためにPC端末を達成する方法です。著者の実装のアイデアは次のとおりです。 PCに登録するか、ログインするときにQRコードを表示するには、WeChatを使用してコードをスキャンするようにユーザーをガイドします。これにより、承認ページにジャンプします。このステップには最も重要な詳細があります。 QRコードに一意の承認コード（authcode）を持参してください。ユーザーがOpenIDを作成し、データベースにAuthCodeを作成することを許可しているかどうかを想像してください。次に、PC側のAPIを介してAuthCodeに関連付けられたOpenIDを取得できます。これを行うと、現在誰がコードをスキャンしてPCに登録またはログインしているのかを知ることができます（登録されていない場合は登録し、登録した人は誰でも直接ログインします）。突然とても簡単だと感じますか？テキストがもっと抽象的であると思われる場合は、次の写真をご覧ください
PC Wechatスキャンコードログインプロセス
コアコード
アイデアとプロセスを明確にした後、コードを直接アップロードします。開発のアイデアは一般的ですので、言語を開発する際に魔法の力を見せてください。
注：次のコードは、C＃言語を例として取り、MVC + EFを使用します（注：UUIDは上記のAuthCodeと同等です）
コードをスキャンしてバックグラウンドページにログインします
public ActionResult login（）{//ログインしている場合は、（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; // construction authorization link vied = uuid; // uuid return view（）;}を保存
QRコードは、プラグインjquery.qrcode.jsを使用して生成されます。もっと知りたい場合は、Githubに移動してください。ここで注意すべきことの1つは、このプラグインがQRコード、キャンバス、またはテーブルの生成方法を指定できることです。 IEをサポートする友人のためにテーブル生成の使用を指定してください。
コードは次のとおりです。
jQuery（ '＃qrcode'）。qrcode（{render： "table"、text： "http://baidu.com"}）;トピックに戻ると、ログインページのメインコードは次のとおりです
<！ - QRコードdivを生成するためのコンテナ - > <div id = "qrcode-container"> </div> <script src = "〜/plugins/jquery/jquery-1.9.1.min.js"> </scrip （）{// qrコードjquery（ '＃qrcode-container'）。qrcode（ "@viewbag.url"）; （データ、 "== suction => Jump（" windoce.location.href = '@url.action）
ユーザーがAPIコードを承認するかどうかを判断するためにポーリング
public string userlogin（string uuid）{//パラメーターが合法かどうかを確認する（string.isnullorempty（uuid））return "param_error"; wx_userrecord user = db.wx_userrecord.where（u => u.uuid == uuid）.firstordefault（）; if（user == null） "not_authcode"を返します。 // cookie formsauthentication.setauthcookie（user.openid、false）を書きます。 // clear uuid user.uuid = null; db.savechanges（）; 「成功」を返します;}WeChat Authorization Action
public ActionResult loginfor（string uuid）{#region基本情報を取得-snsapi_userinfo / * * wechat general class -create wechat general class-ここではより複雑で、ここに掲載されていません * / wechatusercontext wxcontext = new wechatusercontext（system.httcontext）; // wechat generalクラスを使用して、基本的なユーザー情報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。PCログインが完了しました
記事には必然的に欠点があります。私を許してください。エラーが見つかった場合は、メッセージを残してそれらを指摘してください。とても感謝しています！ WeChatのQRコードをスキャンして登録してデモにログインします。著者が整理したら、githubに置きます。もっと友達を助けたいと思っています。この記事の更新に注意してください。
上記は、PCでWeChatのQRコードをスキャンする例です。困っている友達はそれを参照できます。このサイトへのご支援ありがとうございます！