js QRコードスキャンログインの原理についての簡単な説明

日常生活では、スーパーマーケットでの支払い、システムへのログイン、アプリケーションのダウンロードなど、さまざまなシナリオで QR コードが登場します。 QR コードの原理を理解することで、技術者はテクノロジーを選択する際に新たなアイデアを得ることができます。技術者以外の方に対しては、疑問を解決するだけでなく、生活の中で遭遇するさまざまな QR コードをより適切に識別し、騙されないようにガイドすることもできます。

QRコードは誰もが知っている

買い物、食事、バスに乗るときにコードをスキャンしてください

スキャン処理中に、「この QR コードは安全ですか?」という疑問が生じる場合があります。個人情報が漏洩してしまうのでしょうか？より上級のユーザーは次のことも考慮します: システムを宣伝するための QR コードも作成できますか?

このとき、QR コードの背後にあるテクノロジーとロジックを理解する必要があります。

QR コードの最も一般的なシナリオの 1 つは、モバイルアプリケーションを介して PC または WEB 上の QR コードをスキャンし、同じシステムにログインすることです。たとえば、携帯電話のWeChatのQRコードをスキャンしてPCのWeChatにログインしたり、携帯電話のTaobaoのQRコードをスキャンしてPCのTaobaoにログインしたりできます。それでは、QR コードログインの仕組みを見てみましょう。

QRコードログインの真髄

QR コードログインは、本質的にはログイン認証方法です。ログイン認証なのでやることは2つだけ！

1. システムに自分が誰であるかを伝える

2. システムに対して自分が誰であるかを証明する

たとえば、アカウントとパスワードでログインする場合、アカウント番号はシステムに私が誰であるかを伝え、パスワードはシステムに対して私が誰であるかを証明します。たとえば、携帯電話の認証コードでログインする場合、携帯電話番号はシステムに私が誰であるかを伝え、認証コードはシステムに対して私が誰であるかを証明します。

では、QR コードをスキャンしてログインすると、どのようにしてこれら 2 つのことが実現されるのでしょうか?一緒に考えてみましょう

モバイルアプリを使用して、PC で QR コードをスキャンします。携帯電話で確認すると、PC でアカウントが正常にログインされます。ここで、PCにログインするアカウントは携帯電話と同じアカウントである必要があります。携帯電話でログインしたアカウントがアカウントAで、コードをスキャンしてログインした後、PCでログインしたアカウントがアカウントBであるということはあり得ません。

ですから、まず最初に、私が誰であるかをシステムに伝える必要がありますが、これは比較的明確です。

QRコードをスキャンすることで、携帯電話のアカウント情報がPCに転送されます。転送方法については、後ほど説明します。

2 つ目は、システムに対して自分が誰であるかを証明することです。 QR コードスキャンによるログインプロセス中に、ユーザーはパスワード、確認コード、またはその他のコードを入力しませんでした。それはどのように証明されるのでしょうか?

スキャン処理中にパスワードが PC に送信されるかどうか疑問に思う学生もいるかもしれません。しかしそれは不可能だ。これは安全性が低すぎるため、クライアントはパスワードをまったく保存しません。よく考えてみると、実はモバイルアプリはすでにログインされており、携帯電話がログイン認証に合格したことを意味します。所說只要掃碼確認是這個手機且是這個賬號操作的，其實就能間接證明我誰。

QRコードを理解する

それでどうやって確認するんですか？詳細は後ほど説明しますが、その前にまずは QR コードについて知っておく必要があります。 QRコードを知る前に、まずは1次元コードについて見てみましょう！

いわゆる一次元コードはバーコードです。スーパーマーケットのバーコードは皆さんもよくご存知だと思います。バーコードは実際には商品のシリアル番号を保存した数字の列です。

QR コードは実際にはバーコードに似ていますが、必ずしも数字を格納する必要はなく、任意の文字列も格納できる点が異なります。これは文字列表現の別の形式と考えることができます。

検索エンジンでQRコードを検索すると、オンラインでQRコードを生成するためのツールウェブサイトが多数見つかります。これらのウェブサイトは、Grass Feed QRコードウェブサイトのように、文字列とQRコード間の変換機能を提供することができます。

