ionic5+vue3的app支持苹果登录

注意!本文是app授权 不是web授权 确认后再往下看 避免浪费时间

准备功能所需的物料

关于在苹果开发者网站上创建app、创建server id和创建密钥

这位同学总结的很好 直接看:juejin.cn/post/684490...

我们需要的三个东西:

1、这里的Identifier

2、进入后填写的Return URLs

3、密钥文件 .p8结尾的文件

准备好后 开始写代码------前端

一、下载capacitor插件

npm i @capacitor-community/apple-sign-in"

二、使用插件唤起苹果授权

javascript 复制代码
    const options: SignInWithAppleOptions = {
      clientId: "xxxxx", (填刚刚的Identifier)
      redirectURI: "https://xxxx/redirect",(填刚刚的Return URLs)
      scopes: "email name",
      state: "12345",
      nonce: "nonce",
    };

    SignInWithApple.authorize(options)
      .then((result: SignInWithAppleResponse) => {
        if (result) {
          //这里的result.response.identityToken作为参数给后端
          //拿着参数请求接口
        }
      })
      .catch((error) => {}
      });

(前端测试的时候注意:macWeb上授权了也没有result 得在ios设备去操作)

三、把.p8结尾的文件发给后端

接下来是接口------后端

我们是app授权所以用JWT, web授权才用OAuth

参考文章:www.cnblogs.com/jice/p/1634...

总流程:

相关推荐
两只羊ovo2 分钟前
手写一个最小版 Claude Code:从任务拆解到 Agent Loop 转起来
前端
给个offer养家糊口9 分钟前
抽离 elpis npm 包
前端
默_笙12 分钟前
🙃 我让爬虫终于看到了我的网站,后端同事说"这也行?"(下):App Router 全栈实战
前端·javascript
葡萄城技术团队18 分钟前
一个单元格放置两个日期选择器:用 SpreadJS CellButtons 录入日期范围
前端
马可家的菠萝2 小时前
自动保存已经有了,为什么笔记软件还需要“历史版本”?
前端·后端·架构
半个落月2 小时前
从 "use client" 到 Route Handler:用 Todos 理解 Next.js 水合与全栈请求
前端·react.js·next.js
qq_452396232 小时前
第七篇:《大型前端项目的模块化与目录结构设计》
前端
你脑门上的脚印2 小时前
Vue 项目从零实现语音转文字、文字转语音功能(完整可用 + 踩坑指南)
前端·vue.js
paopaokaka_luck2 小时前
基于springboot3+vue3的车间生产管理系统(Echarts图形化分析、BI报表)
java·前端·spring boot·学习·echarts
程序员鱼皮2 小时前
3 大 DeepSeek Harness 进阶玩法,招多个大肥鱼帮我干活!
前端·后端·ai编程