HarmonyOS NEXT——【鸿蒙接入微信/支付宝登录】

秋叶先生_

已于 2025-03-25 10:30:31 修改

阅读量1k

点赞数 5

分类专栏： ArkTS从基础到高级最新鸿蒙HarmonyOS应用开发文章标签： harmonyos 华为鸿蒙 typescript 开发语言微信

于 2025-03-25 10:27:38 首次发布

本文链接：https://blog.csdn.net/m0_68038853/article/details/146492981

版权

最新鸿蒙HarmonyOS应用开发同时被 2 个专栏收录

17 篇文章

订阅专栏

ArkTS从基础到高级

16 篇文章

订阅专栏

1、鸿蒙集成微信登录

1.1、申请授权码

首先我们在接入微信sdk之前，需要在微信开放平台申请平台的id授权码和secret用来进行授权。申请secret我们需要填写BundleID和Identifier，那么这两个东西其实对应的就是鸿蒙应用的包名appName以及鸿蒙应用的appid，我们将应用信息填写后等待审核完成后即可获取到应用对应的平台授权码。接入指南 / 鸿蒙接入指南

补充：如果您还未创建鸿蒙项目，具体查看鸿蒙官网项目创建和发布指导：创建HarmonyOS应用/元服务-创建应用-创建项目和应用-AppGallery Connect帮助中心 - 华为HarmonyOS开发者

1.1.1、查看Bundle ID：

Bundle ID 指的是鸿蒙应用的包名：

1.1.2、查看鸿蒙应用appid：

Identifier 指的是鸿蒙应用的 appId，详情可以在AGC平台上查看：

1.1.3、申请成功并查看授权码：（大概需要等待审核时间一天左右）

申请成功后，将可以在微信开放平台——开发配置——鸿蒙应用，查看到APPID以及AppSecret这两个授权码，在后续集成微信sdk中需要使用。

1.2、微信登录

效果：

参考代码：

import common from '@ohos.app.ability.common';
import * as wxopensdk from '@tencent/wechat_open_sdk';
import { ThirdBindParams } from '../../../../models/thirdLogin/ThirdLoginModel';
import { DialogContent2, H5ShowCustomDialog2 } from '../../../../view/H5CustomDialog';
import { CommonConstants } from '../../../constants/CommonConstants';
import { Request } from '../../request';
import { ThirdBindLoginSend } from './ThirdBindLoginSend';
import { OnWXResp, WXApi, WXEventHandler } from './WXApiWrap';


export class WXTool {
  static async WXAuthorize() {
    return new Promise<ThirdBindParams>(async (resolve, reject) => {

      let onWXResp: OnWXResp = (resp) => {
        let WXCode: string = resp['code']
        if (resp.errCode === 0 && WXCode && WXCode.length > 0) {
          const authRespUrl =
            `https://api.weixin.qq.com/sns/oauth2/access_token?appid=${CommonConstants.WXAPP_ID}&secret=${CommonConstants.WXAPP_SECRET}&code=${WXCode}&grant_type=authorization_code`
          Request.get<object>(authRespUrl).then((res) => {
            let WXAuthCode: string = res['openid']
            //微信授权成功后返回openId用于登录使用，接下来的逻辑就是应用登录的相关逻辑，这里根据业务需求自行编写。
            resolve(WXAuthCode)
          })
        } else {
        
        //这里是我自定义的授权失败的提示框，可根据需求自行更换
          let content: DialogContent2 = {
            title: '提示',
            message: "授权失败",
            rightText: '确认',
          }
          H5ShowCustomDialog2(content)
        }
      }
      WXEventHandler.registerOnWXRespCallback(onWXResp)
     
     //根据需要，配置相关参数
      let req = new wxopensdk.SendAuthReq
      req.isOption1 = false
      req.nonAutomatic = true
      req.scope = 'snsapi_userinfo,snsapi_friend,snsapi_message,snsapi_contact'
      req.state = 'bankoftianjin'
      req.transaction = 'bankoftianjin'

      let finished = await WXApi.sendReq(getContext() as common.UIAbilityContext, req)
      if (!finished) {

      }
    })
  }
}

export async function StartWXLogin() {
  let thirdBindParamObj: ThirdBindParams = await WXTool.WXAuthorize()
  if (thirdBindParamObj) {
    ThirdBindLoginSend.ThirdLoginTrade(thirdBindParamObj)
  }
}

这里我提供下相关sdk导入的参考代码，具体参考微信开放平台相关demo以及文档：

