実際の技術:スキャンコードのIMログイン機能を達成するためにどのように?主流の技術的な原則をログに記録するテキストスキャンコードを知ろう

個人ブログのナビゲーションページ(クリック、右側にリンク個人のブログを開くために):ダニエルは、テクノロジ・スタックにあなたを取ります 

1はじめに

この機能をログに記録するスキャンコードは、最初は、PC側が(スキャンコードは、そうでない場合は、ログインしていない)人類機能に対するビットものの、マイクロチャネルに従事し始めたが、かなりクールですと言っているべきです。

下の写真は、かかわらず、IMユーザーや一般の開発者の、あなたが精通する必要があります:

 

「ログインマイクロスイープを持っていると考えられているなぜ、私たちはそうではない?。」 - だから、スローされる必要があり、プログラマの添加から、IMプロダクトオーナーとプロダクトマネージャーに従事

まあ、長いマイクロチャネル機能がある限り、すべての時間は、すべての後に鍋、難易ビットの大きなをダンプしたいIMプログラマは、上司であることを前提としていますし、「I」IM製品のいくつかのマイクロ文字が持っている必要があります。

我々は避けることができないので、あなただけの正直、ハードラインの技術的な原則を知って取得し、それを所有することができます。

この記事では、簡単にスキャン論理機能を実装するためのコードと、淘宝網の現実、スキャンコードのログイン機能マイクロ手紙、学習および技術の巨大な主流の思考の研究アプリケーションをログに記録する技術を紹介します。

2、基本的な技術の原則

最終的には2.1スキャンコードのログイン機能は何ですか?

ログオンするための最初の導入スキャンコードにどのようなものです。今の学生のほとんどは、マイクロ手紙、QQと淘宝網、携帯電話上のソフトウェアのこのタイプが装備されています。これらのアプリは、対応するWebクライアントを持っています。スイープが一掃ログインすることができ、携帯電話サービスを利用して、自分のWebページを使用するときに、ユーザーがより便利で安全なログインできるようにするには、それが自然に明らかです。

いくつかの大手メーカーは、ログインコードは次のようにするときの効果を席巻インタフェースを使用します。

多くの小さなパートナーは非常に不思議な感じもありますが、ページはわずか2次元コードを示し、どのように2次元コードを掃引し、そしてそれに署名した携帯電話を知っているだろうか?登録が完了した後、ユーザーが情報をユーザーに指示することができます。また、それは本当に素晴らしいああです。

2.2スキャンコードのログイン機能の完全な技術的なロジック

1)論理Webサーバの嵌合端を持ちます:

次のステップは、このサービスの詳細な実施のためです。

ブラウザが要求のログイン・サーバは、2次元コードを取得し、送信するときにまず、ユーザーは、サイトのログインページが開きます。サーバが要求を受信した後、それはランダムなUUIDを生成し、キー値としてこのIDは、Redisのサーバに格納され、及び有効期限を設定し、後に、再取得するリフレッシュされる二次元コードが必要にユーザログを有効期限が切れています。

一方、一緒にキー値と、同社の認証文字列は、2次元コードは、二次元コード(2次元コード生成の画像を生成し、インターフェースによって生成され、多くのオンラインインタフェースと既製のソースコードは、そこにあるここで説明されることはありません)。次に、2次元コードの画像とユーザーのブラウザに一緒にUUID復帰。

2次元コードとUUIDを取得するには、ブラウザは、ログイン要求が成功し、1秒間に1回ずつ、ブラウザに送信されます。UUIDの要求は、現在のページの識別子を運びます。ここではいくつかの学生が奇妙になり、唯一のRedisに保存された一つのサーバがキー値としてのuuid、どのユーザID情報、それだろうか? 

ここでは、実際のユーザIDに関する情報が存在します、ID情報はRedisのサーバーに電話で保存されています。詳細については、「サーバーへの電話の論理的な終わりに。」をお読みください。

2)論理サーバと携帯端末と:

お使いの携帯電話を作り、オープンスイープログ:ブラウザは、2次元コード、ページに表示し、ユーザーにヒントを与えるために、二次元コードを取得することを言います。

