HarmonyOS 鸿蒙Next微信和QQ三方登录

发布于 1周前 作者 zlyuanteng 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next微信和QQ三方登录

目前腾讯已经有QQ和微信登录的三方库,只要集成进到你的鸿蒙应用里面并调用就可以了。

image.png

解决方案 集成微信和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登录得集成,你的安卓和苹果的老用户都可以很方便的迁移到鸿蒙的应用上面来了


更多关于HarmonyOS 鸿蒙Next微信和QQ三方登录的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于HarmonyOS 鸿蒙Next微信和QQ三方登录的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


《便了么》APP开发技术分享三 —— HarmonyOS 鸿蒙Next微信和QQ三方登录

在HarmonyOS鸿蒙系统上实现《便了么》APP的微信和QQ第三方登录功能,主要依赖于各平台提供的SDK(软件开发工具包)及API(应用程序接口)。

对于微信登录,开发者需先在微信开放平台申请开发者账号,并创建应用获取AppID和AppSecret。接着,下载并集成微信SDK至鸿蒙项目中,通过调用微信提供的授权接口,引导用户进行登录授权。授权成功后,微信服务器会返回code,使用该code向微信服务器请求用户信息,完成登录流程。

QQ登录流程类似,同样需在QQ互联平台申请开发者账号,并获取相关凭证。集成QQ SDK至鸿蒙项目,调用QQ授权接口,用户授权后获取code,再凭code向QQ服务器请求用户信息,实现登录。

在鸿蒙系统上集成第三方登录时,需注意鸿蒙系统的特性和API差异,确保SDK与鸿蒙系统兼容。同时,处理好用户隐私和数据安全,遵循相关平台的开发者协议和隐私政策。

若开发过程中遇到具体技术难题,如SDK集成失败、接口调用异常等,建议参考各平台提供的官方文档和示例代码。如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html。

回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!