鸿蒙Api9集成华为登录

最新推荐文章于 2024-09-07 20:40:14 发布

weixin_43807186

最新推荐文章于 2024-09-07 20:40:14 发布

阅读量1.2k

点赞数 8

文章标签：华为 harmonyos notepad++

本文链接：https://blog.csdn.net/weixin_43807186/article/details/135316061

版权

标题做一个APP的三方登录，使用华为账号登录，手机号验证码登录，邮箱验证码登录，账号密码登录

官方文档链接描述

下边按步骤接入一下，需要提前准备一个AppGallery Connect账号

第一步

进入AppGallery Connect创建一个项目，在项目页面开通认证服务

在这里插入图片描述

开局送了1000条短信每月，简直不要太爽，微信小程序的配额一共免费1000条，而且那个还不一定会发验证码，相比于这个就良心多了。在认证的用量能看到短信的发送次数。

在这里插入图片描述

在项目设置的项目配额里边，改成查看认证服务能够看到短信的配额用多少了。

在这里插入图片描述

第二步配置依赖

下载 agconnect-services.json，在AppGallery Connect项目配置->常规下边有这个文件的下载地方。
在这里插入图片描述

第三步把其放到项目的这个位置上，resources/rawfile/文件夹下。

在这里插入图片描述

增加项目文件的依赖，项目文件路径工程/entry/oh-package.json5 把如下内容添加到package.json5里边

{
  "license": "",
  "devDependencies": {},
  "author": "",
  "name": "entry",
  "description": "Please describe the basic information.",
  "main": "",
  "version": "1.0.0",
  "dependencies": {
    "@hw-agconnect/auth-ohos": "^1.1.2",
    "@hw-agconnect/api-ohos": "^1.1.2",
    "@hw-agconnect/core-ohos": "^1.1.2"
  }
}

在这里插入图片描述

在 entry/src/main/module.json5 文件里边增加网络权限。

"requestPermissions": [
  {
    "name": "ohos.permission.INTERNET",
  }
]

第一个：手机号和验证码登录

在这里插入图片描述

接入逻辑

//引入模块
import common from '@ohos.app.ability.common'
import agconnect from '@hw-agconnect/api-ohos';
import "@hw-agconnect/core-ohos";
import "@hw-agconnect/auth-ohos";
import {
  VerifyCodeAction,
  VerifyCodeSettingBuilder,
  PhoneAuthProvider,
} from "@hw-agconnect/auth-ohos"
import router from '@ohos.router';

@Entry
@Component
struct PhoneCodePage {
  @State message: string = '^_^'
  @State phoneNumber: string = ''
  @State verifyCode: string = ''
  countryCode: string = '+86'
  private context = getContext(this) as common.UIAbilityContext
//页面展示操作
  onPageShow() {
  **

## //初始化及查看是否有用户登录信息，如果之前短信验证码验证成功的话，一般来说第二次启动就能拿到上次的登录信息：

**

    agconnect.instance().init(this.context.getApplicationContext());
    agconnect.auth().getCurrentUser().then(user => {
      if (user) {
        //业务逻辑
        console.log(' get user success ' + JSON.stringify(user))
        this.message = 'uuid: ' + user.getUid()
      } else {
        console.log('user not login')
        this.message = '暂无登陆信息'
      }
    }).catch(error => {
      console.log(' get user failed' + JSON.stringify((error)))
    });
  }
//发送验证码
  private handleSendVerifyCode = () => {
    let verifyCodeSettings = new VerifyCodeSettingBuilder()
      .setAction(VerifyCodeAction.REGISTER_LOGIN)
      .setLang('zh_CN')
      .setSendInterval(60)
      .build();
    agconnect.auth().requestPhoneVerifyCode(this.countryCode, this.phoneNumber, verifyCodeSettings)
      .then(verifyCodeResult => {
        console.log('verify code success ' + JSON.stringify(verifyCodeResult))
        //验证码申请成功
        this.message = '发送验证码成功'
      }).catch(error => {
      //验证码申请失败
      console.log('erify code fail ' + JSON.stringify(error))
    });
  }
  private handleCheckVerifyCode = () => {
    let credential = PhoneAuthProvider.credentialWithVerifyCode(this.countryCode, this.phoneNumber, this.verifyCode);
    agconnect.auth().signIn(credential)
      .then(user => {
        //登录成功
        console.log('user is ' + JSON.stringify(user))
        console.log('user.getUser  getDisplayName is ' + JSON.stringify(user.getUser().getDisplayName()))
        console.log('user.getUser getUid is ' + JSON.stringify(user.getUser().getUid()))
        console.log(' user.getUser  getEmail is ' + JSON.stringify(user.getUser().getEmail()))
        console.log('user.getUser getPhone is ' + JSON.stringify(user.getUser().getPhone()))
        console.log('user.getUser getPhotoUrl is ' + JSON.stringify(user.getUser().getPhotoUrl()))
        this.message = ('uuid: ' + user.getUser().getUid()) + "\n" + ("username" + user.getUser().getDisplayName())
      }).catch(error => {
      //登录失败
      console.log('login code fail ' + JSON.stringify(error))
    });
  }