携帯電話ユーザーのうち2次元コードをスキャンするには、(また、多くのデモがあり、インターネット上の文字列、ここでは詳細に説明されていないを得るために、2次元コードスキャン機能)検証メッセージとUUIDを取得することができます。

サーバーの電話側にアクセスする際に、電話の最後には、パラメータはユーザーのトークンを運ぶために戻ってログインされていますので、携帯電話ターミナルサーバは、(直接の代わりに携帯電話側のトークンからこの値を渡し、ユーザーのuserIdを解析し、 useridはリスクはずっと)小さくなります修正され、トークンが暗号化され、セキュリティのために、直接転送ユーザーIDが傍受して変更することができます。モバイル端末パースは、データとユーザは、サーバ(サーバは、クライアント・サーバとWebサーバの電話側は、同じサーバーの電話ではありませんされているサーバ)に認証されたログイン要求を送信するために一緒にパラメータとしてトークン。

サーバは、要求、第1比較パラメータ検証情報を受信した後、ユーザのログイン要求インタフェースかどうかを決定します。そうだとすれば、それは携帯電話側に確認メッセージを返します。

返された携帯端末の領収書は、登録確認ボックスがユーザーに表示された後(より人間的なログインながら、ユーザのエラーを防ぐため)。ログイン操作は、電話が再び要求を送信したユーザを確認した後。サーバーとGET UUIDのuserId後、Redisのに格納された値として、ユーザのユーザID値は、鍵ペアとしてキーのuuid。

3)ログインが成功したロジックがある場合には:

ブラウザが要求を再送信したとき次に、ブラウザサーバは、ユーザIDを取得し、ブラウザに、ブラウザのトークンは、ブラウザが要求を再送信し、ユーザ情報バックへのログイン方法、音を呼び出すことができます、ログインに成功。携帯電話のエンドユーザ情報、及びユーザ情報が必ずしも正確に同じブラウザであるため、代わりに直接格納されたユーザ情報のここに格納されたユーザIDです。

次のように4)図に示した詳細な技術的原理をまとめます: 

3、淘宝網のスキャンコード技術にログイン

このセクションでは、スキャンコード、実際に淘宝網はロジックを実装ログに記録するスキャンコードを解析するために勉強し、例えば、淘宝網にログオンします。

ログイン画面  https://login.taobao.com/member/login.jhtmlは  戻ってパラメータを渡します。

そして、リクエスト(GET)メッセージは、この次のとおりです。

https://qrlogin.taobao.com/qrcodelogin/qrcodeLoginCheck.do?lgToken=2c3b4d53ef0513787bf4ce711ea5ba53&defaulturl=&_ksTS=1540106757739_2804&callback=jsonp2805

キーは、lgTokenにあるあなたは、ポーリング中にページのサーバーを要求するコール・インタフェース(ロングポーリングが長いポーリングする必要があります)2次元コードを開いたときでユニークなIDページ、サインです。

ノースキャンコードならば、それが返されます。 

スイープ場合は、それが返されます:

{

    "コード": "10001"、

    「メッセージ」:「モバイルスキャンQRコードの成功」、

    「成功」:真

}

長い時間がないスキャンコードワード、Webクライアントは、ポーリング、2次元コードの失敗を停止することはありません!

確認ログインするときに、携帯端末、インターフェイスに戻ります:

{ "コード": "10006"、 "成功":真、 "URL":「https://login.taobao.com/member/loginByIm.do?uid=cntaobaoxxx&token=ff82fc0d1d395a33d3b38ec5a4981336&time=1530179143250&asker=qrcodelogin&ask_version=1.0.0&defaulturl= HTTPS://www.taobao.com&webpas=0b7aed2d43f01825183e4a49c6cae47d1479929926" }

もちろん、「確認ログイン」の間の相互作用をクリックするだけで、携帯電話端末とサーバは何が起こったのかおそらく、ログインが成功したことを示します:サービス要求を終了するlgToken端に生成されたページ、サーバが再びとき、Webクライアント、このことを覚えていて、lgTokenが記録さだと思いますポーリング要求インタフェースは、それはあなたがWebクライアントでトークンにログインすることができ、真のログイン状態トークンを返します。

下に示すように、技術的なロジックを詳細:

4、マイクロチャネル技術スキャンコードログイン

4.1技術的な原則フローチャート

 

マイクロチャネルアクセスアドレスのWebバージョンは次のとおりです。https://wx.qq.com/、綿密な調査を所有することができます興味を持っています。

4.2実際のロジック技術

1)固有のUUID、ならびにUIDに関する情報が含まれていた二次元コードを取得します。

