一键登录功能实现(采用极光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 私钥解密加密的手机号码。
相关推荐
大怪v10 小时前
【Virtual World 04】我们的目标,无限宇宙!!
前端·javascript·代码规范
狂炫冰美式10 小时前
不谈技术,搞点文化 🧀 —— 从复活一句明代残诗破局产品迭代
前端·人工智能·后端
databook11 小时前
数据会说谎?三大推断方法帮你“审问”数据真相
后端·python·数据分析
xw511 小时前
npm几个实用命令
前端·npm
!win !11 小时前
npm几个实用命令
前端·npm
代码狂想家11 小时前
使用openEuler从零构建用户管理系统Web应用平台
前端
代码栈上的思考11 小时前
深入解析Spring IoC核心与关键注解
java·后端·spring
dorisrv12 小时前
优雅的React表单状态管理
前端
expect7g12 小时前
Paimon源码解读 -- Compaction-2.KeyValueFileWriterFactory
大数据·后端·flink
小灰灰搞电子12 小时前
Rust 动态分发(dyn Trait)详解
开发语言·后端·rust