Comment utiliser node.js pour obtenir l'autorisation utilisateur WeChat (code ci-joint)-js tutoriel-php.cn

Le contenu de cet article explique comment utiliser node.js pour obtenir l'autorisation de l'utilisateur WeChat (avec code). J'espère que ce sera le cas. t'aider.

Cet article décrit principalement comment ouvrir votre propre page dans WeChat et faire apparaître une fenêtre pour demander l'autorisation de l'utilisateur afin d'obtenir les informations WeChat de l'utilisateur.

Tout d'abord, parlons du processus à partir de zéro pour compléter les informations de partage personnalisées :

Service matériel de base :

Nécessite un nom de domaine valide accessible par le réseau public :

Achetez le nom de domaine et enregistrez-le. Je l'ai acheté sur Alibaba Cloud. Le processus d'enregistrement prend plus de dix jours ouvrables.

Achetez une adresse IP, puis définissez le nom de domaine ci-dessus et résolvez l'adresse IP. Cette fois, vous pouvez l'ignorer.

Ayez votre propre serveur pour stocker vos propres projets de pages :

J'achète toujours le serveur d'Alibaba Cloud. C'est le plus cher, avec quelques centaines de yuans pour le droit de l'utiliser. un an.

De plus, ce serveur est essentiellement un ordinateur, et un ordinateur a sa propre configuration. J'apprends actuellement à l'utiliser moi-même, et la configuration est presque la plus basse, et le package que j'ai acheté est livré avec la sienne. IP publique, pour que je puisse me connecter. L'argent pour l'achat de l'IP ci-dessus est également économisé.

Pour résumer, au final, je n'ai acheté qu'un nom de domaine et un serveur avec une adresse IP publique. Le serveur sert à placer des projets front-end et des projets back-end.

Alibaba Cloud ECS : https://cn.aliyun.com/product/ecs

Plateforme publique WeChat, certification de développeur

Plateforme publique Open WeChat https:// mp .weixin.qq.com/, utilisez l'e-mail pour vous inscrire. Notez qu'un e-mail ne peut enregistrer qu'un seul compte de plateforme publique WeChat, et qu'un compte ne peut choisir qu'une seule catégorie de compte et ne peut pas être modifié. Vous devez être prudent ici et choisir un compte d'abonnement. ici.

Vous pouvez choisir le type personnel, le type d'entreprise, etc. Parmi eux, le type personnel n'a pas de fonctions de personnalisation partagées, mais je ne rencontre pas le type d'entreprise. . . En fin de compte, j'ai choisi le type personnel, car même si mon compte n'a pas d'autorisations, il existe un compte de test entièrement fonctionnel dans le compte public WeChat. Vous pouvez utiliser le compte de test pour étudier et tester, ce qui ne pose toujours aucun problème.

Remplissez les informations, liez WeChat, terminez l'inscription et connectez-vous.

Afin d'effectuer le développement, vous devez configurer ici la configuration correspondante avec votre projet backend et votre projet frontend, et laisser WeChat confirmer que le projet backend et le projet frontend sont les vôtres avant de fournir des services.

Configuration des projets côté serveur et backend :

Tout d'abord, il faut expliquer que le compte d'abonnement ayant relativement peu de fonctions, si vous venez d'apprendre, il est recommandé de choisissez de l'utiliser dans le développement => outils de développement Le compte de test de la plateforme publique est développé à des fins d'apprentissage, de sorte que le service WeChat complet puisse être utilisé et que la configuration soit relativement petite.

Les étapes de configuration suivantes sont toutes requises pour utiliser votre propre compte

Développement=> Configuration de base=> Informations de développement du compte officiel, notez l'ID de développeur (AppID) ici, puis activez le service et notez le mot de passe développeur (AppSecret), qui sera requis lors du développement.

Définissez la liste blanche IP. Ce qui est écrit ici est l'adresse IP de votre propre serveur, car une fois la fonction en ligne, vous devez utiliser ce serveur pour obtenir le jeton d'accès de votre propre service depuis la zone de service WeChat via le ID de développeur et mot de passe

Effectuez le projet en arrière-plan suivant afin de permettre à WeChat de déterminer que ce projet en arrière-plan est le vôtre. La méthode de vérification est que WeChat lance une demande d'obtention et que vous renvoyez la valeur de retour correcte lors de cette configuration. est activé, appelez :

url : adresse de l'interface, telle que http://wx.my.com/forWx

Token : une chaîne entièrement personnalisée, équivalente à un mot de passe. nécessite que cette chaîne participe à l'assemblage.

EncodingAESKey : Généré aléatoirement

Méthode de cryptage et de décryptage des messages : facultatif, ici j'utilise le mode texte brut

Configuration du projet front-end :

Paramètres => Paramètres du compte public=> Paramètres de fonction=> Nom de domaine de sécurité de l'interface JS Ajoutez ici le nom de domaine du site Web sur lequel vous souhaitez utiliser la fonction du SDK WeChat, tel que wx.qq.com ou wx.qq.com/. utilisateur, Vous pouvez écrire jusqu'à trois entrées et une vérification est requise.

