uniapp WeChat アプレットにログインする方法

WeChat ミニ プログラムの人気に伴い、WeChat ミニ プログラムの開発に注目する人が増えています。このプロセスではログイン モジュールが不可欠であり、Uniapp は WeChat アプレット開発フレームワークとしても人気があります。では、Uniapp WeChat アプレットにログインするにはどうすればよいでしょうか?以下で詳しく見てみましょう。

1. WeChat 開発者プラットフォームの設定

WeChat アプレットにログインする前に、WeChat 開発者プラットフォームで関連する設定を実行する必要があります。まず、「開発」→「開発設定」→「開発者ツール」で「サービスポート」を開き、自分のIPアドレスを入力します。

次に、「開発」->「開発設定」->「ミニプログラムのバックグラウンド構成」で、ミニプログラム「正当なドメイン名の要求」を追加します。

次に、ミニ プログラムの AppID と AppSecret を取得し、[設定] -> [開発者ツール] -> [開発設定] で確認する必要があります。

2. Uniapp 構成

MicroMessenger-uni の条件付きコンパイルでは、最初に wx-auth.js ファイルを導入する必要がありますが、このファイルは自分で作成することも、インターネットからダウンロードすることもできます。

App.vue の onLaunch で、Openid を取得するための WeChat アプレットの AppID、AppSecret、バックグラウンド アドレスを設定します。

次のステップでは、ログイン インターフェイスを呼び出すときに、wx-auth.js でコードを取得するメソッドを作成する必要があります。

getLoginCode() {
      return new Promise((resolve, reject) => {
        uni.login({
          success: (res) => {
            if (res.code) {
              resolve(res.code)
            } else {
              reject(res)
            }
          },
          fail: (err) => {
            reject(err)
          }
        })
      })
    }

次に、wx- で Openid を取得するメソッドを作成します。 auth.js メソッド:

getOpenId(appid, secret, code) {
      return new Promise((resolve, reject) => {
        uni.request({
          url: 'https://api.weixin.qq.com/sns/jscode2session?appid=' + appid + '&secret=' + secret + '&js_code=' + code + '&grant_type=authorization_code',
          success: (res) => {
            resolve(res)
          },
          fail: (err) => {
            reject(err)
          }
        })
      })
    }

最後に、プロジェクトのログイン ページで、ログイン メソッドを記述できます:

async login() {
      let code = await this.getLoginCode()
      let res = await this.getOpenId(this.appid, this.secret, code)
      console.log(res)
      // 在这里可以将Openid和其他用户信息存入后台，实现登录功能
   }

3. WeChat アプレットの実装

WeChat 内アプレット 最後に、ログイン ボタンで wx.login メソッドを呼び出してコードを取得し、そのコードをバックグラウンドに渡してバックグラウンドから Openid やその他のユーザー情報を取得して、ログイン機能を実装する必要があります。

以下は、wx.login メソッドを呼び出す WeChat アプレットの例です:

wx.login({
      success(res) {
        if (res.code) {
          //将code传到后台获取Openid
        } else {
          console.log('登录失败！' + res.errMsg)
        }
      },
      fail(err) {
        console.log('登录失败！' + err.errMsg)
      }
    })

4. 概要

上記の手順により、ログイン機能を実現できます。 Uniapp WeChat アプレット。実際のログイン プロセスを実装するには、WeChat アプレット ログインをバックエンド API インターフェイスと共同でデバッグし、バックエンドから戻り情報を取得する必要があることに注意してください。同時に、OpenID などのユーザーの個人情報は、漏洩や悪用を避けるためにログインプロセス中に保護される必要があります。

以上がuniapp WeChat アプレットにログインする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。