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

总流程:

相关推荐
wulijuan88866614 小时前
ECharts图表性能优化的那些事
前端·javascript·echarts
❀͜͡傀儡师14 小时前
通过npm 手动安装、Docker 部署 OpenClaw小龙虾
前端·docker·npm
前端AI充电站14 小时前
Google 开始卷价格了:Gemini 3.1 Flash-Lite,会不会把 AI 应用成本真的打下来?
前端·人工智能
风止何安啊14 小时前
数字太长看花眼?一招教它排好队:千分位处理的实现
前端·javascript·面试
沙包大的拳头14 小时前
扩展运算符无法克隆 getBoundingClientRect() 获取的值
前端·javascript
忆江南14 小时前
# Flutter 语音房礼物下载方案(完整版)
前端
悟空瞎说14 小时前
React 19 带来了诸多创新
前端·react.js
im_AMBER14 小时前
高并发下的列表乱序与文档同步
前端·react.js·架构
前进的李工15 小时前
LangChain使用之Model IO(提示词模版之ChatPromptTemplate)
java·前端·人工智能·python·langchain·大模型