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...

总流程:

相关推荐
风骏时光牛马3 分钟前
Bash变量未加双引号导致文件名含空格解析异常实战案例
前端
Vennn4 分钟前
Android自动化:使用 Web 方式实现某音未读消息检查与采集
前端·javascript·vue.js
Smilezyl6 分钟前
为了搞懂 AI Agent,我用 6000 行 JS 代码手搓了一个零依赖的 Coding Agent
前端·javascript·github
海鸥-w6 分钟前
前端学习python第三天笔记整理(list 列表,str字符串,tuple元组,set集合,dect,函数,类型注解)
前端·python·学习
flavor7 分钟前
Vue3 大屏适配组件(Scale / Rem 双方案一键切换)
前端
用户059540174469 分钟前
把 AI Agent 记忆验证从手工比对换成 Pytest + 向量数据库,测试效率提升 10 倍
前端·css
要写代码10 分钟前
2026-Css忘掉一切、归零再启-alpha和opacity
前端
光影少年11 分钟前
前端如何和蓝牙物联网进行通信和兼容性问题
前端·物联网·掘金·金石计划
星栈12 分钟前
我把售后模块砍到只剩 64 行:Rust 全栈 CRM 的 MVP 取舍实录
前端·后端·开源
玉宇夕落13 分钟前
懒加载与Suspense的学习
前端