  build() {
    Column({ space: 20 }) {
      TextInput({ placeholder: "请输入手机号" })
        .width(320)
        .height(40)
        .type(InputType.Number)
        .onChange((v) => {
          this.phoneNumber = v
        })

      Row({ space: 20 }) {
        TextInput({ placeholder: "请输入验证码" })
          .width(200)
          .height(40)
          .type(InputType.Number)
          .onChange((v) => {
            this.verifyCode = v
          })

        Button("发送验证码")
          .width(100)
          .height(40)
          .onClick(() => {
            if (this.phoneNumber.length == 11) {
            //此处只判断了长度，可加正则判断
              this.handleSendVerifyCode()
            } else {
              AlertDialog.show({
                message: '请输入正确的手机号',
                confirm: {
                  value: '确定',
                  action: () => {
                  }
                }
              })
            }
          })
      }

      Button("登陆")
        .width(320)
        .height(40)
        .margin({ top: 40 })
        .onClick(() => {
          if (this.verifyCode.length >= 4) {
            this.handleCheckVerifyCode()
          } else {
            AlertDialog.show({
              message: '请输入正确的验证码',
              confirm: {
                value: '确定',
                action: () => {
                }
              }
            })
          }
        })

      Text(this.message)
        .margin({ top: 40 })

      Button("邮箱登陆")
        .width(320)
        .height(40)
        .margin({ top: 10 })
        .onClick(() => {
          router.pushUrl({
            url: "pages/EmailCodePage"
          })
        })
      Button("账号/密码登陆")
        .width(320)
        .height(40)
        .margin({ top: 10 })
        .onClick(() => {
          router.pushUrl({
            url:  "pages/CountAndPwdPage"
          })
        })
      Button("SDK登陆")
        .width(320)
        .height(40)
        .margin({ top: 10 })
        .onClick(() => {
          router.pushUrl({
            url:  "pages/AuthServices"
          })
        })


    }
    .alignItems(HorizontalAlign.Center)
    .padding({ top: 100 })
    .width('100%')
  }
}

第二个邮箱和验证码登录

在这里插入图片描述

import common from '@ohos.app.ability.common'
import agconnect from '@hw-agconnect/api-ohos';
import "@hw-agconnect/core-ohos";
import "@hw-agconnect/auth-ohos";

import {
  EmailAuthProvider,
  VerifyCodeAction,
  VerifyCodeSettingBuilder,
} from "@hw-agconnect/auth-ohos"

@Entry
@Component
struct EmailCodePage {
  @State message: string = '^_^'
  @State emailNumber: string = ''
  @State verifyCode: string = ''
  countryCode: string = '+86'
  private context = getContext(this) as common.UIAbilityContext

  onPageShow() {
    agconnect.instance().init(this.context.getApplicationContext());
    agconnect.auth().getCurrentUser().then(user => {
      if (user) {
        //业务逻辑
        console.log('get user success ' + JSON.stringify(user))
        this.message = 'uuid: ' + user.getUid()
      } else {
        console.log('xx not login')
        this.message = '暂无登陆信息'
      }
    }).catch(error => {
      console.log('get user failed' + JSON.stringify((error)))
    });
  }

