Bagaimana untuk log masuk ke applet WeChat uniapp

Dengan populariti program mini WeChat, semakin ramai yang memberi perhatian kepada pembangunan program mini WeChat. Dalam proses ini, modul log masuk sangat diperlukan, dan Uniapp juga telah menjadi rangka kerja pembangunan applet WeChat yang popular. Jadi, bagaimana untuk log masuk ke applet WeChat Uniapp? Mari lihat lebih dekat di bawah.

1. Konfigurasi Platform Pembangun WeChat

Sebelum log masuk ke program mini WeChat, kami perlu melakukan konfigurasi yang berkaitan pada Platform Pembangun WeChat. Pertama, dalam "Pembangunan" -> "Tetapan Pembangunan" -> "Alat Pembangun", buka "Port Perkhidmatan" dan isikan alamat IP anda sendiri.

Kedua, dalam "Pembangunan" -> "Tetapan Pembangunan" -> "Konfigurasi Bahagian Belakang Program Mini", tambahkan program mini "minta nama domain yang sah".

Kemudian, kita perlu mendapatkan AppID dan AppSecret program mini dan menyemaknya dalam "Tetapan" -> "Alat Pembangun" -> "Tetapan Pembangunan".

2. Konfigurasi Uniapp

Dalam kompilasi bersyarat MicroMessenger-uni, kami perlu terlebih dahulu memperkenalkan fail wx-auth.js, yang boleh ditulis sendiri atau dimuat turun dari Internet.

Dalam onLaunch of App.vue, konfigurasikan AppID, AppSecret dan alamat latar belakang applet WeChat untuk mendapatkan Openid.

Langkah seterusnya, apabila memanggil antara muka log masuk, kita perlu menulis kaedah untuk mendapatkan kod dalam 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)
          }
        })
      })
    }

Kemudian, tulis kaedah untuk mendapatkan Openid dalam wx- Kaedah 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)
          }
        })
      })
    }

Akhirnya, dalam halaman log masuk dalam projek, kita boleh menulis kaedah log masuk:

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

3. Pelaksanaan applet WeChat

dalam applet WeChat Pada akhirnya, kita perlu memanggil kaedah wx.login dalam butang log masuk untuk mendapatkan kod, dan kemudian hantar kod ke latar belakang untuk mendapatkan Openid dan maklumat pengguna lain dari latar belakang untuk melaksanakan fungsi log masuk.

Berikut ialah contoh applet WeChat yang memanggil kaedah wx.login:

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

4. Ringkasan

Melalui langkah di atas, kita boleh melaksanakan fungsi log masuk applet WeChat Uniapp. Perlu diingatkan bahawa log masuk applet WeChat perlu dinyahpepijat bersama dengan antara muka API bahagian belakang dan mendapatkan maklumat pemulangan dari bahagian belakang untuk melaksanakan proses log masuk sebenar. Pada masa yang sama, maklumat peribadi pengguna, seperti OpenID, perlu dilindungi semasa proses log masuk untuk mengelakkan kebocoran dan penyalahgunaan.

Atas ialah kandungan terperinci Bagaimana untuk log masuk ke applet WeChat uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!