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

前端流程

1. 引入极光认证 SDK:

  • 通过 <script> 标签引入 ,在 public/index.html 中确认 SDK 脚本已正确加载:参考官网Web 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

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

这里需要加强注意:

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

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

<template><div><button @click="getLoginToken">一键登录</button></div>
</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.contentconsole.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', // 替换成你的AppKeypassword: '你的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 私钥解密加密的手机号码。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/33806.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ElementUI table的设置成Excel表格效果

实现效果代码最重要的部分 <el-table:data"Commision"border:row-style"{height: 0}":cell-style"{padding: 0 ,lineHeight: 0}":header-cell-style"{padding: 0,height: 0,ineHeight: 0}"><el-col :span"11">&…

EtherCAT笔记(四)——EtherCAT数据帧结构

EtherCAT数据包含2B的数据头和44~1948B的数据区。数据区由多个子报文组成。由于EtherCAT本身是通过以太网数据帧的形式传输&#xff0c;因此其协议帧中会携带以太网的帧头。 其中&#xff0c;解释如下&#xff1a; &#xff08;1&#xff09;以太网数据帧头&#xff1a;EtherC…

经典神经网络(12)Transformer代码详解及其在Multi30k数据集上的训练

经典神经网络(12)Transformer代码详解及其在Multi30k数据集上的训练 论文链接&#xff1a;https://arxiv.org/pdf/1706.03762v2 原理可以参考&#xff1a;Self-Attention和Transformer 网络架构图如下&#xff1a; 1 Transformer编码器模块 1.1 Embedding位置编码 在实际…

【AI大模型】GPTS 与 Assistants API

前言 2023 年 11 月 6 日&#xff0c;OpenAI DevDay 发表了一系列新能力&#xff0c;其中包括&#xff1a;GPT Store 和 Assistants API。 GPTs 和 Assistants API 本质是降低开发门槛 可操控性和易用性之间的权衡与折中&#xff1a; 更多技术路线选择&#xff1a;原生 API、…

6.二叉树.题目1

6.二叉树.题目 题目1.翻转二叉树2.对称二叉树3.二叉树的最大深度4.二叉树的最小深度5.完全二叉树的节点个数6.平衡二叉树7.二叉树的所有路径8.左叶子之和 总结 题目 1.翻转二叉树 (题目链接) 直观的思路是就把每一个节点的左右孩子交换一下就可以了&#xff0c; 深度优先-递归…

stm32学习笔记---TIM输出比较(理论部分)

目录 TIM简介 定时器类型 基本定时器的结构图 时基单元 预分频器 计数器 自动重装寄存器 主模式触发DAC的功能 通用定时器的结构图 计数器的计数模式 内外时钟源选择和主从触发模式的结构 外部时钟模式2 外部时钟模式1 其他部分 输出比较电路 输入捕获电路 高…

深度测试中的隐藏面消除技术

by STANCH 标签&#xff1a;#计算机图形学 #深度测试 #深度测试 #隐藏面消除 1.概述 根据我们的日常经验&#xff0c;近处的物体会挡住后面的物体&#xff0c;在三维场景中通常通过深度缓冲来实现这样的效果。深度缓冲记录着屏幕对应的每个像素的深度值。模型一开始所在的局部…

我对ChatGPT-5的期待

在科技飞速发展的今天&#xff0c;人工智能&#xff08;AI&#xff09;已经成为我们生活中不可或缺的一部分。尤其是近年来&#xff0c;随着ChatGPT等先进AI模型的推出&#xff0c;我们见证了AI技术在智能水平上的巨大飞跃。作为这一领域的最新成果&#xff0c;GPT-5的即将发布…

2005年下半年软件设计师【上午题】试题及答案

文章目录 2005年下半年软件设计师上午题--试题2005年下半年软件设计师上午题--答案 2005年下半年软件设计师上午题–试题 2005年下半年软件设计师上午题–答案

解决ssh: connect to host IP port 22: Connection timed out报错(scp传文件指定端口)

错误消息 ssh: connect to host IP port 22: Connection timed out 指出 SSH 客户端尝试连接到指定的 IP 地址和端口号&#xff08;默认 SSH 端口是 22&#xff09;&#xff0c;但是连接超时了。这意味着客户端没有在预定时间内收到来自服务器的响应。 可能的原因 SSH 服务未…

