文档开发者中心
我的
|

HarmonyOS 5

《便了么》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四川
全部评论
最多点赞
最新发布
最早发布

请问大哥你这是个啥?代码能不能给全

收起
自动换行
深色代码主题
复制
QQOpenApiHolder.create()
5楼回复于2025-04-02 07:20 来自湖南
请问一下,this.getUIContent() 直接使用不会编译报错吗,我使用时报错了,请问有处理方法吗
4楼回复于2025-03-13 10:10 来自四川
请问一下,qq登陆时,跳转到申请使用页面时,点击同意,会提示“未注册鸿蒙应用信息,前往官网注册”。你有遇到过吗
5
3楼回复于2025-03-12 07:42 来自上海
  • 139******51
    您好,这个问题您解决了吗?我们也遇到同样的问题
    2025-03-17 08:38 来自北京
  • AiPPT回复139******51
    解决了吗?
    2025-05-13 05:52 来自北京
  • 二师兄
    如果在QQ互联平台配置了相关的信息,还出现这个错误提示是什么原因呀
    2025-06-04 08:32 来自重庆
  • 展开剩余2条回复
写回答
新增插入模板功能
一键使用模板,快速填写内容,轻松发帖~
知道了
  • 为了保障您的信息安全,请勿上传您的敏感个人信息(如您的密码等信息)和您的敏感资产信息(如关键源代码、签名私钥、调试安装包、业务日志等信息),且您需自行承担由此产生的信息泄露等安全风险。
  • 如您发布的内容为转载内容,请注明内容来源。

我要发帖子

目录 收起
故事描述
解决方案
了解社区公约,与您携手共创和谐专业的开发者社区。