Taro框架实现微信登录及获取手机号和用户信息-明恒博客

当前文章收录状态：

未收录


import React , { useState } from "react";
import { Button, Image, Toast } from "@taroify/core";
import Taro from "@tarojs/taro";
import wechatApi from "../api/wechat";
import WXBizDataCrypt from "../utils/WXBizDataCrypt";
function WechatLoginComponent() {
  const [fail, failState] = useState(false);
  const [failText, failTextState] = useState("错误提示");
  const [dialogType, dialogTypeState] = useState("fali");
  const [phone, phoneState] = useState("");
  const [userInfo, userInfoState] = useState({});
  const style = {
    width: "100%",
    height: "100%",
  };
  const getUserProfile = () => {
    Taro.getUserProfile({
      desc: '用户登录', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        userInfoState(res.userInfo);
      }
    });
  };
  const getPhonenNmber = (e) => {
    const iv = e.detail.iv;
    const encryptedData = e.detail.encryptedData;
    // 登录
    Taro.login({
      success: function (res) {
        if (res.code) {
          // 获取用户唯一id
          wechatApi.jscode2session(res.code).then((r) => {
            if (r.statusCode == 200) {
              // 获取用户openid和session_key
              const { openid, session_key } = r.data;
              // 获取手机号
              const pc = new WXBizDataCrypt("wx339df4bd91fecc8d", session_key);
              const data = pc.decryptData(encryptedData , iv);
              const phoneNumber = data.phoneNumber;
              Taro.setStorage({
                key: "phoneNumber",
                data: phoneNumber
              })
              phoneState(phoneNumber);
              // 储存用户唯一openid到后端
              // 提示登录成功
              errorDialog("登录成功", "success");
            }
          });
        } else {
          errorDialog('登录失败！' + res.errMsg, "fail");
        }
      }
    });
  };
  const errorDialog = (text, type) => {
    failState(true);
    failTextState(text);
    dialogTypeState(type);
    setTimeout(() => {
      failState(false);
    }, 1000);
  }
  return (
    <>
      <Toast open={fail} type={dialogType}>{failText}</Toast>
      <Image style={{ width: "100px", height: "100px" }} src={userInfo.avatarUrl} />
      <p>昵称：{userInfo.nickName}</p>
      <p>手机号：{phone}</p>
      <Button color='primary' shape='round' style={style} open-type='getPhoneNumber' onGetPhoneNumber={getPhonenNmber}>
        一键登录
      </Button>
      <Button color='primary' shape='round' style={style} onClick={getUserProfile}>
        一键获取信息
      </Button>
    </>
  );
}
export default WechatLoginComponent;
import React , { useState } from "react";
import { Button, Image, Toast } from "@taroify/core";
import Taro from "@tarojs/taro";
import wechatApi from "../api/wechat";
import WXBizDataCrypt from "../utils/WXBizDataCrypt";

function WechatLoginComponent() {
  const [fail, failState] = useState(false);
  const [failText, failTextState] = useState("错误提示");
  const [dialogType, dialogTypeState] = useState("fali");
  const [phone, phoneState] = useState("");
  const [userInfo, userInfoState] = useState({});
  const style = {
    width: "100%",
    height: "100%",
  };
  const getUserProfile = () => {
    Taro.getUserProfile({
      desc: '用户登录', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        userInfoState(res.userInfo);
      }
    });
  };
  const getPhonenNmber = (e) => {
    const iv = e.detail.iv;
    const encryptedData = e.detail.encryptedData;
    // 登录
    Taro.login({
      success: function (res) {
        if (res.code) {
          // 获取用户唯一id
          wechatApi.jscode2session(res.code).then((r) => {
            if (r.statusCode == 200) {
              // 获取用户openid和session_key
              const { openid, session_key } = r.data;
              // 获取手机号
              const pc = new WXBizDataCrypt("wx339df4bd91fecc8d", session_key);
              const data = pc.decryptData(encryptedData , iv);
              const phoneNumber = data.phoneNumber;
              Taro.setStorage({
                key: "phoneNumber",
                data: phoneNumber
              })
              phoneState(phoneNumber);
              // 储存用户唯一openid到后端

              // 提示登录成功
              errorDialog("登录成功", "success");
            }
          });
        } else {
          errorDialog('登录失败！' + res.errMsg, "fail");
        }
      }
    });
  };
  const errorDialog = (text, type) => {
    failState(true);
    failTextState(text);
    dialogTypeState(type);
    setTimeout(() => {
      failState(false);
    }, 1000);
  }
  return (
    <>
      <Toast open={fail} type={dialogType}>{failText}</Toast>
      <Image style={{ width: "100px", height: "100px" }} src={userInfo.avatarUrl} />
      <p>昵称：{userInfo.nickName}</p>
      <p>手机号：{phone}</p>
      <Button color='primary' shape='round' style={style} open-type='getPhoneNumber' onGetPhoneNumber={getPhonenNmber}>
        一键登录
      </Button>
      <Button color='primary' shape='round' style={style} onClick={getUserProfile}>
        一键获取信息
      </Button>
    </>
  );
}

export default WechatLoginComponent;
import React , { useState } from "react";
import { Button, Image, Toast } from "@taroify/core";
import Taro from "@tarojs/taro";
import wechatApi from "../api/wechat";
import WXBizDataCrypt from "../utils/WXBizDataCrypt";