> La méthode de vérification consiste à placer un fichier txt fourni par WeChat dans le répertoire racine d'accès du projet Web placé sur le serveur correspondant à ce nom de domaine. Il doit être combiné avec le fichier principal (la plupart. par défaut " index.html") au même niveau. Une fois soumis, WeChat y accédera pour obtenir le fichier et confirmer que ce nom de domaine est le vôtre.

Une fois la configuration terminée, le développement peut commencer.

Entrez maintenant dans l’étape du code.

Prouver que le projet backend et le projet front-end sont les miens

Tout d'abord, ce qui précède prouve que le service est sa propre partie Nous devons implémenter une interface que j'utilise. http://wx.my.com/ En utilisant forWx comme exemple, afin d'activer la configuration, je dois implémenter /forWx pour appeler WeChat. Voici le code :

La construction de l'environnement de base du nœud. est omis. Seules les méthodes internes de l'interface sont écrites ici. La clé est l'assemblage de chiffrement des paramètres

const crypto = require('crypto')  // 引入加密模块
const config = require('./config') // 引入配置文件
// 提供给微信调用
server.get('/forWx', function (req, res) {
  res.header('Access-Control-Allow-Origin', '*')
  // 1.获取微信服务器Get请求的参数 signature、timestamp、nonce、echostr
  let signature = req.query.signature // 微信加密签名
  let timestamp = req.query.timestamp // 时间戳
  let nonce = req.query.nonce // 随机数
  let echostr = req.query.echost // 随机字符串

  // 2.将token、timestamp、nonce三个参数进行字典序排序，其中token就是设置在微信页面中的那个自定义字符串
  let array = [config.token, timestamp, nonce]
  array.sort()

  // 3.将三个参数字符串拼接成一个字符串进行sha1加密
  let tempStr = array.join('')
  const hashCode = crypto.createHash('sha1') //创建加密类型 
  let resultCode = hashCode.update(tempStr, 'utf8').digest('hex')
  
  //4.开发者获得加密后的字符串可与signature对比，标识该请求来源于微信
  if (resultCode === signature) {
    res.send(echostr)
  } else {
    res.send('mismatch')
  }
})

Copier après la connexion

Terminé Ce qui précède est pour prouver que le serveur est le mien. Le projet front-end est le mien. Je saute ceci car c'est trop simple. Téléchargez simplement le fichier et placez-le sur votre propre serveur. L'index.html du projet peut être au même niveau

. Les opérations ci-dessus sont les étapes nécessaires et la base de tout si vous souhaitez développer des pages publiques WeChat.

首先顺着功能使用流程，顺一下实现此功能的方法：

用户在微信打开页面后，立即或者通过方法触发ajax，把当前url和一些state（自定义的数据，因为弹窗请求用户授权，是需要跳转页面的，这个state就是会帮你带到下个页面链接中的数据）作为请求参数，请求自己的后台接口。

后台请求微信服务器，把以下作为参数，拼装到某个固定的微信指定的url后，返回给前端，参数为：

appId：自己的AppId

redirect_uri：前端给的url

scope：授权方式，是静默授权（只能获取用户openId）还是弹窗授权（能获取用户微信个人信息）

state：要带到新页面的参数

前端拿到后端拼好的这个url，直接window.location.href暴力跳转

如果静默授权，则直接用户无感，如果是弹窗授权，则新页面（微信方提供的页面）会弹窗询问用户，是否授权

用户同意授权后，微信再次跳转页面，即跳转到之前传的你的url地址中，还会把state参数给你带上，此外，还多了个code参数，即openId

新页面中，可以使用用户的openId，再加上自己的AppId和AppSecret，调用微信的接口，获取用户的access_token

最后再使用用户的openId和access_token，成功获取用户信息

下面是前端获取微信授权的...html页面

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <!-- 页面描述 -->
  <meta name="description" content=""/>
  <!-- 页面关键词 -->
  <meta name="keywords" content="" />
  <!-- 搜索引擎抓取 -->
  <meta name="robots" content="index,follow"/>
  <!-- 启用360浏览器的极速模式(webkit) -->
  <meta name="renderer" content="webkit">
  <!-- 避免IE使用兼容模式 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- 不让百度转码 -->
  <meta http-equiv="Cache-Control" content="no-siteapp"/>
  <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
  <meta name="HandheldFriendly" content="true">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
  <!-- 优先使用 IE 最新版本和 Chrome -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="mobile-web-app-capable" content="yes">
  <link rel="shortcut icon" type="image/x-icon" href="../static/favicon.ico">
  <title>微信</title>
  <style>
    html, body {
      background-color: skyblue;
      font-size: 16px;
      height: 50%;
      width: 100%;
    }
    #index {
      padding: 10px;
    }
    #index .box > div {
      cursor: pointer;
      background-color: #fff;
      display: inline-block;
      padding: 5px;
      margin: 10px;
    }
    #index .box .getUserInfo {
      display: none;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>
  <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
</head>
<body>
  <div id="index">
    <div class="box">
      <div class="initOauth2" type="snsapi_base">获取微信授权(静默)</div>
      <div class="initOauth2" type="snsapi_userinfo">获取微信授权(弹框)</div>
      <br>
      <div class="wxSweep">扫一扫</div>
      <br>
      <div class="getUserInfo">获取用户信息</div>
    </div>
    <div class="userInfo"></div>
  </div>
</body>
<script>
  let BASE_URL = 'http://wxtestapi.junlli.com'

  // 获取 url 参数
  const getValue = () => {
    let flag = decodeURI(window.location.search.substr(1));
    if (!flag) return undefined
    let arr = flag.split('&')
    if (arr.length <= 0) return undefined
    let obj = {}
    for (let i = 0; i < arr.length; i++) {
      let tempArr = arr[i].split(&#39;=&#39;)
      obj[tempArr[0]] = tempArr[1]
    }
    return obj
  }

  let urlParams = getValue()
  let code
  // 判断是否有code
  if (urlParams && urlParams.code) {
    code = urlParams.code
    $(&#39;.getUserInfo&#39;).css(&#39;display&#39;, &#39;inline-block&#39;)
  }

  $(&#39;.getUserInfo&#39;).on(&#39;click&#39;, function() {
    if (!code) return alert(&#39;请重新获取授权&#39;)
    $.ajax({
      url: BASE_URL + &#39;/getUserInfo&#39;,
      type: &#39;post&#39;,
      data: {
        code,
      },
      success: function(data) {
        console.log(data)
        $(&#39;.userInfo&#39;).html(JSON.stringify(data))
      },
      error: function(error) {
        console.log(error)
        alert(&#39;请重新获取授权&#39;)
      }
    })
  })

  // 获取微信授权
  $(&#39;.box .initOauth2&#39;).on(&#39;click&#39;, function() {
    wxInitOauth2($(this).attr(&#39;type&#39;))
  })
  // 初始化 微信授权
  wxInitOauth2 = type => {
    let url = window.location.origin + window.location.pathname
    console.log('url', url)
    $.ajax({
      url: BASE_URL + '/getOauth2',
      type: 'post',
      data: {
        url,
        type,
        state: 'abcde'
      },
      success: function(data) {
        // 去跳转
        window.location.href = data.url
        // console.log(data)
      },
      error: function(error) {
        console.log(error)
      },
    })
  }
</script>
</html>

Copier après la connexion

下面是node后台代码

const config = require('./config') // 引入配置文件

// 通过 code 获取用户的 openId 和 access_token
const getOpenIdAndAccessToken = code => {
  let params = {
    appid: config.appId,
    secret: config.appSecret,
    code,
    grant_type: 'authorization_code'
  }
  let url = `https://api.weixin.qq.com/sns/oauth2/access_token?${qs.stringify(params)}`
  return new Promise((resolve, reject) => {
    request(url, function (error, res, body) {
      if (res) {
        let bodyObj = JSON.parse(body)
        resolve(bodyObj);
      } else {
        reject(error);
      }
    })
  })
}

// 获取用户信息
const getUserInfo = ({ access_token, openid }) => {
  let params = {
    access_token,
    openid,
    lang: 'zh_CN'
  };
  let url = `https://api.weixin.qq.com/sns/userinfo?${qs.stringify(params)}`
  return new Promise((resolve, reject) => {
    request(url, function (err, res, body) {
      if (res) {
        resolve(JSON.parse(body))
      } else {
        reject(err);
      }
    });
  })
}

// 获取微信授权 --- code
server.post('/getOauth2', (req, res) => {
  try {
    let params = req.body
    let redirect_uri = params.url
    let state = params.state
    let type = params.type
    // 第一步：用户同意授权，获取code
    // type:snsapi_base // 不弹出授权页面，直接跳转，只能获取用户openid
    // type:snsapi_userinfo // 弹出授权页面，可通过openid拿到昵称、性别、所在地
    var scope = type // 弹出授权页面，拿到code
    let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${config.appId}&redirect_uri=${redirect_uri}&response_type=code&scope=${scope}${state ? '&state=' + state : ''}#wechat_redirect`
    res.send({ url });
  } catch (error) {
    res.send(error)
  }
})


// 获取用户个人信息
server.post('/getUserInfo', (req, res) => {
  try {
    let params = req.body
    let code = params.code
    // 先用 code 换取 openId 和 access_token
    getOpenIdAndAccessToken(code).then(obj => {
      // 用 openId 和 access_token 获取个人信息
      getUserInfo(obj).then(data => {
        res.send(data)
      }).catch(error => res.send(error))
    }).catch(error => res(error))
  } catch (error) {
    res.send(error)
  }
})

Copier après la connexion

整体功能实现的步骤和具体代码如上，请酌情参考。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!