Taro框架实现微信登录及获取手机号和用户信息
2023-02-19 12:20:16 时间
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
相关文章
- Jgit的使用笔记
- 利用Github Action实现Tornadofx/JavaFx打包
- 叹息!GitHub Trending 即将成为历史!
- 微软软了?开源社区讨论炸锅,GitHub CEO 亲自来答
- GitHub Trending 列表频现重复项,前后端都没去重?
- Photoshop Elements 2021版本软件安装教程(mac+windows全版本都有)
- (ps全版本)Photoshop 2020的安装与破解教程(mac+windows全版本都有)
- (ps全版本)Photoshop cc2018的安装与破解教程(mac+windows全版本,包括2023
- 环境搭建:Oracle GoldenGate 大数据迁移到 Redshift/Flat file/Flume/Kafka测试流程
- 每个开发人员都要掌握的:最小 Linux 基础课
- 来撸羊毛了!Windows 环境下 Hexo 博客搭建,并部署到 GitHub Pages
- 超实用!手把手入门 MongoDB:这些坑点请一定远离
- 【GitHub日报】22-10-09 zustand、neovim、webtorrent、express 等4款App今日上新
- 【GitHub日报】22-10-10 brew、minio、vite、seaweedfs、dbeaver 等8款App今日上新
- 【GitHub日报】22-10-11 cobra、grafana、vue、ToolJet、redwood 等13款App今日上新
- Photoshop 2018 下载及安装教程(mac+windows全版本都有,包括最新的2023)
- Photoshop 2017 下载及安装教程(mac+windows全版本都有,包括最新的2023)
- Photoshop 2020 下载及安装教程(mac+windows全版本都有,包括最新的2023)
- Photoshop 2023 资源免费下载(mac+windows全版本都有,包括最新的2023)
- 最新版本Photoshop CC2018软件安装教程(mac+windows全版本都有,包括2023