《便了么》APP开发技术分享三 —— 微信和QQ三方登录
故事描述
便了么是一款通过让用户每日记录、监测、分析排便情况,继而为用户健康建议和方案的应用程序。因为便便的数据都是和用户绑定并且保存在服务器上的,之前苹果和安卓的用户如果要能平滑的迁移到鸿蒙手机上来,那便了么之前使用的微信和QQ登录方法就必须要得到支持。好消息是,腾讯已经有QQ和微信登录的三方库,只要集成进到你的鸿蒙应用里面并调用就可以了。

解决方案
集成微信和QQ的sdk到entry下面的oh-package.json5文件里面
{
"name": "entry",
"version": "1.0.0",
"description": "Please describe the basic information.",
"main": "",
"author": "",
"license": "",
"dependencies": {
"@tencent/wechat_open_sdk": "1.0.0",
"@tencent/qq-open-sdk": "^1.0.2"
}
}
然后代码编辑器会显示一个Sync提示,你需要点那个提示进行同步,然后DevEco Studio会自动把这两个三方库安装好。
接着我们需要把微信和QQ需要的变量加到我们的登录组件里面去
@Entry
@Component
struct LoginView {
// 微信登录调用
private wxApi = WXApi
private wxEventHandler = WXEventHandler
// qq 登录使用
qqOpenApi: IQQOpenApi = QQOpenApiHolder.getInstance()
@State qqOpenId: string = ''
然后针对QQ我们需要一个登录QQ的方法
loginQQ() {
this.qqOpenApi.login(this.getUIContext(), {
scope: "all",
useQrCode: false,
networkTimeout: 0,
forceWebLogin: false
}, this.loginListener)
}
这里还需要实现一个登录监听器,监听QQ那边返回的信息
// 互联授权登录回调监听
loginListener: ApiCallback<AuthResponse> = {
onComplete: (response: AuthResponse): void => {
let authResponse = response
if (authResponse.authCode) {
TencentHttpHelper.getAccessToken(QQOpenApiHolder.appId.toString(), authResponse.authCode)
.then((value: AccessTokenJson) => {
console.log(`qqaccess_token=${value.access_token}, qqopenId=${value.openid}`)
this.qqOpenId = value.openid
this.qqOpenApi.getUserInfo(value.access_token, value.openid, this.iuListener)
}).catch((error: string) => {
})
}
},
onError: (msg: string | null): void => {
},
onCancel: (msg: string | null): void => {
}
}
我拿到QQ传给我的信息后再传到我的服务器上去进行账号的匹配。
针对微信我们也同样需要一个登录微信的方法
Column() {
Row({space: 5}) {
Image(`images/login/icon_wx.png`).width(32).height(32)
Text('微信登录').fontSize(18).fontColor(Color.White)
.fontWeight(FontWeight.Bold)
}
}.width(260).height(50).justifyContent(FlexAlign.Center)
.borderRadius(25)
.linearGradient({direction: GradientDirection.RightBottom,
colors: [['rgba(255, 217, 123, 1)', 0.0], ['rgba(255, 181, 83, 1)', 1.0]]})
.shadow({color: 'rgba(245, 162, 65, 0.42)', offsetX: 0, offsetY: 15, radius: 20})
.onClick(async () => {
let req = new wxopensdk.SendAuthReq
req.isOption1 = false
req.nonAutomatic = true
req.scope = 'snsapi_userinfo,snsapi_friend,snsapi_message,snsapi_contact'
req.state = 'none'
req.transaction = 'test123'
let finished = await this.wxApi.sendReq(getContext(this) as common.UIAbilityContext, req)
console.log("send request finished: ", finished)
})
然后针对微信的调用,同样有回调的方法,拿到信息返回到服务器去校验
private onWXResp: OnWXResp = (resp: BaseResp) => {
let sendResp = resp as SendAuthResp
if (sendResp && sendResp.errCode == 0 && sendResp.code && sendResp.code.length > 2) {
let code = sendResp.code
}
}
注意你在EntryAbility.ets文件里面还需要加上微信和QQ的初始化方法
export default class EntryAbility extends UIAbility {
onCreate(want: Want, launchParam: AbilityConstant.LaunchParam) {
this.handleWeChatCallIfNeed(want)
QQOpenApiHolder.create()
}
这样你就轻松地完成了微信和QQ登录得集成,你的安卓和苹果的老用户都可以很方便的迁移到鸿蒙的应用上面来了
2
4
8
浏览1344 发布于2025-01-02 14:04四川
全部评论
最多点赞
最新发布
最早发布
写回答
新增插入模板功能
一键使用模板,快速填写内容,轻松发帖~
知道了
- 为了保障您的信息安全,请勿上传您的敏感个人信息(如您的密码等信息)和您的敏感资产信息(如关键源代码、签名私钥、调试安装包、业务日志等信息),且您需自行承担由此产生的信息泄露等安全风险。
- 如您发布的内容为转载内容,请注明内容来源。
我要发帖子
目录 收起
故事描述
解决方案
了解社区公约,与您携手共创和谐专业的开发者社区。






































苏公安网备 32011402010933号