左側の入力ボックスにコンテンツを入力できます。テキスト、URL、ファイルなどです。次に、それらを表すQRコードを生成できます

QR コードをアップロードして「デコード」し、QR コードの意味を分析することもできます。

システム認証メカニズム

QR コードについて理解できたので、次はモバイルインターネットにおけるシステム認証の仕組みについて学びましょう。

前にも述べたように、セキュリティ上の理由から、携帯電話にはログインパスワードは保存されません。ただし、日常の使用においては、アプリケーションをダウンロードした後、初めてログインするときにのみアカウントとパスワードでログインする必要があることに注意してください。その後、アプリケーションプロセスが強制終了されたり、電話が再起動されたりしても、アカウントとパスワードを再度入力する必要はなく、自動的にログインできます。

実際、この背後にはトークンベースの認証メカニズムがあります。このメカニズムがどのように機能するかを見てみましょう。

アカウントとパスワードでログインすると、クライアントはデバイス情報をサーバーに渡します。アカウントとパスワードの検証に合格すると、サーバーはアカウントとデバイスをバインドし、データ構造に保存します。このデータ構造には、アカウント ID、デバイス ID、デバイスタイプなどが含まれます。

constトークン = {
  acountid:'アカウントID',
  deviceid:'ログインしたデバイスID',
  deviceType:'デバイスタイプ（iso、android、pcなど）......',
}

次に、サーバーはトークンを生成し、それを使用してデータ構造をマッピングします。このトークンは実際には特別な意味を持つ文字列です。その重要性は、対応するアカウントとデバイスの情報を見つけるために使用できることにあります。

クライアントはこのトークンを取得した後、それをローカルに保存し、システム API にアクセスするたびにトークンとデバイス情報を保持する必要があります。
サーバーはトークンを使用して、それにバインドされているアカウントとデバイス情報を検索し、バインドされているデバイス情報とクライアントから送信されたデバイス情報を毎回比較します。同じ場合は検証に合格し、AP インターフェイス応答データが返されます。異なる場合は検証に失敗し、アクセスが拒否されます。

前のプロセスから、クライアントはパスワードを保存せず、保存する必要がないことがわかります。代わりに、トークンを保存します。生徒の中には、このトークンは非常に重要だと考える人もいるかもしれませんが、他の人に知られたらどうなるでしょうか?実際、デバイス情報は一意であるため、それを知っていても影響はありません。他の人があなたのデバイス情報を知らない限り、他のデバイスを使用してアクセスしても検証は成功しません。

クライアントログインの目的は、独自のトークンを取得することだと言えます。

では、QR コードをスキャンするログインプロセス中に、PC はどのようにして独自のトークンを取得するのでしょうか?携帯電話から自身のトークンを直接 PC に転送することは不可能です。トークンは特定のクライアントにのみ属し、他の人や他のクライアントが使用することはできません。この問題を分析する前に、QR コードをスキャンしてログインする一般的な手順を整理する必要があります。これにより、プロセス全体を整理するのに役立ちます。

QRコードをスキャンしてログインするための一般的な手順

おおよそのプロセス

1. コードをスキャンする前に、モバイルアプリにログインし、PCにスキャン待ちのQRコードを表示します。

2. 携帯電話でアプリを開き、PCでQRコードをスキャンします。スキャン後、「スキャンしました。携帯電話で確認をクリックしてください」というメッセージが表示されます。

3. ユーザーは携帯電話で確認をクリックし、確認後に PC ログインが成功します。

ご覧のとおり、QR コードの中央には、スキャン待ち、スキャンして確認待ち、確認済みの 3 つの状態があります。想像してみてください

1. QR コードの背後には固有の ID が必要です。QR コードが生成されると、この ID も生成され、PC 上のデバイス情報にバインドされます。

2. 携帯電話でこのQRコードをスキャンします

3. QR コードがスキャン済みかつ確認待ちの状態に切り替わり、アカウント情報がこの ID にバインドされます。

4. 携帯電話がログインを確認すると、PC がログインするためのトークンを生成し、PC に返します。

さて、基本的な考え方が明確になったので、プロセス全体をより具体的にしましょう。

QRコードの準備

QR コードのさまざまな状態に応じて、最初は、ユーザーが PC を開いて QR コードログインインターフェイスに切り替えるときのスキャン待機状態です。

