EveryLike/pages/API/get-univerify-manager/get-univerify-manager.uvue

<template>
  <view>
    <page-head :title="title"></page-head>
    <view class="uni-padding-wrap uni-common-mt">
      <view class="uni-btn-v uni-common-mt">
        <button type="default" @click="verify(false)">一键登录（半屏）</button>
      </view>
      <view class="uni-btn-v uni-common-mt">
        <button type="default" @click="verify(true)">一键登录（全屏）</button>
      </view>
      <view class="uni-btn-v uni-common-mt">
        <button type="default" @click="customLoginIn()">一键登录（自定义页面）</button>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        title: '一键登录',
        uniVerifyManager: null as UniVerifyManager | null,
        phone: '',
        slogan: '',
        privacyName: '',
        privacyUrl: ''
      }
    },
    onLoad() {
      this.uniVerifyManager = uni.getUniVerifyManager();
      // 预登录
      this.preLogin(() => { });
    },
    methods: {
      customLoginIn() {
        if('production' === process.env.NODE_ENV && '__UNI__HelloUniAppX'===uni.getAppBaseInfo().appId){
          uni.showModal({
            title: '提示',
            content: '一键登录为收费功能，当前环境暂不支持。请在HBuilderX中新建Hello uni-app x项目真机运行体验！',
            showCancel: false
          })
          return
        }
        const isPreLoginValid = this.uniVerifyManager?.isPreLoginValid() ?? false;
        if (isPreLoginValid) {
          this.pushCustomPage();
        } else {
          this.preLogin(() => {
            this.pushCustomPage();
          })
        }
      },
      pushCustomPage() {
        const url = '/pages/API/get-univerify-manager/univerify-custom-page?phone=' + this.phone + '&slogan=' + this.slogan + '&name=' + this.privacyName + '&link=' + this.privacyUrl;
        uni.openDialogPage({
          url: url,
          animationType: 'slide-in-bottom',
          success(res) {
            console.log("成功打开自定义登录页面");
          },
          fail(err) {
            console.log(err);
          }
        })
      },
      verify(fullScreen : boolean) {
        if('production' === process.env.NODE_ENV && '__UNI__HelloUniAppX'===uni.getAppBaseInfo().appId){
          uni.showModal({
            title: '提示',
            content: '一键登录为收费功能，当前环境暂不支持。请在HBuilderX中新建Hello uni-app x项目真机运行体验！',
            showCancel: false
          })
          return
        }
        // 校验预登录是否有效
        const isPreLoginValid = this.uniVerifyManager?.isPreLoginValid() ?? false;
        if (isPreLoginValid) {
          // 预登录有效，执行登录
          this.login(fullScreen);
        } else {
          // 预登录无效，执行预登录
          this.preLogin(() => {
            this.login(fullScreen);
          })
        }
      },
      preLogin(callback: (() => void)) {
        this.uniVerifyManager?.preLogin({
          success: (res) => {
            this.phone = res.number;
            this.slogan = res.slogan;
            this.privacyName = res.privacyName;
            this.privacyUrl = res.privacyUrl;
            console.log("pre login success");
            callback();
          },
          fail: (err) => {
            console.error("pre login fail => " + JSON.stringify(err));
            const hasCauseMessage = (err.cause?.cause?.message ?? '').length > 0
            uni.showModal({
              title: '预登录失败',
              content: hasCauseMessage ? JSON.parseObject(err.cause?.cause?.message ?? '')?.getString("errorDesc") : err.errMsg,
              showCancel: false
            });
          }
        });
      },
      login(fullScreen : boolean) {
        this.uniVerifyManager?.login({
          uniVerifyStyle:{
            fullScreen: fullScreen,
            loginBtnText: "一键登录",
            logoPath: "/static/logo.png"
          },
          success: (res) => {
            console.log("login success => " + JSON.stringify(res));
            this.takePhoneNumber(res.accessToken,res.openId);
          },
          fail: (err) => {
            console.error("login fail => " + err);
            const hasCauseMessage = (err.cause?.cause?.message ?? '').length > 0
            uni.showModal({
              title: '登录失败',
              content: hasCauseMessage ? JSON.parseObject(err.cause?.cause?.message ?? "")?.getString("errorDesc") : err.errMsg,
              showCancel: false
            });
          }
        });
      },
      takePhoneNumber(accessToken : string, openId : string) {
        // 云函数取号
        uniCloud.callFunction({
          name: 'univerify',
          data: {
            access_token: accessToken, // 客户端一键登录接口返回的access_token
            openid: openId // 客户端一键登录接口返回的openid
          }
        }).then(res => {
          // 关闭登录页
          this.uniVerifyManager?.close();
          setTimeout(() => {
            uni.showModal({
              title: '取号成功',
              content: res.result.getJSON("res")?.getString("phoneNumber"),
              showCancel: false
            });
          }, 100);
        }).catch(err => {
          console.error(JSON.stringify(err));
          // 关闭登录页
          this.uniVerifyManager?.close();
          setTimeout(() => {
            uni.showModal({
              title: '取号失败',
              content: (err as Error).message,
              showCancel: false
            });
          }, 100);
        });

      }
    }
  }
</script>

<style>

</style>/style>