ミニプログラムは WeChat ログイン Java バックエンドを実装します (1) - フロントエンドの実装

I. 概要

2. ログイン手順

3. フロントエンドコード

4. フロントエンドコードを解釈する

1. ログイン部分

2. 現在のユーザーがログインしているかどうかを確認します

3. ミニプログラムの起動時にログインを確認する

5. ステージ概要

I. 概要

最近、ようやくコンテストに参加するための小さなプログラムに取り組む時間ができました。この小さなプログラムは当初、電子メールを使用してログインするように設計されていました。先生は、WeChat 経由でログインする方が便利だと提案しました。私はこれまでやったことがありませんでした。 , そこで今回はそれを試してみます。

インターネット上には、ミニプログラム WeChat ログインの実装方法に関するチュートリアルはあまりなく、Java バックエンドを使用するチュートリアルはさらに少ないです。そのほとんどは、node.js に基づいています。さらに、オンラインチュートリアルのほとんどのコードには先頭がありません。と最後で混乱してしまうので、もっと分かりやすいチュートリアルを書くつもりです。

まず、WeChat 公式ドキュメントに記載されている WeChat ログインプロセスを添付します。

まずいくつかの概念を理解しましょう。

code : wx.login() を通じてアプレットによって取得されます。ユーザーが登録してログインすると、フロントエンドはログイン資格情報をバックエンドに送信します。

openid : コードをパラメーターとして使用して WeChat インターフェイスサービスを呼び出すバックエンドによって取得されます。openid は、特定のミニプログラムまたは公式アカウント内の各 WeChat ユーザーの一意の識別子であり、異なるユーザーを区別するために使用できます。

session_key : バックエンドでコードをパラメーターとして使用して WeChat インターフェイスサービスを呼び出すことによっても取得されます。session_key は現在のユーザーセッションに関連付けられたキーで、データの暗号化と復号化に使用されます。openid ほど重要ではないため、選択して使用できます。

開発者サーバー: バックエンドコードを実行するサーバー。

WeChatインターフェースサービス：WeChatが公式に提供するAPIで、開発者はこのAPIを呼び出してopenidとsession_keyを取得できます。

2. ログイン手順

WeChatの公式ドキュメントからわかるように、具体的なプロセスは次の点に分かれています。

ミニプログラムのフロントエンドで、wx.login を使用してユーザーの一時的なログイン資格情報コードを取得します。
取得したコードを wx.request を使用してバックエンドサーバーに送信します。
バックエンドサーバーで、このコードを使用して WeChat インターフェイスサービスを呼び出し、ユーザーの session_key と openid を取得します。WeChat が提供するログインインターフェイスまたはサードパーティライブラリを使用して、この手順を実装できます。
取得した session_key と openid をバックエンドデータベースに保存し、後でこの情報に基づいてユーザーを識別し、関連付けることができるようにします。
バックエンドサーバーでは、他のユーザー情報が openid に基づいてデータベースに保存されます。ユーザーの openid を確実に一意にするために、openid をユーザーの一意の識別子として使用できることに注意してください。
ユーザー情報を保存した後、バックエンドはユーザーのトークンを生成し、それをミニプログラムフロントエンドに返すことができます。ミニプログラムフロントエンドは、このトークンをストレージとローカルキャッシュに保存できます。
後続のリクエストでは、認証と認可のためにこのトークンを運ぶことができます。

WeChat の新しい規制に注意してください。

2022 年 10 月頃から、ミニプログラムは、ユーザーの WeChat ログイン認証を取得した後、ポップアップウィンドウを通じてユーザーの WeChat アバターとニックネームを取得できるかどうかを直接尋ねることができなくなります。多くのミニプログラムの設定により、ユーザーがミニプログラムでのアバターニックネームの使用を禁止すると、ユーザーが WeChat へのログインを許可していても、ミニプログラムによってユーザーはログインできなくなるようです。当局はこれがユーザーの権利を侵害していると考えているようだ。（そうらしいです、私もよくわかりませんが）

以前のルールは次のとおりでした。他のユーザー情報 (ニックネーム、アバターなど) を保存する必要がある場合は、ミニプログラムのフロントエンドで wx.getUserInfo を使用してユーザー情報を取得します。

現在のルールは、ミニプログラムでユーザーが個人情報を入力できるようにする必要がある場合、WeChat が提供するアバターニックネームを使用してすぐに入力できるというものです。

詳細については、アバターのニックネームを記入するための公式文書 | WeChat 公開文書を参照してください。

新しい規制の下で WeChat ユーザーのアバターニックネームを取得する方法については、後の記事で説明します。

基本的なプロセスを理解した後、開発者は後で使用する 2 つの必要なものを入手する必要があります。

AppID（ミニプログラムID）
AppSecret (ミニプログラムキー)

WeChat パブリックプラットフォームのDevelopment-Development Management-Developer IDにログインして確認してください。

ここで、WeChat 開発者ツールの AppID、公式 Web サイトで取得した AppID、およびバックエンドに保存された AppID は一致している必要があることに注意してください。一致していないと、後でとんでもないエラーが発生します。もう 1 つのポイントは、AppSecret と AppID は同じアプレット内に存在する必要があるため、必ず注意してください。！

appid を変更するには、ミニプログラムディレクトリの project.config.json で直接変更できることに注意してください。