1. PC は、ユーザーログイン用の QR コードを生成し、PC デバイス情報をサーバーに渡すように要求をサーバーに送信します。

2. サーバーはリクエストを受信すると、QRコードIDを生成し、QRコードIDをPCデバイス情報にバインドします。

3. QRコードIDをPCに返します

4. QRコードIDを受信した後、PCはQRコードを生成します（QRコードにはIDが含まれている必要があります）

5. QRコードの状態を適時に知るために、クライアントがQRコードを表示した後、PCはサーバーを継続的にポーリングし、たとえば1秒ごとに1回、サーバーにQRコードの現在の状態と関連情報を伝えるように要求します。

QR コードの準備ができました。次のステップはスキャンです。

スキャンステータススイッチ

1. ユーザーは携帯電話を使用して PC 上の QR コードをスキャンし、QR コードの内容から QR コード ID を取得します。

2. サーバーAPIを呼び出して、モバイル端末のID情報とQRコードIDをサーバーに送信する

3. 受信後、サーバーは ID 情報を QR コード ID にバインドして一時トークンを生成できます。その後、携帯電話に戻ります

4. PCはQRコードのステータスをポーリングしているので、この時点でQRコードのステータスが変化すると、インターフェース上でQRコードのステータスをスキャン済みに更新することができます。

では、なぜ一時的なトークンを携帯電話に返す必要があるのでしょうか?一時トークンはトークンと同様に一種の ID 認証情報です。違いは、一度しか使用できず、使用後は無効になる点です。

3 番目のステップでは、携帯電話が次の操作で認証情報として使用できるように、一時的なトークンが返されます。これにより、コードのスキャンとログインの 2 つの手順が同じ携帯電話から開始されるようになります。

ステータス確認

最後のステップはステータスを確認することです。

1. 一時トークンを受け取った後、携帯電話にログイン確認インターフェースが表示されます。ユーザーが確認をクリックすると、携帯電話は一時トークンを運び、サーバーのインターフェースを呼び出し、サーバーに確認したことを通知します。

2. 確認を受け取った後、サーバーはQRコードIDにバインドされたデバイス情報とアカウント情報に基づいて、ユーザーがPCにログインするためのトークンを生成します。

3. このとき、PC側のポーリングインターフェースは、QRコードのステータスが「確認済み」になったことを知ることができます。ユーザーのログイントークンはサーバーから取得できます

4. この時点でログインは成功し、バックエンド PC はトークンを使用してサーバーリソースにアクセスできるようになります。

コードをスキャンする基本的なプロセスは説明しましたが、いくつかの詳細については詳しく説明されていません。

例えば、QRコードの内容は何でしょうか？

QRコードIDも可能
QR コード ID を含む URL アドレスにすることができます。確認のためにコードをスキャンする手順で、ユーザーがキャンセルした場合はどうすればよいでしょうか?これらの詳細については、皆さんに考えていただくことになります。

要約する

ログインの本質から始めて、QRコードスキャンログインがどのように行われるかを探ります

1. システムに自分が誰であるかを伝える

2. システムに対して自分が誰であるかを証明する

このプロセスでは、まず 2 つの前提条件について簡単に説明しました。

1つはQRコードの原理です。
1 つはトークンベースの認証メカニズムです。

次に、QR コードのステータスに基づいて、トークン認証メカニズムと QR コードのステータス変更を使用してコードスキャンログインを実現するという背後にあるロジックを分析しました。

上記のログインプロセスは、同じシステムの PC、WEB、モバイル端末に適用できることに注意する必要があります。

通常、別の一般的なシナリオとして、サードパーティのアプリケーションを介してコードをスキャンしてログインするというものがあります。たとえば、Geek Time/Nuggets は、WeChat/QQ を選択してコードをスキャンしてログインできます。では、サードパーティのアプリケーションを介してコードをスキャンしてログインする原理は何でしょうか?

これで、js QRコードスキャンログインの原理に関するこの記事は終了です。より関連性の高いjs QRコードスキャンログインコンテンツについては、123WORDPRESS.COMの以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも123WORDPRESS.COMを応援していただければ幸いです。

以下もご興味があるかもしれません: