node.js를 사용하여 WeChat 사용자 인증을 얻는 방법(코드 첨부)-JS 튜토리얼-php.cn

이 기사의 내용은 node.js를 사용하여 WeChat 사용자 인증(코드 포함)을 얻는 방법에 대한 것입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

이 글에서는 사용자의 WeChat 정보를 얻기 위해 WeChat에서 자신의 페이지를 열고 사용자 인증을 요청하는 창을 팝업하는 방법을 주로 설명합니다.

먼저 사용자 정의 공유 정보를 완성하는 과정을 처음부터 이야기해 보겠습니다.

기본 하드웨어 서비스:

공용 네트워크에서 액세스할 수 있는 유효한 도메인 이름이 필요합니다.

도메인 이름을 구입하고 등록합니다. , 저는 Alibaba에 있습니다. 클라우드 구매의 경우 등록에는 영업일 기준 10일 이상이 소요됩니다.

IP를 구입한 다음 위에서 도메인 이름을 설정하고 해당 IP로 확인하면 됩니다.

자신만의 페이지 프로젝트를 저장할 자체 서버 보유:

저는 여전히 Alibaba Cloud에서 서버를 구입합니다. 이것은 1년 동안 사용할 수 있는 권리가 몇 백 위안으로 가장 비쌉니다.

그리고 이 서버는 본질적으로 컴퓨터이고 컴퓨터에는 구성이 있습니다. 현재는 직접 사용법을 배우는 단계이고 구성도 거의 최저 수준이며 구매한 패키지에는 공용 IP가 포함되어 있으므로 연결할 수 있습니다. 내가 IP를 구입한 사람의 돈도 절약됩니다.

결론적으로 도메인 이름과 공용 IP 주소가 있는 서버만 구입했습니다. 서버는 프런트엔드 프로젝트와 백엔드 프로젝트를 배치하는 데 사용됩니다.

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

WeChat 공개 플랫폼, 개발자 인증

WeChat 공개 플랫폼 https://mp.weixin.qq.com/을 열고 다음을 사용하여 등록하세요. 이메일 주소, 하나의 이메일 주소는 하나의 WeChat 공개 플랫폼 계정만 등록할 수 있으며 하나의 계정은 하나의 계정 카테고리만 선택할 수 있으며 변경할 수 없습니다. 여기에서 주의해야 하며 여기에서 구독 계정을 선택해야 합니다.

개인형, 기업형 등을 선택할 수 있습니다. 그 중 개인형은 커스터마이징 기능을 공유하지 않지만, 기업형은 만나지 않습니다. . . 결국 개인 유형을 선택했습니다. 왜냐하면 내 계정에 권한이 없더라도 WeChat 공개 계정에는 모든 기능을 갖춘 테스트 계정이 있기 때문에 테스트 계정을 사용하여 학습하고 테스트할 수 있으며 여전히 문제가 없습니다.

정보를 입력하고 WeChat을 연결한 후 등록을 완료하고 로그인하세요.

개발을 수행하려면 여기에서 백엔드 프로젝트와 프런트엔드 프로젝트에 해당 구성을 구성해야 하며, 서비스를 제공하기 전에 WeChat에서 백엔드 프로젝트와 프런트엔드 프로젝트가 귀하의 것인지 확인해야 합니다.

서버사이드 및 백엔드 프로젝트 구성:

우선 구독 계정은 기능이 상대적으로 적기 때문에 학습 단계라면 퍼블릭 플랫폼을 사용하는 것을 권장한다는 점을 설명해야 합니다. 개발에 테스트 계정 => 개발 학습을 위한 개발자 도구를 사용하면 상대적으로 적은 구성으로 모든 기능을 갖춘 WeChat 서비스를 사용할 수 있습니다.

자신의 계정을 사용하려면 다음 구성 단계가 모두 필요합니다

Development=> 기본 구성=> 공식 계정 개발 정보 여기에 개발자 ID(AppID)를 적고 서비스를 활성화한 후 개발 비밀번호를 적습니다. (AppSecret) 개발 시 입력해야 합니다.

IP 화이트리스트를 설정하세요. 여기에 기록된 것은 귀하의 서버 IP 주소입니다. 기능이 온라인화된 후 개발자 ID와 비밀번호를 통해 WeChat 서비스 영역에서 귀하의 서비스에 대한 access_token을 얻어야 하기 때문입니다.

다음 백엔드 프로젝트를 수행하는 목적은 WeChat이 이 백그라운드 프로젝트가 귀하의 것인지 확인하도록 하는 것입니다. 확인 방법은 WeChat이 가져오기 요청을 시작하고 이 구성이 활성화되면 올바른 반환 값을 반환하는 것입니다. :

url: 인터페이스 주소(예: http://wx.my.com/forWx

Token): 어셈블리에 참여하려면 반환 값에 해당하는 완전히 사용자 정의된 문자열이 필요합니다.

EncodingAESKey: 무작위로 생성하세요

메시지 암호화 및 암호 해독 방법: 선택 사항, 여기서는 일반 텍스트 모드를 사용합니다.

프런트 엔드 프로젝트 구성:

Settings=> > JS 인터페이스 보안 도메인 이름: wx.qq.com 또는 wx.qq.com/user 등 WeChat SDK 기능을 사용하려는 웹사이트의 도메인 이름을 여기에 추가하세요. 확인이 필요합니다.

> 확인 방법은 위챗에서 제공하는 txt 파일을 해당 도메인 이름에 해당하는 서버에 위치한 웹 프로젝트의 액세스 루트 디렉터리에 넣어서 메인 파일(주로 "index.txt")와 결합해야 합니다. html") )과 동일한 수준입니다. 제출 시 WeChat은 해당 파일에 액세스하여 파일을 얻고 이 도메인 이름이 귀하의 것인지 확인합니다.

구성이 완료되면 개발을 시작할 수 있습니다.

코드 단계로 들어가 보겠습니다.

백엔드 프로젝트와 프론트엔드 프로젝트가 내 것이라는 것을 증명하세요

우선, 위의 내용은 서비스가 자체적인 부분임을 증명합니다. http://wx.my를 사용합니다. com/forWx를 예로 들어 구성을 활성화하려면 /forWx를 구현하여 WeChat을 호출해야 합니다.

노드의 기본 환경 구성은 생략됩니다. 여기에 적힌 핵심은 매개변수 암호화 어셈블리

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')
  }
})

로그인 후 복사

가 완료되었다는 것입니다. 위의 내용은 나중에 프런트엔드 프로젝트가 내 것임을 증명해야 하므로 생략했습니다. 너무 간단합니다. 파일을 직접 다운로드하여 자신의 서버에 넣으십시오. 프론트엔드 프로젝트의 index.html이 동일한 수준입니다. 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>

로그인 후 복사

下面是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)
  }
})

로그인 후 복사

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

위 내용은 node.js를 사용하여 WeChat 사용자 인증을 얻는 방법(코드 첨부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!