前端怎么实现pi登录

最新推荐文章于 2025-12-15 07:24:15 发布

原创最新推荐文章于 2025-12-15 07:24:15 发布 · 723 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

本文介绍了如何在前端使用pisdk进行用户登录，包括文件引入、初始化Pi、获取授权、调用后端接口验证及存储用户信息的过程，并处理登录成功和失败的情况。

首先第一步我们准备一个pisdk文件

在mian.js中引入js文件

然后撰写pi登录方法

import { useUseStore } from "@/stores/user.js";
import { LoginAPI, getUserAPI } from "@/apis/login.js";

import { ToastFun } from "@/hook/toast.js";

import router from "@/router/index";
export function LoginFun() {
  console.log("登录+2...");
  Pi.init({ version: "2.0", sandbox: false });
  console.log("Pi.init...");

  const scopes = ["payments", "username", "wallet_address"];
  const onIncompletePaymentFound = (payment) => {
    return incomplete({
      identifier: payment.identifier,
      transaction: {
        _link: payment.transaction._link,
        txid: payment.transaction.txid,
      },
    }).then((data) => {
      console.log(data);
    });
  };

  Pi.authenticate(scopes, onIncompletePaymentFound)
    .then(async function (auth) {
      console.log("auth", auth);
      let userInfo = {
        accessToken: auth.accessToken,
        userId: auth.user.uid,
        userName: auth.user.username,
      };
      console.log("下步执行登录");

      // 后端的登录接口
      const res = await LoginAPI(userInfo.userName);
      console.log(res);
      useUseStore().token = res.data.token;
      console.log(useUseStore().token);
      if (res.code != 200) {
        ToastFun("show", { msg: "NO" });
      } else {
        // 将用户信息存入pinia
        console.log("成功进入");
        ToastFun("success", { msg: "OK" });
        const result = await getUserAPI();
        if (result.code == 200) {
          useUseStore().userInfo = result.data;
          useUseStore().userId = result.data.uid;
          console.log(res);
        }

        router.push("/home");
      }
    })
    .catch(function (error) {
      console.log("登录错误：", error);
      ToastFun("show", { msg: "NOe" });
      return error;
    });
}