  private handleSendVerifyCode = () => {
    let verifyCodeSettings = new VerifyCodeSettingBuilder()
      .setAction(VerifyCodeAction.REGISTER_LOGIN)
      .setLang('zh_CN')
      .setSendInterval(60)
      .build();
    agconnect.auth().requestEmailVerifyCode(this.emailNumber, verifyCodeSettings)
      .then(verifyCodeResult => {
        console.log('xx verify code success ' + JSON.stringify(verifyCodeResult))
        //验证码申请成功
        this.message = '发送验证码成功'
      }).catch(error => {
      //验证码申请失败
      console.log('verify code fail ' + JSON.stringify(error))
    });
  }
  private handleCheckVerifyCode = () => {
    let credential = EmailAuthProvider.credentialWithVerifyCode(this.emailNumber, this.verifyCode);
    agconnect.auth().signIn(credential)
      .then(user => {
        //登录成功
        console.log('user is ' + JSON.stringify(user))
        console.log('user.getDisplayName is ' + JSON.stringify(user.getUser().getDisplayName()))
        console.log('user.getUid is ' + JSON.stringify(user.getUser().getUid()))
        console.log('user.getEmail is ' + JSON.stringify(user.getUser().getEmail()))
        console.log('user.getPhone is ' + JSON.stringify(user.getUser().getPhone()))
        console.log('user.getPhotoUrl is ' + JSON.stringify(user.getUser().getPhotoUrl()))
        this.message = ('uuid: ' + user.getUser().getUid()) + "\n" + ("username" + user.getUser().getDisplayName())
      }).catch(error => {
      //登录失败
      console.log('xx login code fail ' + JSON.stringify(error))
    });
  }

  build() {
    Column({ space: 20 }) {
      TextInput({ placeholder: "请输入邮箱账号" })
        .width(320)
        .height(40)
        .type(InputType.Email)
        .onChange((v) => {
          this.emailNumber = v
        })

      Row({ space: 20 }) {
        TextInput({ placeholder: "请输入验证码" })
          .width(200)
          .height(40)
          .type(InputType.Number)
          .onChange((v) => {
            this.verifyCode = v
          })

        Button("发送验证码")
          .width(100)
          .height(40)
          .onClick(() => {
          //此处正则判断邮箱正确性
            if (this.BooleanregexEmail(this.emailNumber)) {
              this.handleSendVerifyCode()
            } else {
            //弹窗显示提示
              AlertDialog.show({
                message: '请输入正确的邮箱账号',
                confirm: {
                  value: '确定',
                  action: () => {
                  }
                }
              })
            }
          })
      }

      Button("登陆")
        .width(320)
        .height(40)
        .margin({ top: 40 })
        .onClick(() => {
          if (this.verifyCode.length >= 4) {
            this.handleCheckVerifyCode()
          } else {
            AlertDialog.show({
              message: '请输入正确的验证码',
              confirm: {
                value: '确定',
                action: () => {
                }
              }
            })
          }
        })

      Text(this.message)
        .margin({ top: 40 })
    }
    .alignItems(HorizontalAlign.Center)
    .padding({ top: 100 })
    .width('100%')
  }
//正则判断邮箱
  private BooleanregexEmail(email: string): boolean {

    let b: boolean;
    const reg = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9_-]+\.[a-zA-Z0-9_-]+$/;
    reg.test(email)
    if (email.length === 0) {
      b = false;
    } else {
      if (!reg.test(email)) {
        b = false;
      } else {
        b = true;
      }
    }
    return b;
  }
}

第三个账号密码登录

在这里插入图片描述

import common from '@ohos.app.ability.common'
import agconnect from '@hw-agconnect/api-ohos';
import "@hw-agconnect/core-ohos";
import "@hw-agconnect/auth-ohos";
import { PhoneAuthProvider, } from "@hw-agconnect/auth-ohos"

@Entry
@Component
struct CountAndPwdPage {
  @State message: string = '^_^'
  @State account: string = ''
  @State password: string = ''
  countryCode: string = '+86'
  private context = getContext(this) as common.UIAbilityContext

  onPageShow() {


    agconnect.instance().init(this.context.getApplicationContext());
    agconnect.auth().getCurrentUser().then(user => {
      if (user) {
        //业务逻辑
        console.log('xx get user success ' + JSON.stringify(user))
        this.message = 'uuid: ' + user.getUid()
      } else {
        console.log('xx not login')
        this.message = '暂无登陆信息'
      }
    }).catch(error => {
      console.log('xx get user failed' + JSON.stringify((error)))
    });
  }

