一键登录功能实现(采用极光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">&…

【SQL】SQL表构建实战:从零开始打造数据基石

目录 SQL入门教程 - 表的创建与管理 1. 创建表及定义字段 2. 描述字段的数据类型与约束 3. 查看表结构 4. 修改与删除表 注意 SQL入门教程 - 表的创建与管理 数据库中的表是数据存储和组织的基本单元&#xff0c;每一行代表一条记录&#xff0c;每一列代表一个字段&#…

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; 深度优先-递归…

ArcGIS Pro SDK (六)CoreHost

核心主机 环境&#xff1a;Visual Studio 2022 .NET6 ArcGIS Pro SDK 3.0 1 初始化核心主机 using ArcGIS.Core.Data; //必须引用ArcGIS.CoreHost.dll using ArcGIS.Core.Hosting;class Program {//[STAThread] 必须出现在应用程序入口点上[STAThread]static void Main(stri…

艺术与科技的融合:AI绘画工具的革命性影响*

在艺术的长河中&#xff0c;人类一直是创造美的主体。然而&#xff0c;随着人工智能技术的飞速发展&#xff0c;AI绘画工具的出现&#xff0c;正在重新定义艺术创作的边界。这些工具不仅能够模仿传统艺术风格&#xff0c;还能够创造出前所未有的视觉体验&#xff0c;引发人们对…

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

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

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

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

Pytorch读书笔记:PyTorch模型训练实用教程

文章目录 饭不能不吃&#xff0c;书也不能不看。本文为《PyTorch模型训练实用教程——余霆嵩》读书笔记目录&#xff1a; 大佬github地址&#xff1a;点击跳转

【Three】Three js有哪些优势和不足

Three.js 的优势和不足可以总结如下&#xff1a; 优势&#xff1a; 易于使用&#xff1a;Three.js 封装了 WebGL 的底层复杂性&#xff0c;提供了简洁而强大的 API&#xff0c;使得开发者能够更快速地学习和使用 3D 图形技术。 功能丰富&#xff1a;支持多种几何体、材质、贴…

zerotier-one自建根服务器方法三

一、简介 zerotier-one免费账户有25设备的限制&#xff0c;如果自己的设备多了就需要付费。不过zerotier-one是开源软件&#xff0c;我们可以自己建立根服务器&#xff0c;不用付费速度还很快。 今天接着上一篇文章继续写。 二、准备工作 准备一个有公网IP的云主机。 要稳…

PostgreSQL逻辑备份-pg_dump

1.pg_dump备份恢复 pg_dump 是一个逻辑备份工具。使用 pg_dump 可以在数据库处于使用状态下进行一致 性的备份&#xff0c; 它不会阻塞其他用户对数据库的访问 。 一致性备份是 pg_dump 开始运行时&#xff0c;给数据库打了一个快照&#xff0c;且在 pg_dump 运行过程 中发生…

我对ChatGPT-5的期待

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

addresstool解决了地址方面什么问题

Addresstool 主要解决以下与地址处理相关的挑战&#xff1a; 地址标准化: 它能够将各种非标准化或随意书写的地址信息转换为统一、规范的格式。这包括纠正行政区划名称、标准化道路名称等&#xff0c;确保所有地址按照既定规则表达&#xff0c;便于后续的数据分析和处理。 地址…

在C++、动态库、窗体应用程序中,表示圆周率Π=3.1415926...

一、C .h #define _USE_MATH_DEFINES #include "math.h".cpp Math::PI;//在.cpp文件中正常使用二、动态库 生成dll&#xff1a;文件–新建–项目–其他语言–Visual Basic–类库–名称–ClassLibrary1&#xff0c; Classbrary1成功生成解决方案&#xff0c;则会自…

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 服务未…

数据库-索引与视图-视图的定义与操纵

创建视图&#xff1a; CREATE [OR REPLACE] [ALGORITHM {UNDEFINED | MERGE | TEMPTABLE}]VIEW view_name [(column_list)]AS select_statement[WITH [CASCADED | LOCAL] CHECK OPTION] OR REPLACE&#xff1a;表示替换已有视图&#xff1b; ALGORITHM&#xff1a;表示视图选…