C语言---C指针+ASCII码

内存地址&#xff1a;内存中每个字节单位都有一个编号&#xff08;一般用十六进制表示&#xff09; 存储类型 数据类型 *指针变量名&#xff1b;int *p; //定义了一个指针变量p,指向的数据是int类型的。访问指针所指向空间的内容用取内容运算符* &&#xff1a;取地址符&am…

LeetCode —— 只出现一次的数字

只出现一次的数字 I 本题依靠异或运算符的特性&#xff0c;两个相同数据异或等于0&#xff0c;数字与0异或为本身即可解答。代码如下: class Solution { public:int singleNumber(vector<int>& nums) {int ret 0;for (auto e : nums){ret ^ e;}return ret;} };只出…

数据模型(models)

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 &#xff08;1&#xff09;在App中添加数据模型 在app1的models.py中添加如下代码&#xff1a; from django.db import models # 引入django.…

Qt开发 | Qt界面布局 | 水平布局 | 竖直布局 | 栅格布局 | 分裂器布局 | setLayout使用 | 添加右键菜单 | 布局切换与布局删除重构

文章目录 一、Qt界面布局二、Qt水平布局--QHBoxLayout三、Qt竖直布局四、Qt栅格布局五、分裂器布局代码实现六、setLayout使用说明七、布局切换与布局删除重构1.如何添加右键菜单2.布局切换与布局删除重构 一、Qt界面布局 Qt的界面布局类型可分为如下几种 水平布局&#xff08;…

谐波减速器行业发展速度有望加快 工业机器人领域为其最大需求端

谐波减速器行业发展速度有望加快 工业机器人领域为其最大需求端 谐波减速器指通过增大转矩、降低转速等方式实现减速目的的精密传动装置。谐波减速器具有轻量化、体积小、承载能力大、精度高、可靠性高、运行噪音小等优势&#xff0c;广泛应用于工业机器人、半导体制造、精密医…

AWS中国云配置强制MFA策略后导致AWS CLI和IDEA中无法使用问题

问题 之前的文章《AWS中国IAM用户强制使用MFA》&#xff0c;启用必须使用MFA策略才能使用AWS服务。但是&#xff0c;开启之后&#xff0c;遇到了本地开发环境的IDEA和AWS CLI不能正常调用ssm的配置中心问题。 解决思路 在本地配置文件中&#xff0c;配置使用能够正常使用ssm…

web开发前后端分离

文章目录 1.广义上的前后端分离 1.广义上的前后端分离 优点&#xff1a; 1.前后端分离&#xff0c;便于后期维护;2.前端服务器只需要返回静态界面&#xff0c;后端服务器只提供增删查改的数据返回&#xff0c;把数据的转换逻辑的处理压力转移到了客户端;

MySQL 8版本的新功能和改进有哪些?(MySQL收藏版)

目录 1. 简单介绍 2. 发展历史 3. MySQL 8产品特性 4. 数据库性能重点分析 1. 原生 JSON 支持改进 2. 隐式列优化 3. 改进的查询优化器 4. 并行查询 5. 分区表改进 MySQL 是一个流行的开源关系型数据库管理系统&#xff08;RDBMS&#xff09;&#xff0c;由瑞典公司 M…

了解SD-WAN与传统WAN的区别

近年来&#xff0c;许多企业选择了SD-WAN作为他们的网络解决方案。云基础架构的SD-WAN不仅具备成本效益&#xff0c;而且提供更安全、更可靠的WAN连接&#xff0c;有助于实现持续盈利。客户能够更好地控制他们的网络&#xff0c;个性化定制且无需额外成本。 那么&#xff0c;为…

服务器数据恢复—raid故障导致部分分区无法识别/不可用的数据恢复案例

服务器数据恢复环境&#xff1a; 一台某品牌DL380服务器中3块SAS硬盘组建了一组raid。 服务器故障&#xff1a; RAID中多块磁盘出现故障离线导致RAID瘫痪&#xff0c;其中一块硬盘状态指示灯显示红色。服务器上运行的数据库在D分区&#xff0c;备份文件存放在E分区。由于RAID瘫…