//entry\src\main\ets\common\utils\微信支付宝三方SDK工具\微信支付宝登录\WXApiWrap.ets
import * as wxopensdk from '@tencent/wechat_open_sdk';
import { CommonConstants } from '../../../constants/CommonConstants';

export type OnWXReq = (req: wxopensdk.BaseReq) => void
export type OnWXResp = (resp: wxopensdk.BaseResp) => void

const kTag = "WXApiEventHandlerImpl"

class WXApiEventHandlerImpl implements wxopensdk.WXApiEventHandler {
  private onReqCallbacks: Map<OnWXReq, OnWXReq> = new Map
  private onRespCallbacks: Map<OnWXResp, OnWXResp> = new Map

  registerOnWXReqCallback(on: OnWXReq) {
    this.onReqCallbacks.set(on, on)
  }
  unregisterOnWXReqCallback(on: OnWXReq) {
    this.onReqCallbacks.delete(on)
  }

  registerOnWXRespCallback(on: OnWXResp) {
    this.onRespCallbacks.set(on, on)
  }
  unregisterOnWXRespCallback(on: OnWXResp) {
    this.onRespCallbacks.delete(on)
  }

  onReq(req: wxopensdk.BaseReq): void {
    wxopensdk.Log.i(kTag, "onReq:%s", JSON.stringify(req))
    this.onReqCallbacks.forEach((on) => {
      on(req)
    })
  }

  onResp(resp: wxopensdk.BaseResp): void {
    wxopensdk.Log.i(kTag, "onResp:%s", JSON.stringify(resp))
    this.onRespCallbacks.forEach((on) => {
      on(resp)
    })
  }
}
  /**
   * ！！！这里的appid和secret就是一开始申请的授权码。(填写不正确则无法成功进入微信应用!!!)
   * WXAPP_ID = "wx4e71fe1xxxxxxxxx"
   * WXAPP_SECRET = "305a1eb0dc9dxxxxxxxxxxx"
   */
export const WXApi = wxopensdk.WXAPIFactory.createWXAPI(CommonConstants.WXAPP_ID)
export const WXEventHandler = new WXApiEventHandlerImpl

2、鸿蒙集成支付宝sdk登录应用

2.1、获取支付宝平台AppId：

获取 APPID - 支付宝文档中心

2.2、集成支付宝登录：

获取到阿里平台的APPID之后我们便可以开始集成sdk了，步骤较为简单，详情参考阿里开发文档极简版 SDK 调用方法 - 支付宝文档中心

效果：

参考代码

import { AFServiceParams, AFWantParams, AFServiceCenter, AFAuthServiceResponse, AFService } from '@alipay/afservicesdk';
import { ThirdAuthLoginQry, ThirdBindParams } from '../../../../models/thirdLogin/ThirdLoginModel';
import { CommonConstants } from '../../../constants/CommonConstants';
import { Request } from '../../request';
import { ThirdBindLoginSend } from './ThirdBindLoginSend';

export class ALITool {
  /**
   * 支付宝登录授权
   */
  static async AliAuthorize() {
    return new Promise<ThirdBindParams>((resolve, reject) => {

      let bizParams = new Map<string, string>()
      let url =
        encodeURIComponent(`https://authweb.alipay.com/auth?auth_type=PURE_OAUTH_SDK&app_id=${CommonConstants.ALIAPP_ID}&scope=auth_user&state=init`)   //！！！这里的appid需要拼接的是以上步骤获取的阿里平台的授权码！（填写错误将会跳转报错）
      bizParams.set("url", url);

      let backWant: AFWantParams = {
        bundleName: "com.xxxxxxxx", //鸿蒙应用包名
        moduleName: "entry",
        abilityName: "EntryAbility"
      }

      let params =
        new AFServiceParams(bizParams, false, true, 'AliPay', backWant, (response: AFAuthServiceResponse) => {
          let result = response.result
          if (result) {
            let parameters = result['parameters']
            if (parameters) {
              let authcode: string = parameters['auth_code']
              if (authcode && authcode.length > 0) {
                  //阿里支付宝授权成功后返回openId用于登录使用，接下来的逻辑就是应用登录的相关逻辑，这里根据业务需求自行编写。
                      resolve(authcode)
              }

            }
          }

        })
      AFServiceCenter.call(AFService.AFServiceAuth, params)
    })
  }
}

export async function StartALILogin() {
  let thirdBindParamObj: ThirdBindParams = await ALITool.AliAuthorize()
  if (thirdBindParamObj) {
    ThirdBindLoginSend.ThirdLoginTrade(thirdBindParamObj)
  }
}