テスト後、WeChat 開発者ツール > 設定 > プロジェクト設定 > 基本情報 > appId で直接変更しても、 project.config.json の appid は変更されません。

project.config.json で直接変更すると、上図の開発者ツールの appid もそれに応じて変更されます。

3. フロントエンドコード

フロントエンドコードについては、WeChat アプレットを参照してユーザーログインを実装しました (詳細)_WeChat アプレットログイン_Soul Scholar のブログ - CSDN ブログこのブログ記事では、このボスのバックエンドはノードに基づいていると書いていますが、アイデアは次のとおりです。読むのに忍耐力がないと、途中で倒れてしまいます、ハハハ。

フロントエンドのコードは次のとおりです。

// app.js
App({
  globalData: {
    baseAPI: "http://localhost:8081", //后端运行端口号
    token: null //微信登陆token
  },

  onLaunch: function () {
    this.checkLogin(res => {
      console.log('is_login : ', res.is_login);
      if (!res.is_login) {
        this.login();
      }
    })
  },


  //微信登录逻辑
  login: function () {
    let _this = this
    wx.login({
      success: (res) => {
        //console.log("code: " + res.code);
        wx.request({
          url: _this.globalData.baseAPI + "/wxlogin",
          header: {
            'content-type': 'application/json;charset=UTF-8'
          },
          method: 'POST',
          data: {
            code: res.code
          },
          success: (res) => {
            console.log("token : " + res.data.data)
            _this.globalData.token = res.data.data
            wx.setStorage({
              key: 'token',
              data: res.data.data
            })
          },
          fail: (error) => {
            console.error("QwQ请求失败:", error);
            wx.showToast({
              title: '请求失败',
              icon: 'none',
              duration: 2000
            });
          }
        })
      }
    })
  },


//检查是否登录
  checkLogin: function (callback) {
    let _this = this
    var token = _this.globalData.token
    if (!token) {
      token = wx.getStorageSync('token')
      if (token) {
        _this.globalData.token = token
      } else {
        callback({
          is_login: false
        })
      }
    }
    wx.request({
      url: _this.globalData.baseAPI + "/checkwxlogin",
      data: {
        token: token
      },
      success: (res) => {
        callback({
          is_login: res.data.code == 0 ? true : false 
        })
      }
    })
  },
})

ミニプログラムを開くと WeChat ログインがポップアップされるため、上記のコードは app.js で記述する必要があります。

4. フロントエンドコードを解釈する

1. ログイン部分

login: function () {
    let _this = this
//调用wx.login接口，获取code，即下面的res.code
    wx.login({
      success: (res) => {
        //console.log("code: " + res.code);
        wx.request({
          url: _this.globalData.baseAPI + "/wxlogin", //调用后端接口
          header: {
            'content-type': 'application/json;charset=UTF-8'
          },
          method: 'POST',
          data: {
            code: res.code  //以post方式向后端发送code
          },
        //从后端接口得到的响应，即res.data
          success: (res) => {
            console.log("token : " + res.data.data); //后端返回的token保存在res.data.data中
            _this.globalData.token = res.data.data // 将token保存至全局 globalData
            wx.setStorage({  // 将token保存在storage本地缓存中
              key: 'token',
              data: res.data.data
            })
          },
          fail: (error) => {
            // 输出错误信息到控制台或日志
            console.error("QwQ请求失败:", error);          
            // 弹出提示框显示错误信息
            wx.showToast({
              title: '请求失败',
              icon: 'none',
              duration: 2000
            });
          }
        })
      }
    })
  }

上記のトークンの生成に注意してください。バックエンドはコードを使用して WeChat インターフェイスサービスを呼び出し、ユーザーの session_key と openid を取得し、暗号化変換またはタイムスタンプとの組み合わせを通じて openid を生成します。これについては後で紹介します。記事。

2. 現在のユーザーがログインしているかどうかを確認します

 checkLogin: function (callback) {
    let _this = this 
    var token = _this.globalData.token  //尝试从全局变量中获取token
    if (!token) {  //全局变量中没有
      token = wx.getStorageSync('token')  // 再试试从storage缓存中获取token
      if (token) {  //storage缓存中有
        _this.globalData.token = token
      } else {  //storage缓存也没有
        callback({
          is_login: false  //回调函数，设置登录状态为 ：未登录
        })
      }
    }
    // 全局变量中有token，则向后端发送请求检验token是否存在
    wx.request({
      url: _this.globalData.baseAPI + "/checkwxlogin",
      data: {
        token: token
      },
      success: (res) => {
        //console.log(res);
        callback({
          is_login: res.data.code == 0 ? true : false  //三元表达式判断，如果res.data.code==0，则赋值is_login为true；其他，则赋值is_login为false
        })
      }
    })
  },
})

3. ミニプログラムの起動時にログインを確認する

  onLaunch: function () {
    // 小程序启动时检查用户是否登录
    this.checkLogin(res => {
      console.log('is_login : ', res.is_login);
      // 未登录，则调用login()函数
      if (!res.is_login) {
        this.login();
      }
    })
  }

5. ステージ概要

WeChat ログインのフロントエンド部分が実装されました。次回以降の記事では、Java でのバックエンドロジックの記述方法や、ユーザーアバターのニックネームの取得方法などを紹介していきますので、お楽しみに...