//取得UUID

getUUID:関数(){

    vare = t.defer()。

    returnwindow.QRLogin = {}、

    $アヤックス({

        URL:i.API_jsLogin、

        データ型:「スクリプト」

    })。行う(関数(){

        200 == window.QRLogin.code?e.resolve(window.QRLogin.uuid):e.reject(window.QRLogin.code)

    })。{((機能)フェイル

        e.reject()

    })、

    e.promise

}

2)ブラウザがサーバーをポーリング、スキャンコードの状態を取得:

//スキャンコードのステータスを確認

checkLogin:関数(E、A){

    VARN = t.defer()

        = || 0;

    returnwindow.code = 0、

    window.checkLoginPromise = $アヤックス({

        URL:i.API_login + "?loginicon =真&UUID =" + E + "&先端=" + A + "&R =" +〜NEWDATE、

        データ型:「スクリプト」、

        タイムアウト:35e3

    })。行う(関数(){

        newRegExp( "/" + location.host + "/")。

        (window.redirect_uri && window.redirect_uri.indexOf( "/" + location.host + "/")<0)であれば

            returnvoid(LOCATION.HREF = window.redirect_uri)。

        生成物= {

            コード:window.code、

            REDIRECT_URI:window.redirect_uri、

            userAvatar:window.userAvatar

        }。

        n.resolve(E)

    })。{((機能)フェイル

        n.reject()

    })、

    n.promise

}

3)スキャンコードの状態は、サーバ、対応するアクションによって返されます。

* 408スキャンコードタイムアウト:電話がスキャンではないコードや無許可のログインを行う場合は、サーバは、戻りステータスコード408は、25秒程度ブロックします- >フロントをポーリングし続けます 

失敗次元コード400 *:約5分以内でないスキャンコード、二次元コードが失敗しました  

* 201はスキャンコードです:電話はスキャンコードを持っている場合は、すぐにサーバとユーザのステータスコード(window.code = 201、window.code.userAvator =「の基本情報に戻る ...」)、 - > フロントエンドをポーリングし続けます  

* 200の認定: -ターゲット・ページにリダイレクト>ストップポーリングフロントエンド、トークンへのアクセス、電話が確認ログインにクリックした場合、サーバは200とトークンを返します。 

特定のコードの例は以下の通りです。

スキャンコード//サーバが返す状態、対応する操作

functiono(C){

    スイッチ(c.code){

    case200:

        t.newLoginPage(c.redirect_uri).then(関数(T){

            バロ= t.match(/ <RET>(。*)<\ / RET> /)

                、R = t.match(/ <スクリプト>(。*)<\ /スクリプト> /)

                、C = t.match(/ <SKEY>(。*)<\ / SKEY> /)

                、S = t.match(/ <wxsid>(。*)<\ / wxsid> /)

                、L = t.match(/ <wxuin>(。*)<\ / wxuin> /)

                、D = t.match(/ <pass_ticket>(。*)<\ / pass_ticket> /)

                、F = t.match(/ <メッセージ>(。*)<\ /メッセージ> /)

                、U = t.match(/ <redirecturl>(*)<\ / redirecturl> /)。

            returnu?無効(window.location.href = U [1]):O && "0" = O [1]!?(アラート(F && F [1] || "登录失败")、

            i.report(i.AUTH_FAIL_COUNT、1)、

            空location.reload()):。(E EMITを$( "newLoginPage"、{

                RET:O && O [1]、

                鍵SKey:C && C [1]、

                SID:S && S [1]、

                UIN:L && L [1]、

                パスチケット:D && D [1]、

                コード:R

            })、

            ボイド(a.getCookie( "webwx_data_ticket")|| n.report(n.ReportType.cookieError、{

                テキスト:「webwx_data_ticket法案が失われました」

                クッキー:document.cookie

            })))

        });

        ブレーク;

    case201:

        e.isScan =!0、

        n.report(n.ReportType.timing、{

            タイミング:{

                スキャン:Date.now()

            }

        })、

        t.checkLogin(e.uuid).then(O、関数(T){

            !T && window.checkLoginPromise &&(e.isBrokenNetwork =!0)

        });

        ブレーク;

    case408:

        t.checkLogin(e.uuid).then(O、関数(T){

            !T && window.checkLoginPromise &&(e.isBrokenNetwork =!0)

        });

        ブレーク;

    case400:

    case500:

    case0:

        VARS = a.getCookie( "refreshTimes")|| 0;

        S <5?(S ++、

        a.setCookie( "refreshTimes"、S、0.5)、

        document.location.reload()):e.isNeedRefresh = 0;!

        ブレーク;

    case202:

        e.isScan =!1、

        e.isAssociationLogin = !1,

        a.setCookie( "login_frequency"、0、2)、

        window.checkLoginPromise &&(window.checkLoginPromise.abort()、

        window.checkLoginPromise = NULL)、

        R()

    }

    e.code = c.code、

    e.userAvatar = c.userAvatar、

    a.log( "GETコード"、c.code)

}

