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

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