一键登录功能实现（采用极光SDK）

前端流程

1. 引入极光认证 SDK：

通过 <script> 标签引入，在 public/index.html 中确认 SDK 脚本已正确加载：参考官网Web SDK 概述 - 极光文档

 <script type="text/javascript" src="https://jverification.jiguang.cn/scripts/1.0.0/jverification-web.min.js"></script>

2. 初始化 SDK

参考极光官方文档：Web SDK API - 极光文档

mounted() {
  // 确保 SDK 已加载
  if (window.JVerification) {
    this.initJVerification();
  } else {
    const script = document.createElement('script');
    script.src = 'https://jverification.jiguang.cn/sdk/web/jverification.js';
    script.onload = this.initJVerification;
    document.head.appendChild(script);
  }
},
methods: {
  initJVerification() {
    JVerification.init({
      appkey: '你的AppKey',  // 替换成你的AppKey
    });
  }
}

3. 获取 loginToken

参考极光官方文档：Web SDK API - 极光文档

<template>
  <div>
    <button @click="getLoginToken">一键登录</button>
  </div>
</template>

<script>
export default {
  methods: {
    getLoginToken() {
      JVerification.getToken({
        timeout: 5000, // 超时时间，单位毫秒
        success: (data) => {
          const loginToken = data.loginToken;
          console.log('loginToken:', loginToken);
          // 这里可以继续调用之前提到的发送请求到极光 API 的方法
          this.verifyLoginToken(loginToken);
        },
        fail: (err) => {
          console.error('获取 loginToken 失败:', err);
        }
      });
    },
    verifyLoginToken(loginToken) {
      // 调用前面定义的验证 loginToken 的方法
      getPhoneNumber(loginToken)
        .then((response) => {
          console.log('手机号码:', response.phone);
          // 在这里处理获取到的加密手机号码
        })
        .catch((error) => {
          console.error('验证 loginToken 失败:', error);
        });
    }
  }
}
</script>

后端流程

1. 发送请求到极光 API

使用获取到的 loginToken，将其发送到极光提供的 API 进行验证，并获取加密的手机号码。

参考官方文档：一键登录 API - 极光文档

也可采用前端直接调用极光 API

import axios from 'axios';

const getPhoneNumber = async (loginToken) => {
  try {
    const response = await axios.post(
      'https://api.verification.jpush.cn/v1/web/loginTokenVerify',
      {
        loginToken: loginToken,
        exID: '1234566', // 可选
      },
      {
        auth: {
          username: '你的AppKey', // 替换成你的AppKey
          password: '你的Master Secret', // 替换成你的Master Secret
        },
        headers: {
          'Content-Type': 'application/json',
        },
      }
    );
    return response.data;
  } catch (error) {
    console.error('Error:', error);
    return null;
  }
};

export default getPhoneNumber;

2. 解密手机号

加密的手机号码需要用 RSA 私钥解密。此过程通常在服务器端完成。

参考官网示例 Java：

import javax.crypto.Cipher;
import java.security.KeyFactory;
import java.security.PrivateKey;
import java.security.spec.PKCS8EncodedKeySpec;
import java.util.Base64;

public class RSADecrypt {
    public static void main(String[] args) throws Exception {String encrypted = args[0];
          String prikey = args[1];
          String result = decrypt(encrypted, prikey);
          System.out.println(result);
    }

    public static String decrypt(String cryptograph, String prikey) throws Exception {PKCS8EncodedKeySpec keySpec = new PKCS8EncodedKeySpec(Base64.getDecoder().decode(prikey));
           PrivateKey privateKey = KeyFactory.getInstance("RSA").generatePrivate(keySpec);
    
           Cipher cipher=Cipher.getInstance("RSA");
          cipher.init(Cipher.DECRYPT_MODE, privateKey);
    
           byte [] b = Base64.getDecoder().decode(cryptograph);
           return new String(cipher.doFinal(b));
    }
}

解密完成后执行自己的登录逻辑，返回登录成功等信息。

其中涉及到 RSA 私钥解密加密的手机号码：给出 RSA 公私钥生成地址：在线生成公钥私钥对，RSA公私钥生成-ME2在线工具