一键登录功能实现(采用极光SDK)

前端流程

1. 引入极光认证 SDK:

<!-- 引入极光认证 SDK -->

<script type="text/javascript" src="https://jverification.jiguang.cn/scripts/jverification-web.5.2.0.min.js?v=4"></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

这里需要加强注意:

  1. 极光官方文档中有两个 api 用于获取 token 但是一键登录是 loginAuth

  2. 在调用 loginAuth 中要使用公网 ip,并提前报备在极光平台中

    <template>
    <button @click="getLoginToken">一键登录</button>
    </template> <script> export default { methods: { async getToken() { const operater = 'CM'; // 示例运营商,替换为您需要的运营商代号 const options = { operater, type:"full", success: (data) => { this.jverificationData = { ...this.jverificationData, getTokenSuccess: data, loginToken: data.content, operater: data.operater }; this.loginData.loginToken = data.content console.log('获取Token成功:', data); // 添加其它处理逻辑 }, fail: (data) => { this.jverificationData = { ...this.jverificationData, getTokenError: data }; console.error('获取Token失败:', data); }, };
    复制代码
     			if (window.JVerificationInterface && this.jverificationData.isInitSuccess) {
     				window.JVerificationInterface.loginAuth(options);
     			} else {
     				console.error('SDK未初始化或初始化未成功,无法获取Token');
     			}
     		},

    }
    }
    </script>

后端流程

1. 发送请求到极光 API

  • 使用获取到的 Token,将其发送到极光提供的 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 公私钥生成地址:https://www.metools.info/code/c80.html

总结

  • 前端
  • 引入和初始化极光认证 SDK。
  • 获取 loginToken 并发送到极光 API。
  • 处理 API 响应并传递到后端。
  • 后端
  • 发送 loginToken 请求到极光 API 验证。
  • 使用 RSA 私钥解密加密的手机号码。
相关推荐
GISer_Jing1 分钟前
2025年FE_Jinger的年度总结、经验分享与展望
前端·经验分享·面试·前端框架·aigc
.try-3 分钟前
css直线中间小三角
前端·css·html
Dreamcatcher_AC5 分钟前
Node.js留言板开发全流程解析
前端·javascript·mysql·node.js·express
superman超哥12 分钟前
Rust 依赖管理与版本控制:Cargo 生态的精妙设计
开发语言·后端·rust·rust依赖管理·rust版本控制·cargo生态
启扶农16 分钟前
lecen:一个更好的开源可视化系统搭建项目--介绍、搭建、访问与基本配置--全低代码|所见即所得|利用可视化设计器构建你的应用系统-做一个懂你的人
低代码·vue·node·所见即所得·表单设计·页面可视化·页面设计器
鹏程十八少22 分钟前
Android 一套代码适配车机/手机横竖屏?看我如何用搞定小米、比亚迪、蔚来、理想、多品牌架构设计
android·前端·面试
SadSunset24 分钟前
Spring框架全面学习总结
java·学习·spring
持续升级打怪中27 分钟前
从前端到大模型:我的AI转型之路与实战思考
前端·人工智能
LYFlied28 分钟前
【性能优化】图片渲染性能优化全流程方案详解
前端·性能优化
『六哥』30 分钟前
零基础搭建完成完整的前后端分离项目的准备工作
前端·后端·项目开发