function WechatLoginComponent() {
  const [fail, failState] = useState(false);
  const [failText, failTextState] = useState("错误提示");
  const [dialogType, dialogTypeState] = useState("fali");
  const [phone, phoneState] = useState("");
  const [userInfo, userInfoState] = useState({});
  const style = {
    width: "100%",
    height: "100%",
  };
  const getUserProfile = () => {
    Taro.getUserProfile({
      desc: '用户登录', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        userInfoState(res.userInfo);
      }
    });
  };
  const getPhonenNmber = (e) => {
    const iv = e.detail.iv;
    const encryptedData = e.detail.encryptedData;
    // 登录
    Taro.login({
      success: function (res) {
        if (res.code) {
          // 获取用户唯一id
          wechatApi.jscode2session(res.code).then((r) => {
            if (r.statusCode == 200) {
              // 获取用户openid和session_key
              const { openid, session_key } = r.data;
              // 获取手机号
              const pc = new WXBizDataCrypt("wx339df4bd91fecc8d", session_key);
              const data = pc.decryptData(encryptedData , iv);
              const phoneNumber = data.phoneNumber;
              Taro.setStorage({
                key: "phoneNumber",
                data: phoneNumber
              })
              phoneState(phoneNumber);
              // 储存用户唯一openid到后端

              // 提示登录成功
              errorDialog("登录成功", "success");
            }
          });
        } else {
          errorDialog('登录失败！' + res.errMsg, "fail");
        }
      }
    });
  };
  const errorDialog = (text, type) => {
    failState(true);
    failTextState(text);
    dialogTypeState(type);
    setTimeout(() => {
      failState(false);
    }, 1000);
  }
  return (
    <>
      <Toast open={fail} type={dialogType}>{failText}</Toast>
      <Image style={{ width: "100px", height: "100px" }} src={userInfo.avatarUrl} />
      <p>昵称：{userInfo.nickName}</p>
      <p>手机号：{phone}</p>
      <Button color='primary' shape='round' style={style} open-type='getPhoneNumber' onGetPhoneNumber={getPhonenNmber}>
        一键登录
      </Button>
      <Button color='primary' shape='round' style={style} onClick={getUserProfile}>
        一键获取信息
      </Button>
    </>
  );
}

export default WechatLoginComponent;

手机号解密文件WXBizDataCrypt.ts：


import { createDecipheriv } from 'crypto'
class WXBizDataCrypt {
  constructor(appId, sessionKey) {
    this.appId = appId
    this.sessionKey = sessionKey
  }
  decryptData(encryptedData, iv) {
    // base64 decode
    var sessionKey = new Buffer(this.sessionKey, 'base64')
    encryptedData = new Buffer(encryptedData, 'base64')
    iv = new Buffer(iv, 'base64')
    try {
      // 解密
      var decipher = createDecipheriv('aes-128-cbc', sessionKey, iv)
      // 设置自动 padding 为 true，删除填充补位
      decipher.setAutoPadding(true)
      var decoded = decipher.update(encryptedData, 'binary', 'utf8')
      decoded += decipher.final('utf8')
      decoded = JSON.parse(decoded)
    } catch (err) {
      throw new Error('Illegal Buffer')
    }
    if (decoded.watermark.appid !== this.appId) {
      throw new Error('Illegal Buffer')
    }
    return decoded
  }
}
export default WXBizDataCrypt
import { createDecipheriv } from 'crypto'

class WXBizDataCrypt {
  constructor(appId, sessionKey) {
    this.appId = appId
    this.sessionKey = sessionKey
  }
  decryptData(encryptedData, iv) {
    // base64 decode
    var sessionKey = new Buffer(this.sessionKey, 'base64')
    encryptedData = new Buffer(encryptedData, 'base64')
    iv = new Buffer(iv, 'base64')

    try {
      // 解密
      var decipher = createDecipheriv('aes-128-cbc', sessionKey, iv)
      // 设置自动 padding 为 true，删除填充补位
      decipher.setAutoPadding(true)
      var decoded = decipher.update(encryptedData, 'binary', 'utf8')
      decoded += decipher.final('utf8')

      decoded = JSON.parse(decoded)

    } catch (err) {
      throw new Error('Illegal Buffer')
    }

    if (decoded.watermark.appid !== this.appId) {
      throw new Error('Illegal Buffer')
    }

    return decoded
  }
}

export default WXBizDataCrypt
import { createDecipheriv } from 'crypto'

class WXBizDataCrypt {
  constructor(appId, sessionKey) {
    this.appId = appId
    this.sessionKey = sessionKey
  }
  decryptData(encryptedData, iv) {
    // base64 decode
    var sessionKey = new Buffer(this.sessionKey, 'base64')
    encryptedData = new Buffer(encryptedData, 'base64')
    iv = new Buffer(iv, 'base64')

    try {
      // 解密
      var decipher = createDecipheriv('aes-128-cbc', sessionKey, iv)
      // 设置自动 padding 为 true，删除填充补位
      decipher.setAutoPadding(true)
      var decoded = decipher.update(encryptedData, 'binary', 'utf8')
      decoded += decipher.final('utf8')

      decoded = JSON.parse(decoded)

    } catch (err) {
      throw new Error('Illegal Buffer')
    }

    if (decoded.watermark.appid !== this.appId) {
      throw new Error('Illegal Buffer')
    }

    return decoded
  }
}

export default WXBizDataCrypt

1 本站网络名称： 明恒博客

2 本站永久网址： www.zym88.cn

3 本站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报。
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END