【Vue3+Ts】使用第三方登录（Google、FaceBook、Apple）以及令牌数据解码！（必备收藏）

本文链接：https://blog.csdn.net/yasyList/article/details/135997601

创建third-party-login.ts文件

// ElLoading 为elementplus的loading加载动画，不需要自行去除！！
import { ElLoading } from "element-plus";

// 登录类型枚举
enum LoginType {
  Apple = "apple",
  Google = "google",
  Facebook = "facebook",
}

// 全局 window 对象
const globalWindow: any = window;

// 封装登录函数
const loginWithSocialMedia = async (type: LoginType): Promise<any> => {
  // 显示 loading 动画
  const loading = ElLoading.service({ lock: true });
  try {
    // 根据不同的登录类型执行相应的登录逻辑
    switch (type) {
      case LoginType.Apple:
        return await loginWithApple();
      case LoginType.Google:
        return await loginWithGoogle();
      case LoginType.Facebook:
        return await loginWithFacebook();
      default:
        throw new Error("Unsupported login type");
    }
  } catch (error) {
    // 捕获错误并向外部抛出
    throw error;
  } finally {
    // 无论如何都关闭 loading 动画
    loading.close();
  }
};

// Apple 登录逻辑封装
const loginWithApple = (): Promise<any> => {
  return new Promise((resolve, reject) => {
    try {
      globalWindow.AppleID.auth.init({
        clientId: "com.honghe.test",
        scope: "email",
        redirectURI: "https://b2537z8000.vicp.fun",
        state: "initial",
        usePopup: true,
      });
      globalWindow.AppleID.auth.signIn().then(resolve).catch(reject);
    } catch (error) {
      reject(error);
    }
  });
};

// Google 登录逻辑封装
const loginWithGoogle = (): Promise<any> => {
  return new Promise((resolve, reject) => {
    try {
      globalWindow.google.accounts.id.initialize({
        client_id:
          "726537125667-bd9r88mokdifavb80pd6og4ai2ltis6h.apps.googleusercontent.com",
        scope: "email",
        callback: resolve,
      });
      globalWindow.google.accounts.id.prompt();
    } catch (error) {
      reject(error);
    }
  });
};

// Facebook 登录逻辑封装
const loginWithFacebook = (): Promise<any> => {
  return new Promise((resolve, reject) => {
    try {
      globalWindow.FB.init({
        appId: "283948457571505",
        cookie: true,
        xfbml: true,
        version: "v19.0",
      });
      globalWindow.FB.getLoginStatus((response: any) => {
        if (response.status !== "connected") {
          globalWindow.FB.login((res: any) => {
            resolve(res.authResponse);
          });
        } else {
          resolve(response.authResponse);
        }
      });
    } catch (error) {
      reject(error);
    }
  });
};

export { loginWithSocialMedia, LoginType };

安装第三方JWT令牌插件

cnpm install jwt-decode

》》页面解码使用
import { jwtDecode } from "jwt-decode";

页面使用：根据Type

import { loginWithSocialMedia, LoginType } from "./third-party-login.ts";

！！Facebook令牌解码不一样，所以不能用上方解码插件，详见下方具体代码

// 第三方登录点击事件方法
const loginOtherChange = async (type: LoginType) => {
  try {
    const data = await loginWithSocialMedia(type);
    // 处理不同回调函数
    if (type === LoginType.Apple) {
      const resData= jwtDecode(data.authorization.id_token);
      // 写你自己登录后的代码
    } else if (type === LoginType.Google) {
      const resData = jwtDecode(data.credential);
      // 写你自己登录后的代码
    } else if (type === LoginType.Facebook) {
      (window as any).FB.api("/me?fields=email,name", (response: any) => {
        // 写你自己登录后的代码
        console.log(JSON.stringify(response));
      });
    }
  } catch (error) {
    console.error(`Login error with ${type}:`, error);
  }
};

index.html页面引入：

facebook

<script src="https://connect.facebook.net/zh_TW/sdk.js"></script>

google

<script src="https://accounts.google.com/gsi/client"></script>

apple

<script type="text/javascript" src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script>

！！！appId和client_id找运营要或者自己配置。具体方法详见各平台开发者api

后续如遇到其他第三方平台将会在本文章更新，建议收藏保存！！！

如遇登录出现：
invalid_request：配置的回调地址不正确
invalid_client：client_id不正确
不安全登录：需使用https域名