  build() {
    Column({ space: 20 }) {
      TextInput({ placeholder: "请输入账号" })
        .width(320)
        .height(40)
        .type(InputType.Normal)
        .onChange((v) => {
          this.account = v
        })

      TextInput({ placeholder: "请输入密码" })
        .width(320)
        .height(40)
        .type(InputType.Password)
        .onChange((v) => {
          this.password = v
        })

      Button("登陆")
        .width(320)
        .height(40)
        .margin({ top: 40 })
        .onClick(() => {
          this.handleCheckVerifyCode()
        })

      Text(this.message)
        .margin({ top: 40 })
    }
    .alignItems(HorizontalAlign.Center)
    .padding({ top: 100 })
    .width('100%')
  }

  private handleCheckVerifyCode = () => {
    let credential = PhoneAuthProvider.credentialWithPassword(this.countryCode, this.account, this.password);
    agconnect.auth().signIn(credential)
      .then(user => {
        //登录成功
        console.log('xx user is ' + JSON.stringify(user))
        console.log('xx user.getUser is ' + JSON.stringify(user.getUser().getDisplayName()))
        console.log('xx user.getUser is ' + JSON.stringify(user.getUser().getUid()))
        console.log('xx user.getUser is ' + JSON.stringify(user.getUser().getEmail()))
        console.log('xx user.getUser is ' + JSON.stringify(user.getUser().getPhone()))
        console.log('xx user.getUser is ' + JSON.stringify(user.getUser().getPhotoUrl()))
        this.message = ('uuid: ' + user.getUser().getUid()) + "\n" + ("username" + user.getUser().getDisplayName())
      }).catch(error => {
      //登录失败
      console.log('xx login code fail ' + JSON.stringify(error))
      AlertDialog.show({
        message: JSON.stringify(error),
        confirm: {
          value: '确定',
          action: () => {
          }
        }
      })
    });
  }
}

其中的引用方法展示

import { PhoneUserBuilder } from "../entity/PhoneUserBuilder";
import { PhoneAuthCredential } from "./PhoneAuthCredential";

export class PhoneAuthProvider {

  /**
   * 通过手机和密码获取凭证
   * 如果创建用户时设置了密码，可以采用邮箱和密码登录
   *
   * @param countryCode 国家码
   * @param phoneNumber 手机号
   * @param password 密码
   * @return Email凭证
   */
  public static credentialWithPassword(countryCode: string, phoneNumber: string, password: string): PhoneAuthCredential {
    // TODO 凭证类的继承关系后期需整改
    let user = new PhoneUserBuilder()
      .setCountryCode(countryCode)
      .setPhoneNumber(phoneNumber)
      .setPassword(password)
      .build();
    return new PhoneAuthCredential(user);
  }

  /**
   * 通过手机和验证码获取凭证
   * 如果创建账户的时候没有设置过密码，则只能通过此接口进行登录
   *
   * @param countryCode 国家码
   * @param phoneNumber 手机号
   * @param verifyCode 验证码 Link用户的时候必填
   * @return Email凭证
   */
  public static credentialWithVerifyCode(countryCode: string, phoneNumber: string, verifyCode: string): PhoneAuthCredential {
    let user = new PhoneUserBuilder()
      .setCountryCode(countryCode)
      .setPhoneNumber(phoneNumber)
      .setVerifyCode(verifyCode)
      .build();
    return new PhoneAuthCredential(user);
  }

  /**
   * 通过密码和验证码 双重验证获取凭证
   * 
   * @param countryCode 国家码
   * @param phoneNumber 手机号
   * @param password 密码
   * @param verifyCode  验证码
   * @returns Email凭证
   */
  public static credentialWithPasswordAndVerifyCode(countryCode: string, phoneNumber: string, password: string, verifyCode: string): PhoneAuthCredential {
    let emailUser = new PhoneUserBuilder()
      .setCountryCode(countryCode)
      .setPhoneNumber(phoneNumber)
      .setPassword(password)
      .setVerifyCode(verifyCode)
      .build();
    return new PhoneAuthCredential(emailUser);
  }

}

基本的功能都已经实现了，其中主要的方法需要自己去查看官方文档和源代码
最后最后还有个比较好的功能就是谁发过短信注册过用户在AppGallery Connect都能够查看到。