序文

従来のWebサイトではアカウントとパスワードを使ってログインするのが一般的でしたが、この方法では必ずパスワードを忘れてしまうことがあり、パスワードを取得するのに一連の認証が必要で非常に面倒だったので、QRコードを読み取ってログインする方法を知りました。ユーザーがパスワードを忘れる心配はありません。ログインは非常に高速です。ユーザーエクスペリエンスが向上しました。

1.エフェクトのプレビュー

ここに画像の説明を挿入しますウェブサイト上のミニプログラムの画像をクリックすると、ミニプログラムコードがポップアップ表示されます。

ここに画像の説明を挿入しますミニプログラム認証ページ

2. 前提条件

1. オンラインミニプログラムが必要です。
2. ログインするために QR コードをスキャンする必要がある Web サイト。

3. 実装原理については、以下の図を参照してください。

ここに画像の説明を挿入します実装図

4. 導入手順

1. ミニプログラム QR コード
1.1 を生成します。この手順では、最初に一意の文字列を生成する必要があります。文字列の長さは 32 文字を超えることはできません。どのリクエストが開始されるかを決定するためにミニプログラムコードを生成するときに使用されます。この一意の文字列は全体を通して使用されます。ライフサイクル全体。

1.2、调用微信接口获取二维码 https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=自己获取accessToken

ここでは 2 つのパラメータが必要です。1 つは page (コードをスキャンした後にジャンプするミニプログラムページ)、2 つ目は scene (上記で生成された一意の文字列) です。

1.3 上面操作成正确，会获取二维码图片的十进制流，转成Base64直接返回到页面显示出二维码即可。

byte[] bytes = HttpRequest.post(url).body(body).execute().bodyBytes();
<img :src="'data:image/jpeg;base64,'+shareWxQrCode"/>

2. フロントエンドページはステータスを取得するためにループします。
フロントエンドはローテーショントレーニングを使用するか、バックグラウンドはソケットおよびその他のテクノロジを使用してコードスキャンステータスをフロントエンドに通知し、上記で生成された一意の文字列に基づいてステータスを取得します。。

3. ユーザーはミニプログラムを開き、QR コードをスキャンします。
ユーザーは QR コードをスキャンし、ミニプログラムの生成時に指定されたページにジャンプします。このページの onLoad メソッドで渡された一意の資格情報文字列が取得されます。

onLoad:function(query){
    
    
    var that = this;
    const scene = decodeURIComponent(query.scene)
}

4. スキャンされたコードにステータスを設定すると、フロントエンドの回転中にステータスをユーザーに表示できます。このページでは、ユーザー情報やアバターのニックネームなどを取得する必要があります。ビジネスニーズに応じて、これらの情報なしでユーザーの openID を直接取得することもできます。

wx.login({
    
    
      success:(res)=>{
    
    
        wx.request({
    
    
          url: '你自己的后台地址',
          method:"POST",
          data:{
    
    
            code:res.code,
            scene:that.data.scene
          },
          success:(res)=>{
    
    
            if(res.statusCode==200){
    
    
              var sessionKey = res.data.result.sessionKey;
              var openid = res.data.result.openid;
              var json = {
    
    
                'openId': openid,
                 'sessionKey': sessionKey,
                'encryptedData': user.encryptedData,
                'rawData': user.rawData,
                'signature': user.signature,
                'iv': user.iv,
                'avatarUrl':that.data.avatarUrl,
                'nickName':that.data.nickName,
                'scene': that.data.scene
              }
              wx.request({
    
    
                url: '你后台根据openId检查用户信息的URL',
                method:"POST",
                data:json,
                success:(res)=>{
    
    
                  if(res.data.code==200){
    
    
                    wx.showToast({
    
    
                      title: '登录成功!',
                      icon: 'success',
                      duration: 3000
                    })
                  }
                }
              })
            }
          },fail: function (res) {
    
    
            
          }
        })
      }
    })

バックグラウンドロジックはユーザーを確認することです。ユーザーの openID クエリデータベースによると、ユーザーが存在します。そうでない場合は、登録プロセスを直接実行できます。そのような openId がある場合は、ユーザーがすでに存在していることを意味し、ログインプロセスを実行できます。
プロセスエンドレコードの変更ステータスは、フロントエンドローテーションのトレーニングステータスに便利です。

5. フロントエンドはステータスに基づいて直接フォロー業務を行うことができ、ログイン状態であればホームページなどにジャンプし、QRコードをスキャンしてログインに成功したことをユーザーに促します。！

上記はミニプログラムの一般的なコードスキャンログインプロセスです。必要に応じて相互に通信することもできます。
以下は、ログインに QR コードスキャンを使用する Web サイトです。試してみることができます。

Elk Station:
QR コードをスキャンしてデモにログインします https://xylsok.com/#/login

QRコードをスキャンしてWeChatアプレットを使用してWebサイトへのログインを実装する方法

序文

1.エフェクトのプレビュー

2. 前提条件

3. 実装原理については、以下の図を参照してください。

4. 導入手順

おすすめ