4.3まとめ

マイクロチャンネルスキャンコードログイン・ページの端部が、ポーリングデータは、問題を解決するためにクロスドメインであるJSONPの形で返されたとき。JSONPは理解していないなど、あなたが読むことができる「ウェブエンドコミュニケーションスタイルの進化を説明する:アヤックス、JSONPからSSEに、WebSocketの」記事「三、JSONPを」このセクションで。

場合フロントブロッキングバックグラウンドスキャンコード、最適縮小ポーリング及びポーリング遠位無効に応じてポーリング要求を用いたマイクロチャネルスキャンコードログイン・ページの終わり、。この技術は、「参照してください。はじめにステッカーを:最も完全なエンドWebの歴史は、IM技術的な原則をコメント」の記事で、「3.2ソリューション:ロングポーリング(ロングポーリング)」このセクションでは、

5.本概要

この資料に記載されている技術的な原則は、IMアプリケーションの実装にのみ限定されるものではないので、スキャンコードは、現在唯一のIMアプリケーションが表示されている、この機能をログに記録する、モバイル端末の様々なオンラインサイトでは、この機能を持っていますスキャンコードは、ログオンします。

また、実際のデータ解析を把持を容易にするために、本論文ではPCケースの解析は、Webクライアントを目指しているが、実際にお使いのPCの終わりには、このインストールを.DMG、.exeファイル、リッチクライアント(ある場合バージョン)、原理は同じであり、ブラウザのクロスドメインの問題を考慮する必要はありません。

付属のJava / C / C ++ /機械学習/アルゴリズムとデータ構造/フロントエンド/アンドロイド/パイソン/プログラマ読み/シングル書籍図書Daquanは:

(乾燥した個人ブログでそこ開くには、右クリックしてください):技術的なドライ開花を
===== >> ①[Javaのダニエルは、高度なへの道であなたを取る] << ====
===== >> ②[+ ACMアルゴリズムデータ構造ダニエルは、高度なへの道であなたを取る] << ===
===== >> ③[データベースダニエルは高度への道であなたを取る] << == ===
===== >> ④[ダニエルWebフロントエンドの高度への道であなたを取るために] << ====
===== >> ⑤[機械学習のPythonとダニエルあなたにエントリを取ります高度なロード] << ====
===== >> ⑥[建築家ダニエルは高度への道であなたを取る] << =====
===== >> ⑦[C ++ダニエルは、道路上をお連れに進ん] << ====
===== >> ⑧[ダニエルは高度への道であなたを取るのiOS] << ====
=====> > ⑨[ウェブセキュリティダニエルは、高度なへの道であなたを取る] ===== <<
===== >> ⑩[Linuxオペレーティングシステムを、ダニエルは高度への道であなたを取る] = << ====

何の未収果物はありません、あなたの若い友人は、友人がテクニックを学びたい願って、道路の方法ですべての障害を克服することは、技術に結びつける本を理解して、コードをノック、原理を理解し、実践を行くことになります決定しましたそれはあなたの将来、あなたの夢を生活、あなたの仕事をもたらすでしょう。

公開された47元の記事 ウォンの賞賛0 ビュー281

おすすめ

転載: blog.csdn.net/weixin_41663412/article/details/104863659